BASICS

ADMINISTRATION

DEVELOPMENT

SUPER ADMIN

  LAST UPDATED
5/8/2013

LDP Form Elements Advanced Field Attributes

Predefined Attributes for LDP Forms

OU Campus™ LDP Managed Forms provides a way to create a form asset that combines any number of input elements. Once created as an asset, the form can be inserted on a page by users through the WYSIWYG. There are several settings that need to be configured when creating the form and its elements. This document includes reference material for the element Advanced field, which can be optionally used for further customization.

Depending upon when a site was implemented in OU Campus, these attributes may or may not be contained within a current XSL. Please contact the OU Campus Support Team if the XSL functionality as described in this document needs to be added to an implementation. Additionally, any classes defined in CSS may override the settings for attributes such as cols and rows.

There are nine predefined attributes for the Advanced field that can be used, dependent on the type of element. The six available types are:

  • Single-Line Text Field: A single-line input field
  • Multi-Line Text Field: A text block input field
  • Radio Buttons: Only one option can be selected
  • Checkboxes: More than one selection can be made, a zero value is also valid
  • Drop-Down: Selection is made from a drop-down list
  • Multi-Selection: A user can select more than one item; for example, with CTRL + mouse clicks

General Syntax Rules:

  • Every declaration in the advanced field must be terminated with a semicolon. For example: legend=true;addclass=form_legend;
  • Attributes are always lowercase
  • In certain cases, more than one attribute can be included in the field
  • For datasets, additional dataset options are defined in the datasets.xsl file, and that is also where the names can be found of the current ones and new sets can be added
  • For addclass, the class has to be already defined in CSS

Predefined Attributes Reference Table

Attribute Name

Syntax Example

Description

legend

legend=true;

In a single-line text field, the text entered into the Default field appears as traditional content rather than a form field. This can be used, for example, to provide an additional instruction nor an example to the form submitter.

HTML Output Example

<legend>About</legend>

addclass

addclass=required;

Adds a class to the <span> that encapsulates the element. The class can be anything that has been defined in CSS. In this example, the “required” class simply adds a red asterisk.

HTML Output Example

<span class="required">

</span>

fieldset_start

fieldset_start=true;

Defines the opening tag for a <fieldset> tag within the form. This is used in conjunction with fieldset_end to set off a group of elements. In the examples that follow, it is indicated with a blue horizontal rule. It can also be used with fieldset_label to define a label for the group.

HTML Output Example

<fieldset>

fieldset_end

fieldset_end=true;

Defines the closing tag for a fieldset and is used in conjunction with fieldset_start and fieldset_label. In the examples that follow, it is indicated with a blue horizontal rule.

HTML Output Example:

</fieldset>

fieldset_label

fieldset_label=About;

Defines the label of the fieldset. For example, if the group should be labeled “About” then that can be defined here. It can be entered without quotes and can include spaces.

HTML Output Example:

<label for="id_ExamplesofMultiLineFields">
Examples of Multi-Line Fields</label>

size

size=10;

Adds a size attribute to a single-line text field within the form. The size attribute is used to specify the viewable size of the field defined in characters. This does not determine the number of allowed input characters.

HTML Output Example:

<input type="text" name="SizeAttribute" id="id_SizeAttribute" size="3">

cols

cols=10;

Adds the cols attribute with the specified value to a multi-line text field form element. For HTML output this attribute specifies the visible width in average character widths. This does not determine the number of allowed input characters.

HTML Output Example:

<textarea name="Description" cols="10" rows="10"></textarea>

rows

rows=10;

Adds a rows attribute with the specified value to a multi-line text field. For HTML output this attribute specifies the number of visible text lines for a textarea. This does not determine the number of allowed input characters.

HTML Output Example:

<textarea name="Description" cols="10" rows="10"></textarea>

dataset

dataset=state;

Adds a predefined dataset to a radio button, checkbox, single-select, or multi-select element. This is useful for data that are frequently used, but tedious to type. For example, the “state” dataset includes all 50 United States so that they may be used in a selector element. Preconfigured datasets include:

  • state
  • state_ab
  • country
  • year
  • month

 

Predefined Attributes Examples

The following section includes a completed form during creation and as it appears on a page, and then an example from the form of each of the attributes in action.

Example of Created Form

Example Form with Attribute

Form Elements Creation

Form Elements Creation

Example of Legend

In this example, legend=true; is used in the Advanced field and the text to use is within the Default field.

What Gets Entered

 legend true

Visual Representation

The text that is entered in the Default field is displayed on the page when used with the single line text field.

 Disclaimer Example

Example of a Fieldset

A fieldset typically includes three items that are used to group a set of form elements:

  • fieldset_start=true — Defines the beginning of the fieldset
  • fieldset_label="Label for Fieldset" — Defines the label of the fieldset
  • fieldset_end=true — Defines the end of the fieldset

