Elements of a Form

For each form element, the _id value is auto generated. This value is a combination of text and numbers and depends upon the element you are creating. The first element of the form always begins with 1. For example, in a form the _id for the first text field element is txtf_1  and the _id for the first text area element is txta_1. In the same form, the _id for the second text field element is txtf_2 and the _id for the second text area element is txta_2.
casm172
For each form element, the _id value is auto generated. This value is a combination of text and numbers and depends upon the element you are creating. The first element of the form always begins with 1. For example, in a form the _id for the first text field element is txtf_1  and the _id for the first text area element is txta_1. In the same form, the _id for the second text field element is txtf_2 and the _id for the second text area element is txta_2.
You can modify this auto generated _id value of the form elements, if required.
CA Service Catalog 17.2 does not support drag and drop of a form element to a Form Preview Panel.
We recommend that you do not specify the same _id value for the different form elements in the same form. Having multiple form elements with the same _id value can cause validation errors.
To reuse the elements that you have customized, copy and paste the elements from one form to another.
The Form Designer provides the following elements for you to create and modify forms:
Check Box
Enables the user to select or decline a single option.
You can optionally use multiple check boxes to group related choices, of which users can select two or more. For example, you can add one check box each for the peripheral devices that are associated with a laptop computer. These devices include a mouse, docking station, carrying case, and external backup drive.
Column Layout
Enables the user to organize the components on the form for maximum efficiency. The column layout includes two vertical columns, Column 1 and Column 2, aligned next to each other. You can place form components in one or both of these columns. You cannot insert one column inside another, and you are not allowed to add more than two columns per Column Layout place holder. However, you can place multiple column layouts in a form.
Date
Sets the format of the date and time. The date and time that appear on the Form Designer match the date and time of the browser that you are using to access CA Service Catalog. The date and time that appear to other users accessing the form match the date and time of their browsers. The date and time of form settings -- even on the same forms -- can differ between users in different time zones. This principle applies whether users access the form through the Form Designer or while requesting a service.
  • Date
    Use the date portion of this field whenever date information is required.
    Example:
    Start Date, Date Required, Estimated Date of Arrival. Users can select a date from the calendar.
    By default, the date format for the Date Time field matches the date format of the current business unit. 
    As an administrator, you can optionally change the default format for the business unit to a different format: Edit the profile of the business unit on the Administration, Business Units page and select a new date format. Examples include M/d/yyyy, d-M-yyyy, or yyyy/M/d. While giving inputs for Date, ensure to follow the global standards for Date formats. 
    Specify date formats in Date Time fields on your forms according to the following rules:
    Letter
    Meaning
    Format
    Example
    y
    year
    Number
    2009
    M
    month in a year
    Text or Number
    July or 07
    d
    day in a month
    Number
    10
  • Time
    Use the time portion of the Date Time field whenever time information is required.
    Example:
    Start Time, End Time, and Estimated Time of Arrival. When you use the time portion of this field, a drop-down list of time values appears next to the calendar. Users can select a time from this list.
    Default:
    The time format for the Date Time field matches the time format of the business unit of the user.
    As an administrator, you can optionally change the default format for the business unit to a different format: Edit the profile of the business unit on the Administration, Business Units page and select a new time format.
    Specify time formats in Date Time fields on your forms according to the following rules:
    Format
    Separator
    HH:mm
    colon
    HH.mm
    period
    If the Hide Time attribute is set to
    true
    , then the time portion of the field is hidden.  This time format is ignored. The drop-down list for selecting the time does not appear on the form. Otherwise, the field accepts valid values that are separated by a space. CA Service Catalog supports the time format attributes supplied with the Google Web Toolkit (GWT) 1.6. For more information about these attributes, see the Google web site, www.google.com. You can add literal values that are enclosed in quotation marks (such as "hours" or "minutes") before or after the hour and minute values.
    The HTML attributes named
    hidetime
    and
    increment
    control whether and how incremented time values appear in each Date Time field.
Dual List
  • The admin must ensure that the dual list data do not contain pipe “|” symbol due to technical reasons.
  • Selected items of a dual list are missing in CA Service Catalog 17.1 and later versions. The Dual list does not work with duplicate value fields. To resolve this, for each dual list option, ensure that the value field is unique for the dual list to work properly.
