This subsection explains the method for describing UI widgets, and describes the setting of style.
UI widgets are described in HTML using the <div> tag or <span> tag.
Format for the <div> tag:
<div rcf:id="widget ID" rcf:type="widget type" rcf:property_name="value" ... ></div>
Format for the <span> tag:
<span rcf:id="widget ID" rcf:type="widget type" rcf:property_name="value" ... ></span>
Attribute | Description |
|---|---|
rcf:id | Specifies the widget ID (optional). In Systemwalker Runbook Automation Studio, you can specify a User Defined Attribute (UDA) in this property to overwrite other specific property with the UDA value when the widget is initialized. And the value is saved to the UDA value. This id property's value format is uda_ plus <identifier of the UDA>. Refer to 4.2.4 Common Properties for Screen Widgets for information on how to specify a UDA. |
rcf:type | Specifies the widget type. |
rcf:property_name | Specifies details such as the properties and style properties defined for each widget. |
For example, to relate this widget to UDA (UDA id is Variable1) and to specify the maxLength property and the color property for TextInput, describe as follows:
<span rcf:id="uda_Variable1" rcf:type="IBPMTextInput" rcf:maxLength="10" rcf:color="blue"> </span>
Note that you can describe some screen widgets with either the <div> tag or the <span> tag, but you must describe certain screen widgets with the <div> tag.
For the widgets that you can describe with either <div> or <span>, note the following difference in display:
When described with the <div> tag, line feed is inserted before and after the widget.
When described with the <span> tag, line feed is not inserted before and after the widget.
For more details on each screen widget, refer to 4.2 Screen Widgets.
For additional functional widgets, there is no difference whether you describe the <div> tag or <span> tag.
Point
Note the following points when describing UI widgets:
End tags
Always include an end tag, even when describing widgets that contain no child elements. If you describe such widgets as empty elements, subsequent widgets may not be displayed.
Correct example:
<span rcf:id="id1" rcf:type="IBPMTextInput"></span>
Incorrect example:
<span rcf:id="id2" rcf:type="IBPMTextInput"/>
Character strings starting with "rcf-"
Character strings that start with "rcf-" have a special meaning in QuickForm. For this reason, do not specify a character string starting with "rcf-" as the value of the following:
HTML id attributes
HTML style attributes
rcf:id attributes
rcf:id attributes and HTML id attributes
When you specify the rcf:id attribute, the ID value that you specify must satisfy the following conditions:
It must be unique in the window for which it is specified.
For example, during delayed loading of a window (when only a part of the window is prepared separately and the window information is loaded in the background while the user operates the window), all of the widget IDs, including the window information loaded by delayed loading, must be unique.
It must not duplicate any of the values of HTML id attributes for the window.
If you specify an ID for an HTML element using the id attribute, it cannot be the same as any of the widget IDs for that window. If a value is duplicated, correct behavior cannot be guaranteed.
Array elements
With properties that have String or Number arrays as values, you can specify multiple array elements by separating them with semi-colons ( ; ).
Example: For the options property of SelectList
<div rcf:type="IBPMSelectList" rcf:options="item1;item2;item3"></div>
For empty array elements, specify an empty string as the attribute value.
You cannot specify other types of array (such as Object type) as the attribute value.
There are two ways to specify the style of screen widgets:
Settings Using Style Properties
You can set the styles that you specify for screen widgets as properties (style properties).
For example, to change the background color, character color and font size of the TextInput widget, specify as follows:
<span rcf:type="IBPMTextInput" rcf:backgroundColor="#FFFFFF" rcf:color="#000000" rcf:fontSize="large"></span>
Note also that any specified style properties that cannot be specified for screen widgets are ignored.
The style property includes the style property to the entire parts and the style property to specific parts.
Please refer to section 4.2.5 Style Properties for the naming convention of the style property.
For details of style properties for each widget, please refer to the explanation of each widget.
Settings Using CSS
You can specify a class name for a screen widget using the styleClass property. Using the class name, you can describe styles in CSS.
The following is an example of a description for the SelectList widget.
<style type="text/css">
.myClass .rcf-SelectList{
width: 100px;
height: 200px;
color: blue;
border-color: black;
background-color: lightgrey;
}
.myClass .rcf-SelectList-optionSelected {
color: red;
}
</style>
<div rcf:type="IBPMSelectList" rcf:styleClass="myClass" rcf:options="foo;bar">
</div>
When you specify a class name for a screen widget using the styleClass property, you can describe in CSS the styles that can be specified in the style properties of that widget.
Note the following rules that affect describing styles in CSS:
If the style property name is entirely in lower case (for example: width, height), the name can be specified as is in CSS:
If the style property name contains uppercase characters (for example: backgroundColor, fontSize), each uppercase character must be changed to lower case and preceded by a dash ( - ) in CSS, as in the examples below.
Change "backgroundColor" to "background-color".
Change "fontSize to "font-size".
If the style property name contains a prefix (also called a part name), such as titleHeight or bodyPadding, specify the style property name with a specific class name in CSS. (For example ".myClass" is the class name specified in styleClass.)
For the titleHeight of the Panel:
.myClass .rcf-Panel-title {
height: 30px;
}For the bodyBackgroundColor of the Panel:
.myClass .rcf-Panel-body {
background-color: white;
}Note that, the result of defining styles in CSS that you cannot define in screen widget style properties has not been determined.
You can only use attributes that start with "rcf:" and the style attributes in UI widget <div> tags and <span> tags.
The CSS style properties that you can include in the style attribute are as follows:
position
top
left
z-index
You cannot use the style property with the PopupCalendar.
It is recommended to use no more than 50 screen widgets on a single page. This total includes widgets that are not initially displayed, but are displayed later using widgets such as ViewStack and FragmentContainer.
In the case of a large number of widgets, the page may take a long time to display and the messages may be displayed.
Note that, depending on the performance of the client machine, even if you include fewer than 50 screen widgets, the page may take a long time to display or an error message may be displayed if you use many complex widgets such as Calendar.