In this example, a single-line text field element is used to start a fieldset and to give it the label of About. The label for the text field is Name.

What Gets Entered for Fieldset Start and Label

 Advanced with Validation Required

Visual Representation

 Example of Fieldset Label

Form Field with Label

 Form Field with Label

What Gets Entered for Fieldset End

In this example, size of a multi-line text field is defined with the cols and rows attribute and is also used to end the fieldset, which is indicated by the horizontal rule.

 Example of Advanced Field for Multiline

Visual Representation

 Example of Multiline Field

Example of Size

The size attribute specifies the viewable size (in characters) of a single-line text field within a form. This does not limit the number of allowed input characters.

What Gets Entered

 Example of Single Line

Visual Representation

This image includes examples of two fields: One using size=10; and one using size=100;.

Example of Single Line 

Example of Cols and Rows

Columns and rows can be used together or singularly to define the visible starting size of the text area for a multi-line text field. Users can input more text than the defined area as by default scroll bars and field resizers are included. The following example creates a multi-line text area of 40 characters by 15 lines.

What Gets Entered

 Example of Rows and Cols in Advanced Field

Visual Representation

 Example of Multiline Field

Here’s an example of the HTML output. It creates the <textarea> element with the cols defined as 40 and the rows attribute as 15.

 Code Example

Example of Addclass

The addclass attribute adds a class to the label of an element. The class can be anything that has been defined in CSS. In this example, the “required” class simply adds a red asterisk. If an institution has not had its own CSS implemented, by default the LDP form asset uses an included CSS file. This is typically located at: _resources/css/ouforms-bootstrap.css.

What Gets Entered

This example shows the use of the addclass=required; attribute with a drop-down list using the Country dataset.

 addclass=required;

Visual Representation

 

The definition for the “required” class was added to the CSS file as follows:

.required > label:first-child:before {
   content : "* ";
   color   : red;
}

Examples of Dataset

When defining a dataset in the Advanced field for an element, the individual items do not have to be additionally defined as the data is pulled from the XSL. For example, when defining a radio button element without the use of a dataset, the items are defined by clicking the New Radio Button and manually typing the text in the field. This holds true also for the checkbox, multi-select, and drop-down list items — No further definition is required with the form element creation as it is drawn from the XSL.

Radio Button Form Element Using: dataset=year;

The following example illustrates the use of a dataset in the Advanced field that produces a predefined listing of years (dataset=year;). The specific years are defined in the XSL (datasets.xsl).

What Gets Entered

 Radio Buttons

This example shows dataset=year; being used with a radio button element; the form user will be able to choose one and only one year.

Visual Representation

Year Data Set 

Dataset Definition from the XSL

<xsl:when test="ou:get-adv($adv,'dataset') = 'year'">
2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020</xsl:when>

Checkbox Form Element Using: dataset=month;

The following example illustrates the use of a dataset in the Advanced field that produces a predefined listing of months (dataset=month;). The specific months are defined in the XSL (datasets.xsl).

What Gets Entered

 Dataset Month

The resulting listing uses the checkbox element in which the user can select none or many.

Dataset Definition from the XSL

<xsl:when test="ou:get-adv($adv,'dataset') = 'month'">Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec</xsl:when>

Visual Representation

 Month Example

Drop-Down Menu Using: dataset=country;

The following example illustrates the use of a dataset in the Advanced field that produces a listing of countries (dataset=country;). The specific countries are defined in the XSL (datasets.xsl).

What Gets Entered

 Country

The resulting listing uses the drop-down menu element. In this example the use of addclass specifies the class named “required” which adds a red asterisk to the label.

Visual Representation

Country Drop-Down 

Dataset Definition from the XSL