Displays two columns in a box: The left column lists available options, and the right column lists the selected options.
A toolbar of arrows appears between the columns. For example, to select an option, highlight it in the left column. Then, you click the arrow to move the option to the right column.
Users can highlight multiple options in one column and click the arrow to move them as a group to the other column. Users can click the double arrows to move all options from one column to another. This action selects or deselects
all
options.
While you are designing the form, you can perform the same actions as the user to select and clear options.
By default, the dual list field contains
no
available options. To populate the dual list with available options, use
one
of the following methods:
  • Specify a report data object for the dual list: Enter the HTML attributes named Report/Plug-in Id and Report/Plug-in Variables.
  • Create a static list of individual options for the dual list: Add options to the dual list. You can add, move, and delete options to the dual list. The default dual list element in the Component Tree includes one option. You can copy and modify this option to create more options.
To enable users to specify the order of the selected options, specify
true
for the HTML attribute named ordered. When you do so, the toolbar is updated to include up and down arrows. Users can highlight selected options and click these arrows to move the options up or down in the list. When you are designing the form, you can order the selected options in the right column. The available options in the left column always appear in the order that you arrange them on the Component Tree.
Field set
Enables the user to group multiple elements as a set. Examples include the following groups:
  • Accessories for a laptop such as battery charger, carrying case, and docking station.
  • Telephone numbers for a user such as home, work, cell, and fax.
Elements in a field set have a box around them to show that they are related. For maximum accessibility, do
not
place one of the following elements immediately after a field set: check box, Date Time field, radio group, and radio buttons.
Image
Enables the user to provide a picture representing an item that can be included in an associated service or service option. The image that you specify must reside in the filestore, the central location for CA Service Catalog files. Use the following format:
FileStore/
path
/
filename.ext
The folder name
FileStore
is case-sensitive. Use the correct case in path names and all other references.
Label
Identifies a form or an area of the form.
Example:
A title in a form, such as Medical History Form. Within the form, you can have other labels, such as Family History, Eating Habits, and Illnesses. If you use a multiple-column format in your form, it can be helpful to use a label as a heading for each column.
Use the HTML attribute that is named Label Text to configure the label that users see on the form. You can optionally perform the following tasks for labels:
Lookup Field
Works with the JavaScript function ca_fdDoFieldLookup(fieldId, reportId) to populate fields based on user input to a report data object.
You configure the lookup field to prompt the user to enter the data for the query of the data object.
Example:
user ID, asset ID, or city. The data object queries the data source, which is based on the user input. The results are used to populate the fields you specify.
The user clicks the search icon for the lookup field and enters the requested data. The query runs and returns the search results in rows. Each matching value appears in a row. Users review the rows and select one. When the user selects a row, the results from that row populate the matching fields on the form.
For example, the lookup field can prompt the user to enter a user ID. The query then searches the database for the first name and last name of the user ID. The user can select one row to populate the corresponding First Name and Last Name fields on the form.
Radio Group
Presents a list of options to the user. A radio group contains radio buttons
only
. A radio group cannot contain any other element. The user must select only one.
Example:
A radio group that is named Size with three buttons: one each for Small, Medium, and Large.  In contrast to options in select boxes, radio group buttons
always
appear on the form. To save space, you can use a radio group only for fields having four or fewer options.
Select
: The admin must ensure that the select data do not contain pipe “|” symbol due to technical reasons.
Presents a list of options, of which the user select either one (the default) or multiple options.
A select box contains select options
only
. A select box cannot contain any other element.
Example:
You can create a select box that is named Width with two options: Narrow and Standard.
The options for select boxes appear on the form only when the user clicks the drop-down list box. Therefore, you can use a select box rather than an option group to save space on a form. Doing so is especially relevant when the number of options is four or more.
Optionally change the default setting of a select box to
True
or
False
. When you set the select box to
False
(the default). the select  box appears as a combo box on the form and users can select one item from the list. You cannot enter a custom value for this attribute. When you set the attribute to
True
, the select box appears as a sequential list or list box on the form. The user sees multiple options in the select box and can select multiple options. Users can type inside a select box. As they type, the drop-down list is populated with the options that begin with the typed text. Users can then select an option from this "auto-complete" list. 
To set specifications for the auto-complete list, use the Minimum Search Characters attribute. For more information, see HTML attributes for select boxes only.
To delete an already selected value from the drop-down list, select the component and hit Delete/ Backspace.
Slider
Enables the user
slide
a control forwards or backwards to increase or decrease the selected value. Each slide updates the selected value according to the increment that you set. Specify the unit of measure for the slider in a message that appears each time that the user increases or decreases the selected value. Sample messages include
0 CPUs, 1 CPU, 2 CPUs, and 3 CPUs
.
To configure the contents and behavior of the slider, use the following attributes:
Spinner Field
Enables a user to select a numerical value from a range of incremented values.
Example:
100, 200, 300, and 400. The user clicks the up or down arrows to increase or decrement the selected value. Use the HTML attributes for spinner fields only to configure the contents and behavior of the spinner field.
Table
Enables the user to create tables. You can create either a Static Table or a Dynamic Table.
Static Table
A static table is a type of container, like a field set, that can contain certain elements of a form. You can use the columns in the table to organize the data from each type of element. In contrast to a dynamic table, a static table consists of fixed data that you specify manually.
You can create a static table to enter structured data into a form.
Follow these steps:
  1. Edit or create the form in which you want to add the table. Expand the form.
  2. Add the table element to the form:
    1. (Optional) Create a field set to contain the table.
    2. Expand the System folder, drag the Table element, and drop it on the form. If applicable, drop the table onto the field set that you created in the previous step.
    3. Specify an _id value for the table and save the form.
  3. Add an element to the table:
    1. Expand the table and display the Row field.
    2. Drag one of the following elements from the System folder and drop it on the Row field:
      • Date Time field
      • Label
      • Select field whose Multi-Select attribute is set to false. This setting allows only a
        single
        selection.
      • Spinner
      • Text
      The name of the element that you drag-and-drop becomes the name of the first column. For example, if you drag-and-drop a Date element, the name of the first column becomes Date.
      Similarly, the data that you enter in the column must match its element. For example, in a Date column, you can enter only dates.
    3. Specify an _id value for the column and save the form.
      After you save the form, you can optionally rename the element that you dragged and dropped. If you rename the element, the name of the column changes accordingly. For example, if you rename the element to Start Date, the name of the column also changes to Start Date.
    4. Configure each element that you add to a table. The steps are the same as adding the element to the form without a table.
      For date fields, the value returned must be a long or appropriately formatted string. For label columns, the value is converted to a string. For spinner columns, the value must be an integer or double. For text columns, the value is converted to a string.
  4. To add rows to the table, perform the following steps:
    1. Select the Row field on the Table element on the System folder.
    2. Drag-and-drop it on the Table element on the form.
    3. Repeat these steps until you have added all the rows that you want. You cannot move, copy, cut, or paste rows.
  5. Define the values for each row in the table, as follows:
    1. In the first row, specify the static values of each cell, using their value attribute.
    2. In the remaining rows, specify values using the column attribute.
      The Form Designer does
      not
      validate any data or the data format that you enter in the table rows. When users display the form in a request, the Catalog system validates the data and displays it
      only
      if you use the correct format. Thus, any invalid values that you specify do
      not
      appear when users view the form in a request.
      Example:
      If you specify a string value for a date column, the corresponding table cell appears empty to the user.
    3. Perform this step if applicable; otherwise, skip it.
      If you are using a Select field whose Multi-Select attribute is set to false, then the Select field does
      not
      contain the value attribute. In that case, perform the following actions:
      • For the first row: Enter the value of the Selected Index attribute of the Select field. For example, to specify the first option, enter 0. To specify the second option, specify 1, and so on.
      • For the remaining rows: Copy the value of the
        value
        attribute from the select option of the Select field. Paste this value into the column attribute of the row.
  6. Specify any of the following attributes:
Dynamic Table
A dynamic table is also a type of container that can contain certain elements of a form. You can use the columns in the table to organize the data from each type of element.
You can create a dynamic table to enter structured data from a report data object into a form.
When using API Plug-ins, CA Service Catalog uses Microsoft Internet Explorer 11 in Microsoft Internet Explorer 10 document mode.
Follow these steps:
  1. Create or edit the report data object or API plug-in that you plan to use to populate the dynamic table.
    The variables in the report data object or API plug-in must return data in the format that the table columns require. Otherwise, users do not see this data when they open the form in a request.
  2. Edit or create the form in which you want to add the table. Expand the form.
  3. Add the Table element to the form, as follows:
    1. (Optional) Create a field set to contain the table.
    2. Expand the System folder, drag the Table element, and drop it on the form. If applicable, drop the table onto the field set.
    3. Specify an _id value for the table and save the form.
  4. Add the report data object or API plug-in to the table, as follows:
    1. Select the Table element.
    2. If you are using an API plug-in, specify the values of the following attributes:
      • Report/Plug-in Id: Enter the ID of the API plug-in that you want to use. You can find values for these attributes on the Administration, Tools, Plug-ins page. Report/Plug-in Variables: Open the API plug-in that you selected to display its details, including variables. On the details page, the Inputs section lists the ID values and descriptions of the input variables for the plug-in. 
    3. If you are using a report data object, specify the values of the following attributes:
      • Report/Plug-in Id: Enter the ID of the report data object that you want to use. You can find values for these attributes on the Administration, Report Builder, Data Objects page.
      • Report/Plug-in Variables: Click the Edit icon for the report data object that you selected to display its properties, including variables. On the properties page, the input variables for the report data object appear as follows:
        For a Query: The input variables appear as %
        expression
        % statements.
        For Plug-in: The input variables appear in the Arguments field.
        For CSV: The input variables do not apply.
      For both attributes, enter variables as a JSON expression, for example:
    $({'<variable name>' : '<variable value>', ...}) $({'userid':_.user.id,'rm_orgunit':ca_fdGetSelectedOptionValues(ca_fd.formId,'orgunit_id')})
    Specify the variables carefully. If you specify
    no
    variables, unpredictable results can occur.
  5. Save the form.
    When users complete this form, the report data object or API plug-in runs and returns the data that you specified.