<xsl:when test="ou:get-adv($adv,'dataset') = 'country'">Afghanistan,Albania,Algeria,Andorra,Angola,Antigua and Barbuda,Argentina,Armenia,Australia,Austria,Azerbaijan,Bahamas,Bahrain,Bangladesh,Barbados,Belarus,Belgium,Belize,Benin,Bhutan,Bolivia,Bosnia and Herzegovina,Botswana,Brazil,Brunei,Bulgaria,Burkina Faso,Burma,Burundi,Cambodia,Cameroon,Canada,Cape Verde,Central African Republic,Chad,Chile,China,Colombia,Comoros,Congo (Brazzaville),Congo (Kinshasa),Costa Rica,Cote d&quot;Ivoire,Croatia,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,Dominica,Dominican Republic,East Timor,Ecuador,Egypt,El Salvador,Equatorial Guinea,Eritrea,Estonia,Ethiopia,Fiji,Finland,France,Gabon,Gambia,Georgia,Germany,Ghana,Greece,Grenada,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Honduras,Hungary,Iceland,India,Indonesia,Iran,Iraq,Ireland,Israel,Italy,Jamaica,Japan,Jordan,Kazakhstan,Kenya,Kiribati,North Korea,South Korea,Kuwait,Kyrgyzstan,Laos,Latvia,Lebanon,Lesotho,Liberia,Libya,Liechtenstein,Lithuania,Luxembourg,Macedonia,Madagascar,Malawi,Malaysia,Maldives,Mali,Malta,Marshall Islands,Mauritania,Mauritius,Mexico,Federated States of Micronesia,Moldova,Monaco,Mongolia,Montenegro,Morocco,Mozambique,Namibia,Nauru,Nepal,Netherlands,New Zealand,Nicaragua,Niger,Nigeria,Norway,Oman,Pakistan,Palau,Panama,Papua New Guinea,Paraguay,Peru,Philippines,Poland,Portugal,Qatar,Romania,Russia,Rwanda,Saint Kitts &amp; Nevis,Saint Lucia,Saint Vincent and the Grenadines,Samoa,San Marino,Sao Tome and Principe,Saudi Arabia,Senegal,Serbia,Seychelles,Sierra Leone,Singapore,Slovakia,Slovenia,Solomon Islands,Somalia,South Africa,Spain,Sri Lanka,Sudan,Suriname,Swaziland,Sweden,Switzerland,Syria,Tajikistan,Tanzania,Thailand,Togo,Tonga,Trinidad &amp; Tobago,Tunisia,Turkey,Turkmenistan,Tuvalu,Uganda,Ukraine,United Arab Emirates,United Kingdom,United States,Uruguay,Uzbekistan,Vanuatu,Venezuela,Vietnam,Yemen,Zambia,Zimbabwe</xsl:when>

Multi-Select Form Element Using: dataset=state;

The following example illustrates the use of a dataset in the Advanced field that produces a listing of states of the United States of America (dataset=state;). The specific states are defined in the XSL (datasets.xsl).

What Gets Entered

State Dataset 

The multi-select allows users to use CTRL + mouse click to select one or more items from a list.

Visual Representation

State Name

Dataset Definition from the XSL

<xsl:when test="ou:get-adv($adv,'dataset') = 'state'">Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky,Louisiana,Maine,Maryland,Massachusetts,Michigan,Minnesota,Mississippi,Missouri,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York,North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Pennsylvania,Rhode Island,South Carolina,South Dakota,Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming</xsl:when>

Drop-Down Selection List Using: dataset=state_ab;

The following example shows a listing of state abbreviations for the states of the United States of America.

What Gets Entered

State Abbreviations 

Visual Representation

State Abbreviations

 

Dataset Definitions from the XSL

<xsl:when test="ou:get-adv($adv,'dataset') = 'state_ab'">AK,AL,AR,AZ,CA,CO,CT,DC,DE,FL,GA,HI,IA,ID,IL,IN,KS,KY,LA,MA,MD,ME,MI,MN,MO,MS,MT,NC,ND,NE,NH,NJ,NM,NV,NY,OH,OK,OR,PA,RI,SC, SD,TN,TX,UT,VA,VT,WA,WI,WV,WY</xsl:when>

Adding a New Dataset to the XSL

A conditional defined in the XSL creates the dataset based on the use of the Advanced field in the form element and the dataset named within. In the XSL, the name of the dataset to use gets passed to the XSL with $adv. The XSL does a choose test to return the correct dataset.

Another dataset can be added to the existing XSL as another when condition. The when condition is set off with double quotes, so the dataset name is included within single quotes. Each item in the dataset should be separated by a comma. Spaces can be used within an item, but character entities should not. For example, instead of an ampersand (&) the HTML entity should be used: &amp; and instead of a quote mark ('), the &quot; entity should be used.

1. Navigate to the datasets.xsl file (typically located in _resources/xsl/).

2. Add the dataset as another test condition. For example to add a dataset called "flavor" that consists of Ben & Jerry's ice cream flavors, use the following code as another test condition within the choose statement:

<xsl:when test="ou:get-adv($adv,'dataset') = 'flavor'">Americone Dream,Cannoli,Cheesecake Brownie,Chocolate Therapy,Chocolate Fudge Brownie, Cinnamon Buns</xsl:when>

3. Save the XSL. It does not need to be published.

4. Add a new element to the form asset. A defined dataset can be used with the following form elements:

  • Radio Buttons
  • Checkboxes
  • Drop-Down
  • Multi-Selection

5. In the Advanced field for the element include: dataset=flavor;

6. Save and republish the asset. Republishing an asset republishes any checked-in pages subscribed to that asset.

7. When the form is inserted on page, the result is similar to the following image:

Ice Cream Flavors

 

 


Was this page helpful?

Additional Comments:


(Include your email address if you would like a reply)