Configure the Dynamic Table
After you create a dynamic table, you configure it to contain the data and use the format that you require.
Follow these steps:
  1. Review the following requirements for adding elements to the table. Each element that you add becomes a column in the table.
    • Add one element for each variable that you specified in the Report/Plug-in Variables attribute of the table element.
    • (API plug-ins) The value of the _id attribute of each element (column) in the table must match a value of an Output Id of the plug-in.
    • (Report data objects) The value of the _id attribute of each element (column) in the table must match a value of a Field of the data object.
  2. Add an element to the table, according to the requirements in the previous step, as follows:
    1. Expand the table to display the Row field.
    2. Drag the element from the System folder and drop it on the Row field. You can drag-and-drop the following elements:
      • Date Time field
      • Label
      • Spinner
      • Text
      • Select the field whose Multi-Select attribute is set to False. This setting allows only a
        single
        selection.
    3. Perform this step if applicable; otherwise, skip it.
      If you are using a Select field whose Multi-Select attribute is set to false, then the Select field does
      not
      contain the value attribute. In that case, you can populate the Select field using
      either
      a static list
      or
      a report data object.
      To populate the Select field
      using a static list,
      perform the following actions:
      • For the first row: Enter the value of the Selected Index attribute of the Select field. For example, to specify the first option, enter 0. To specify the second option, specify 1, and so on.
      • For the remaining rows: Copy the value of the
        value
        attribute from the select option of the Select field. Paste this value into the column attribute of the row.
      The name of the element that you drag-and-drop becomes the name of the first column. For example, if you drag-and-drop a Date element, the name of the first column becomes Date.
      You cannot move, copy, cut, or paste rows.
    4. Specify an _id value for the column and save the form.
      The _id value for the column must meet the requirements noted in the previous step. Also, the data type and data format must also be the same. Otherwise, the column is not populated with data.
      Example: You are using an API plug-in, and you want a table column to specify the start date of an event. You drag-and-drop a Date Time element onto the table and specify an _id value of start_date. This element becomes a column in the table. Therefore, the Output Id of a variable of the API plug-in must also be start_date. The sequence does not matter. This variable must also return the required date and time data in the format that matches the Date Time element.
  3. Configure each element that you add to a table. The procedure is the same as if you were adding the element to the form without a table.
    Each one is a basic element, except the Date Time field and the Select field. The data that you enter in the column must match its element. For example, in a Date column, you can enter only dates.
  4. (Optional) Specify a custom value for pagination for the table, as follows:
    1. Specify the value of the Page Size attribute of the Table element.
    2. For API plug-ins, configure sorting and pagination parameters. For report data objects, further action is necessary.
  5. (API plug-ins only) Enable users to sort the results in the table, as follows:
    1. Specify a value of True for the Sortable attribute of the Table element.
    2. Configure sorting and pagination parameters. Sorting does not apply to report data objects.
  6. Specify any of the following attributes:
Text Area
Enables the user to enter more than one line of input.
Example:
A free-form description of the offering.
Text Field
Enables the user to enter free-form text.
Example:
Fields for the user to enter a name, address, telephone number, or multiple-digit numeric entries. Use text fields when only one line of input is required.
Page Layout
Enables the user to place the form components within a page layout for maximum efficiency.  You cannot place one page layout inside another and you can have only one page layout in a form.
You can have any number of pages within a page layout.
Page layout element can be one of the following:
  • Card layout - Displays the element as pages with next and back button if there are multiple pages. This is the default page layout.
  • Tab layout - Displays the element as tabs on top of the page layout.
Default page height:
400 pixels
Microsoft Internet Explorer