UI Map Attributes and Functions
Contents
Format Input and Output Fields
Search Using a Pop-Up Explorer Zone
Fire JavaScript for Browser Events
Refresh a Rendered Map or Portal Page
Upload and Download a CSV File
Bind XML to HTML
Only two different attributes are required to bind a UI Map's XML to its HTML. Both of these attributes require an XML document embedded within the HTML, where the XML is bounded by <xml> nodes.
Linking a Field
Syntax | Values | Description |
---|---|---|
oraField=" " |
Field element XPath | This attribute is used to link an HTML element directly with an XML element, where the XML element is defined within the UI Map's XML schema. The attribute can be used with any rendering HTML element, such as: <span>, <div>, and <input>. |
-
HTML for input element:
<html> <body> <table> <tr> <td>Address:</td> <td><input type="text" oraField="address"/></td> </tr> <tr> <td>City:</td> <td><input type="text" oraField="city"/></td> </tr> <tr> <td>State:</td> <td><input type="text" oraField="state"/></td> </tr> <tr> <td>Zip:</td> <td><input type="text" oraField="zip"/></td> </tr> </table> </body> <xml> <root> <address>123 Main St</address> <city>Alameda</city> <state>CA</state> <zip>94770</zip> </root> </xml> </html>
Rendered HTML
-
HTML for span and div elements:
<html> <body> <div oraField="address"></div> <span oraField="city"></span> <span>,</span> <span oraField="state"></span> <span oraField="zip"></span> <span oraField="country"></span> </body> <xml> <root> <address>123 Main St</address> <city>Alameda</city> <state>CA</state> <zip>94770</zip> </root> </xml> </html>
HTML rendered:
Linking a List
This attribute is used to link an HTML table with an XML list, where the XML list is defined within the UI Map's XML schema. The purpose of the element is to trigger the framework to replicate the table's HTML for each occurrence of the list.
Syntax | Values | Description |
---|---|---|
oraList=" " |
List element XPath | This attribute is used to link an HTML table with an XML list, where the XML list is defined within the UI Map's XML schema. The purpose of the element is to trigger the framework to replicate the table's HTML for each occurrence of the list. |
<html>
<head><title>Bind xml list element</title></head>
<body>
<table oraList="payment">
<thead>
<tr>
<th><span>Pay Date</span></th>
<th><span>Amount</span></th>
</tr>
<tr/>
</thead>
<tr>
<td>
<span oraField="date" oraType="date"></span>
</td>
<td align="right">
<span oraField="amount" oraType="money"></span>
</td>
</tr>
</table>
</body>
<xml>
<root>
<payment>
<date>2008-01-01</date>
<amount>44.28</amount>
</payment>
<payment>
<date>2008-02-01</date>
<amount>32.87</amount>
</payment>
<payment>
<date>2008-03-01</date>
<amount>21.76</amount>
</payment>
</root>
</xml>
</html>
HTML rendered:
Build a Dropdown List
The following attributes are provided to build an HTML ‘select’ element, also called a dropdown, based on various sources.
Source | Syntax | Values | Examples |
---|---|---|---|
Lookup |
oraSelect="lookup: ;" |
Lookup field |
|
Extendable Lookup |
oraSelect="lookupBO: ;" |
BO code |
|
Characteristic Type (pre-defined) |
oraSelect="charType: ;" |
Characteristic Type code |
|
Control Table |
oraSelect="table: ;" Note: This attribute only works with tables that follow the standard
control table structure where there is a related language table that
includes that includes the column DESCR as its description column. Use the Application
Viewer data dictionary to identify tables that qualify for this functionality.
Warning: The oraSelect function will only work if
less than 500 values are displayed.
|
Table name |
|
Page Service |
oraSelect="service: ;" |
Page Service name |
|
Embedded List | Used to build a select dropdown based on a list within the
map’s XML. oraSelect="valuePath: ;descPath: " |
After the valuePath, indicate the XPath of the element that holds the values. After the descPath, indicate the XPath of the element that holds the descriptions. |
|
Service Script |
oraSelect="ss: ;" |
Service Script code | See below for additional syntax needed when using this function. |
Business Service |
oraSelect="bs: ;" |
Business Service code | See below for additional syntax needed when using this function. |
When specifying a service script or a business service, extra mapping information is needed to pass data to and from the service.
Syntax | Values | Description |
---|---|---|
oraSelectIn=" ;" |
serviceXPath:element; | Used to pass the value of another element into the service (mapping to the service's XPath). |
serviceXPath:'Literal'; | Used to pass a constant or literal to the service (mapping to the service's XPath). | |
oraSelectOut="valuePath: ; descPath: " |
See examples below | Used to indicate which element in the service's output holds the values and which one holds the descriptions. |
Example using a business service:
...
<td>External System: </td>
<td>
<select oraField="externalSystem"
oraSelect="bs:F1-RetrieveExternalSystems"
oraSelectIn="outboundMsgType:boGroup/parameters/outboundMsgType;"
oraSelectOut="valuePath:results/externalSystem;
descPath:results/description">
</select>
</td>
...
This method for building dropdowns is often used when there is a dependency between elements and the list of valid values in a dropdown (for the child element) is based on another element in the map (the parent element). When the parent element is changed, it may be required to refresh the child element. This behavior can be implemented using the function called within an onChange event in the map. The syntax is oraHandleDependentElements('dependent element');. Multiple target elements (dependents) can be named.
The following example is related to the above business service example where the list of external systems is specific for a given outbound message type, which is passed in as input. The snippet below shows the configuration for the outbound message type element to trigger a refresh of the external system’s dropdown list.
...
<div>
<label oraLabel="boGroup/parameters/outboundMsgType"></label>
<span>
<select oraSelect="table:F1_OUTMSG_TYPE"
oraField="boGroup/parameters/outboundMsgType"
onChange="oraHandleDependentElements('boGroup/parameters/externalSystem');">
</select>
</span>
</div>
...
Format Input and Output Fields
The following attributes are designed to apply data type formatting for input and output fields.
Automatic Formatting
Syntax |
---|
oraSchemaDataTypes="false" |
This attribute is used to trigger automatic formatting in the rendered HTML document. The automated formatting will occur according to the data type attributes defined in the UI map's schema. For details on specific data type formatting, please refer to the oraType attribute descriptions below.
-
UI Map schema:
<schema> <schemaDate dataType="date"/> <schemaDateTime dataType="dateTime"/> <schemaFKRef fkRef="CI_USER"/> <schemaLookup dataType="lookup" lookup="ACCESS_MODE"/> <schemaMoney dataType="money"/> <schemaNumber dataType="number"/> <schemaTime dataType="time"/> </schema>
-
UI Map HTML:
<html> <body oraSchemaDataTypes="true"> <table border="1" cellpadding="1" cellspacing="1"> <tr><th>dataType</th><th>result type</th><th>input result</th><th> display-only result</th></tr> <tr> <td rowspan="2">date (from schema)</td> <td>raw</td> <td><input oraField="schemaDate" oraType="string" /></td> <td><span oraField="schemaDate" oraType="string"></span></td> </tr> <tr> <td>rendered</td> <td><input oraField="schemaDate"></td> <td><span oraField="schemaDate"></span></td> </tr> <tr> <td rowspan="2">dateTime (from schema)</td> <td>raw</td> <td><input oraField="schemaDateTime" oraType="string"></td> <td><span oraField="schemaDateTime" oraType="string"></span></td> </tr> <tr> <td>rendered</td> <td><input oraField="schemaDateTime"></td> <td><span oraField="schemaDateTime"></span></td> </tr> <tr> <td rowspan="2">fkRef (from schema)**</td> <td>raw</td> <td><input oraField="schemaFkRef" oraType="string"></td> <td><span oraField="schemaFkRef" oraType="string"></span></td> </tr> <tr> <td>rendered</td> <td><input oraField="schemaFkRef"></td> <td><span oraField="schemaFkRef"></span></td> </tr> <tr> <td rowspan="2">lookup (from schema)</td> <td>raw</td> <td><input oraField="schemaLookup" oraType="string"></td> <td><span oraField="schemaLookup" oraType="string"></span></td> </tr> <tr> <td>rendered</td> <td><input oraField="schemaLookup"></td> <td><span oraField="schemaLookup"></span></td> </tr> <tr> <td rowspan="2">money (from schema)</td> <td>raw</td> <td><input oraField="schemaMoney" oraType="string"></td> <td><span oraField="schemaMoney" oraType="string"></span></td> </tr> <tr> <td>rendered</td> <td><input oraField="schemaMoney"></td> <td><span oraField="schemaMoney"></span></td> </tr> <tr> <td rowspan="2">number (from schema)</td> <td>raw</td> <td><input oraField="schemaNumber" oraType="string"/></td> <td><span oraField="schemaNumber" oraType="string"></span></td> </tr> <tr> <td>rendered</td> <td><input oraField="schemaNumber"></td> <td><span oraField="schemaNumber"></span></td> </tr> <tr> <td rowspan="2">time (from schema)</td> <td>raw</td> <td><input oraField="schemaTime" oraType="string"></span></td> <td><span oraField="schemaTime" oraType="string"></span></td> </tr> <tr> <td>rendered</td> <td><input oraField="schemaTime"></td> <td><span oraField="schemaTime"></span></td> </tr> </table> </body> <xml> <root> <schemaDate>2007-11-02</schemaDate> <schemaDateTime>2007-11-02-23.45.00</schemaDateTime> <schemaFkRef>USD</schemaFkRef> <schemaLookup>A</schemaLookup> <schemaMoney>1000000</schemaMoney> <schemaNumber>5661976.11548</schemaNumber> <schemaTime>23.45.00</schemaTime> </root> </xml> </html>
HTML rendered.
Date Formatting
This function is used to display a date according to the user's display profile. For input fields, the setting formats the data when the user tabs out of the field.
Syntax |
---|
oraType="date" |
<html>
<body>
<table summary="" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Date: </td>
<td><span oraField="date" oraType="date"></span></td>
</tr>
<tr>
<td>Date: </td>
<td><input oraField="date" oraType="date"/></td>
</tr>
</table>
</body>
<xml>
<root>
<date>2008-12-28</date>
</root>
</xml>
</html>
HTML rendered.
Time Formatting
This function is used to display a time according to the user's display profile. For input fields, the setting formats the data when the user tabs out of the field.
Syntax |
---|
oraType="time" |
<html>
<body>
<table summary="" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Time: </td>
<td><span oraField="time" oraType="time"></span></td>
</tr>
<tr>
<td>Time: </td>
<td><input oraField="time" oraType="time"/></td>
</tr>
</table>
</body>
<xml>
<root>
<time>00.28.54.389</time>
</root>
</xml>
</html>
HTML rendered.
Date and Time Formatting
This function is used to display a timestamp according to the user's display profile. If this function is used for an input element, it is broken into two pieces, one for date and one for time. Optionally, the time portion of the date time element can be suppressed using the attribute value 'time:suppress'.
Syntax |
---|
oraType="dateTime; time:suppress" |
<html>
<body>
<table summary="" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Date time: </td>
<td><span oraField="dateTime" oraType="dateTime"></span></td>
</tr>
<tr>
<td>Date only: </td>
<td><span oraField="dateTime" oraType="dateTime; time:suppress"></span></td>
</tr>
<tr>
<td>Date time: </td>
<td><input oraField="dateTime" oraType="dateTime"/></td>
</tr>
<tr>
<td>Date only: </td>
<td><input oraField="dateTime" oraType="dateTime; time:suppress"/></td>
</tr>
</table>
</body>
<xml>
<root>
<dateTime>2009-11-01-00.28.54</dateTime>
</root>
</xml>
</html>
HTML rendered.
Date / Time Formatting with Standard Time
This true function is used to render a date / time element according to the daylight savings time schedule of the 'base' time zone. The 'base' time zone is specified on the Installation table and represents the database time zone. For input elements with this setting, all time entered is assumed to correspond with the daylight savings time schedule of the base time zone. If a time is entered that cannot be unambiguously translated to standard time, then the user will be required to provide a time zone label to indicate whether daylight savings time, or standard time, has been entered.
Syntax |
---|
oraType="dateTime; stdTime:true;" |
<html>
<body>
<table summary="" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Date time: </td>
<td><span oraField="dateTime" oraType="dateTime; stdTime:true;"></span></td>
</tr>
<tr>
<td>Date time: </td>
<td><input oraField="dateTime" oraType="dateTime; stdTime:true;"/></td>
</tr>
</table>
</body>
<xml>
<root>
<dateTime>2009-11-01-00.28.54</dateTime>
</root>
</xml>
</html>
HTML rendered.
HTML rendered for the following day.
Date and Time Formatting with Time Zone Reference
Syntax | Valid Values | Description |
---|---|---|
oraType="dateTime; stdTimeRef: ;" | Reference an XPath after the colon. | This function is used to render a date / time element according to the daylight savings time schedule of a time zone whose XPath is referenced. Note that the time processed is assumed to have been stored in the standard time of the referenced time zone - so only daylight savings time shifting will execute - not time zone shifting. |
oraType="dateTime; displayRef: ;" | Reference an XPath after the colon. | This function is similar to the stdTimeRef function, except that this function will execute time zone shifting in addition to daylight savings time shifting. To use displayRef correctly, only associate it with time zone elements that have been stored in the base time zone. |
For input elements, all time entered is assumed to correspond with the daylight savings time schedule of the referenced time zone. If a time is entered that cannot be unambiguously translated to standard time, then the user will be required to provide a time zone label to indicate whether daylight savings time, or standard time, has been entered.
<html>
<body>
<table summary="" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Date time: </td>
<td><span oraField="dateTime" oraType="dateTime; stdTimeRef:timeZone;"></span></td>
</tr>
<tr>
<td>Date time: </td>
<td><input oraField="dateTime" oraType="dateTime; stdTimeRef:timeZone;"/></td>
</tr>
</table>
</body>
<xml>
<root>
<timeZone>US-EAST</timeZone>
<dateTime>2009-11-01-00.28.54</dateTime>
</root>
</xml>
</html>
HTML rendered.
HTML rendered for the following day.
Duration Formatting
Syntax |
---|
oraType="duration" |
This function is used to display time duration. For an input element, the value entered by the user is translated from minutes to hour and minutes as appropriate. For example, an entered value of '90', is converted to '00:01:30' when tabbing out of the input field.
<html>
<body>
<table summary="" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Duration: </td>
<td><span oraField="duration" oraType="duration"></span></td>
</tr>
<tr>
<td>Duration: </td>
<td><input oraField="duration" oraType="duration"/></td>
</tr>
</table>
</body>
<xml>
<root>
<duration>90</duration>
</root>
</xml>
</html>
HTML rendered.
Day in Month Formatting
Syntax |
---|
oraType="dayInMonth" |
This function is used to display a concatenated day and month.
<html>
<body>
<table summary="" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Day In Month: </td>
<td><span oraField="dayMonth" oraType="dayInMonth"></span></td>
</tr>
<tr>
<td>Day In Month: </td>
<td><input oraField="dayMonth" oraType="dayInMonth"/></td>
</tr>
</table>
</body>
<xml>
<root>
<dayMonth>0228</dayMonth>
</root>
</xml>
</html>
HTML rendered.
Month In Year Formatting
Syntax |
---|
oraType="monthInYear" |
This function is used to display a concatenated month and year.
<html>
<body>
<table summary="" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Month In Year: </td>
<td><span oraField="month" oraType="monthInYear"></span></td>
</tr>
<tr>
<td>Month In Year: </td>
<td><input oraField="month" oraType="monthInYear"/></td>
</tr>
</table>
</body>
<xml>
<root>
<month>200811</month>
</root>
</xml>
</html>
HTML rendered.
Monetary Formatting
This function is used to display a number as a monetary amount. See the table for configuration options with respect to the currency. For input elements, an error is issued if a non-numeric value is entered.
Syntax | Description |
---|---|
oraType="money: " | Directly specify a currency code after the colon. |
oraType="money;currencyRef: " | Reference an XPath (after the colon) for an element that references a currency code. |
oraType="money" | If no currency or currency reference is specified, the installation currency is used. |
<html>
<head>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Amount, currency specified:</td>
<td><span oraType="money:EUR" oraField="totalAmt"></span></td>
</tr>
<tr>
<td>Amount, default currency:</td>
<td><span oraType="money" oraField="totalAmt"></span></td>
</tr>
<tr>
<td>Amount, default input:</td>
<td><input oraType="money" oraField="totalAmt"/></td>
</tr>
<tr>
<td>Amount, currency reference:</td>
<td><input oraType="money;currencyRef:cur" oraField="totalAmt"/></td>
</tr>
</table>
</body>
<xml>
<root>
<totalAmt>50500.09</totalAmt>
<cur>EUR</cur>
</root>
</xml>
</html>
HTML rendered
Number Formatting
This function is used to display a number or validate an input value. For input elements, the system will return an error if a non-numeric value is entered.
Syntax |
---|
oraType="number" |
<html>
<head>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Count:</td>
<td><span oraType="number" oraField="count"></span></td>
</tr>
<tr>
<td>Count, input:</td>
<td><input oraType="number" oraField="count"/></td>
</tr>
</table>
</body>
<xml>
<root>
<count>989</count>
</root>
</xml>
</html>
HTML rendered.
FK Reference Formatting
By default, when an element with an fkRef oraType is displayed, an info string, context menu, navigation, and search are enabled (if the FK reference has been configured accordingly). Syntax is provided to allow you to selectively turn off any of these features.
Note that you can enable the foreign key hyperlink separately as well, refer to Embed Framework Navigation for more information. The various attributes used to control foreign key reference functionality are as follows. Note that in every case, the default value is true. A value of false should be used to disable the feature.
Syntax |
---|
oraType="fkRef:true|false; info:true|false; context:true|false; navigation:true|false; search:true|false" |
- fkRef. A value of 'true' enables all of the following foreign key reference processing. Use a value of 'false' to disable automatic FK Reference processing.
- info. A value of 'true' renders an information string on the UI map, if applicable.
- context. A value of 'true' renders a context menu to appear before the foreign key reference element, if applicable.
- navigation. A value of 'true' causes the information string to be rendered as a hyperlink, if applicable. Clicking the hyperlink navigates to the appropriate page.
- search. A value of 'true' displays a search icon that launches the search zone if applicable.
-
UI Map schema:
<schema> <bo fkRef="F1-BOMO"/> </schema>
-
UI Map HTML:
<html> <body> <table summary="" border="1" cellpadding="1" cellspacing="1"> <tr> <td>Business Object</td> <td><span oraField="bo" oraType="fkRef:true; info:true; context:true; navigation:true;"></span></td> </tr> </table> </body> <xml> <root> <bo>F1-COUNTRY</bo> </root> </xml> </html>
-
HTML rendered.
Lookup Formatting
This function is used to display the description of a lookup value.
Syntax | Valid Values |
---|---|
oraType="lookup: " | Lookup field name after the colon. |
<html>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Status:</td>
<td><span oraField="status" oraType="lookup:BATCH_JOB_STAT_FLG"></span></td>
</tr>
</table>
</body>
<xml>
<root>
<status>PD</status>
</root>
</xml>
</html>
HTML rendered.
Extendable Lookup Formatting
This function is used to display the description of an extendable lookup value.
Syntax | Valid Values |
---|---|
oraType="lookupBO: " | Business Object code name after the colon. |
<html>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Value:</td>
<td><span oraField="status" oraType="lookupBO:F1-DeviceDisplayTypes"></span></td>
</tr>
</table>
</body>
<xml>
<root>
<status>oraTablet</status>
</root>
</xml>
</html>
HTML rendered.
Characteristic Type Formatting
This function is used to display the description of a predefined characteristic value.
Syntax | Valid Values |
---|---|
oraType="charType: " | Characteristic Type code after the colon. |
<html>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Skill:</td>
<td><span oraType="charType:CM-SKILL" oraField="skill"></span></td>
</tr>
</table>
</body>
<xml>
<root>
<skill>10</skill>
</root>
</xml>
</html>
HTML rendered.
Control Table Formatting
This function is used to display the description of a control table that has an associated language table.
Syntax | Valid Values |
---|---|
oraType="table: " | Table code after the colon. |
<html>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Currency:</td>
<td><span oraType="table:CI_CURRENCY_CD" oraField="curr"></span></td>
</tr>
</table>
</body>
<xml>
<root>
<curr>USD</curr>
</root>
</xml>
</html>
HTML rendered.
Add / Remove Grid Formatting
Syntax | Description |
---|---|
oraType="addGridRow" |
The addGridRow function is used to build "insert row" dialog into the UI map.
|
oraType="deleteGridRow" |
The deleteGridRow function is used to build "delete row" dialog into the UI map.
|
Example:
<html>
<head>
<title>Demonstrate Grid Add and Grid Delete OraTypes</title>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body>
<table oraList="listEntry">
<thead>
<tr>
<th/>
<th/>
<th><span>Date</span></th>
<th><span>Amount</span></th>
</tr>
<tr/>
</thead>
<tr>
<td oraType="addGridRow"></td>
<td oraType="deleteGridRow"></td>
<td>
<input oraField="date" oraType="date"></input>
</td>
<td align="right">
<input oraField="amount" oraType="money"></input>
</td>
</tr>
</table>
</body>
<xml>
<root>
<listEntry>
<date>2008-01-01</date>
<amount>44.28</amount>
</listEntry>
<listEntry>
<date>2008-02-01</date>
<amount>32.87</amount>
</listEntry>
<listEntry>
<date>2008-03-01</date>
<amount>21.76</amount>
</listEntry>
</root>
</xml>
</html>
HTML rendered.
Unformatted Elements
This function is used to display the contents of an element that contains 'raw' data as defined for the schema element being rendered.
Syntax |
---|
oraType="raw" |
-
UI Map schema:
<schema> <rawStuff type="raw"/> </schema>
-
UI Map HTML:
<html> <head> <link rel="stylesheet" type="text/css" href="cisDisabled.css"/> <link rel="stylesheet" type="text/css" href="cisEnabled.css"/> </head> <body> <table summary="" border="1" cellpadding="1" cellspacing="1"> <tr> <td>Raw Stuff:</td> <td><span oraType="raw" oraField="rawStuff"></span></td> </tr> </table> </body> <xml> <root> <rawStuff> <ele1>text in element 1</ele1> <group1> <ele2>text inside element 2, group 1</ele2> <ele3>text inside element 3, group 1</ele3> </group1> </rawStuff> </root> </xml> </html>
HTML rendered.
String Formatting
This function is used to display the contents of an element, as XML pretty-print, when the element contains escaped XML.
Syntax |
---|
oraType="xmlString" |
Example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>XML Stuff:</td>
<td><span oraType="xmlString" oraField="xmlStuff"></span></td>
</tr>
</table>
</body>
<xml>
<root>
<xmlStuff>
<ele1>text in element 1</ele1>
<group1>
<ele2>text inside element 2, group 1</ele2>
<ele3>text inside element 3, group 1</ele3>
</group1>
</xmlStuff>
</root>
</xml>
</html>
HTML rendered.
HTML rendered without oraType=”xmlString”
HTML Formatting
This function is used to display the contents of an element as HTML as opposed to plain text. An element defined as oraType="fkref" is automatically rendered as HTML.
Syntax |
---|
oraType="html" |
To avoid execution of malicious HTML not all HTML tags are supported. The list of supported tags is defined in the "F1-HTMLWhiteList" managed content definition.
If unsupported HTML is detected the entire element is escaped and rendered as plain text. It is therefore recommended to properly escape any source string that contributes to the final HTML element if it is not expected to contain valid HTML. This way only the offending string is escaped and not the entire element.
If the HTML element is composed in scripting refer to the 'escape' function described in the Edit Data Syntax for more information. Use the WebStringUtilities.asHTML java API for escaping text composed in Java.
<html>
<head>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body>
<table summary="" border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Info :</td>
<td><span oraType="html" oraField="info"></span></td>
</tr>
</table>
</body>
<xml>
<root>
<info><b>text in bold</b></info>
</root>
</xml>
</html>
HTML rendered.
HTML rendered without oraType="html"
Display Labels
Derive Label from an Element
This attribute is used to obtain a language sensitive label for a <span>, <td>, or <input> HTML element.
Syntax | Valid Values |
---|---|
oraLabel=" " | XPath of an element in the UI map schema. The element must reference either the mapField=, mdField=, or label= attribute. |
-
UI Map schema:
<schema> <user mapField="USER_ID"/> <info type="group" mapXML="CLOB"> <city label="Metro Area"/> <age mdField="AGE_LBL"/> </info> </schema>
-
HTML:
<html> <head><title oraMdLabel="BUS_LBL"></title></head> <body> <table> <tr> <td oraLabel="user"></td> <td><input oraField="user"/></td> </tr> <tr> <td oraLabel="info/city"></td> <td><input oraField="info/city"/></td> </tr> <tr> <td oraLabel="info/age"></td> <td><input oraField="info/age"/></td> </tr> <tr> <td/> <td><input type="button" oraMdLabel="ACCEPT_LBL"/></td> </tr> </table> </body> <xml> <root> <user>RWINSTON</user> <info> <city>Alameda</city> <age>32</age> </info> </root> </xml> </html>
HTML rendered:
Deriving Label from a Field
This attribute is used to obtain a language sensitive label for a <span>, <td>, <input>, or <title> HTML element. The label text is derived from the field referenced.
Syntax | Valid Values |
---|---|
oraMdLabel=" " | MD Field code. |
-
HTML:
<html> <head><title oraMdLabel="F1_DETAILS_LBL"></title></head> <body> <table> <tr> <td oraLabel="user"></td> <td><input oraField="user"/></td> </tr> <tr> <td oraLabel="info/city"></td> <td><input oraField="info/city"/></td> </tr> <tr> <td oraLabel="info/age"></td> <td><input oraField="info/age"/></td> </tr> <tr> <td/> <td><input type="button" oraMdLabel="ACCEPT_LBL"/></td> </tr> </table> </body> <xml> <root> <user>RWINSTON</user> <info> <city>Alameda</city> <age>32</age> </info> </root> </xml> </html>
HTML rendered:
Enable UI Map Help
The Display Labels section describes ways to derive the label for an element using an underlying MD Field. In addition, if the same MD field contains help text, the system will automatically generate a tool tip adjacent to the element label. Clicking the tool tip allows the user to view the help text.
It is possible to change the rendering of the tool tip. Refer to Custom Look And Feel Options for more information
Search Using a Pop-Up Explorer Zone
Search Option
This attribute is used to enable search zone functionality for input HTML elements.
Syntax | Valid Values |
---|---|
oraSearch=" " | Zone code. |
-
Example of defining the search in the HTML. UI Map's Schema:
<schema> <uiMap/> </schema>
UI Map's HTML
<html> <body> <table summary="" border="1" cellpadding="1" cellspacing="1"> <tr> <td>UI Map with Search </td> <td><input oraField="uiMap" oraSearch="F1-UISRCH"></td> </tr> </table> </body> <xml> <root> <uiMap/> </root> </xml> </html>
-
Example of defining the search in the schema. UI Map's Schema:
<schema> <uiMap search="F1-UISRCH"/> </schema>
UI Map's HTML
<html> <body> <table summary="" border="1" cellpadding="1" cellspacing="1"> <tr> <td>UI Map with Search </td> <td><input oraField="uiMap"></td> </tr> </table> </body> <xml> <root> <uiMap/> </root> </xml> </html>
-
Example where the FK reference defines the search zone. UI Map's Schema:
<schema> <uiMap fkRef="F1-UISRC"/> </schema>
UI Map's HTML
<html> <body> <table summary="" border="1" cellpadding="1" cellspacing="1"> <tr> <td>UI Map with Search </td> <td><input oraField="uiMap"></td> </tr> </table> </body> <xml> <root> <uiMap/> </root> </xml> </html>
In all cases, the HTML rendered is the same.
Initializing Search Fields
This optional attribute is used to initialize search zone filters. Multiple filters may be initialized. This attribute can only be used in conjunction with the oraSearch attribute.
Syntax | Valid Values | Field Value Options | Comments |
---|---|---|---|
oraSearchField=" " |
One or more pairs of field name and field value separated by colon. Each pair is separated by a semi-colon. oraSearchField="fieldName:fieldValue: ..."The field name is used to identify the zone filter to initialize when the search is launched. The field name must match the value of the searchField mnemonic specified on a search zone user filter or hidden filter parameter. |
No value | If you do not specify a field value, then the value of the input element containing the oraSearchField attribute will be used. |
XPath | Indicate the XPath to the schema element that contains the value to use. | ||
'literal' | Indicate a literal value to supply. |
Two filter values are initialized as shown in the following example:
<schema>
<bo/>
<uiMap/>
</schema>
<html>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>UI Map with Search </td>
<td><input oraField="uiMap" oraSearch="F1-UISRCH" oraSearchField="MAP_CD; BUS_OBJ_CD:bo;"></td>
</tr>
</table>
</body>
<xml>
<root>
<bo/>
<uiMap/>
</root>
</xml>
</html>
Mapping Returned Search Fields
This optional attribute is used to direct values returned by the search zone. Multiple fields may be specified. This attribute can only be used in conjunction with the oraSearch attribute.
Syntax | Valid Values | Field Value Options | Comments |
---|---|---|---|
oraSearchOut=" " |
One or more pairs of field name and field value separated by colon. Each pair is separated by a semi-colon. oraSearchOut="field name:xpath target; ..."The field name is used to identify the search result returned from the query zone. The field name must match the ELEMENT_NAME mnemonic defined within the explorer zone's search results parameter. |
No value | If you do not specify a field value, then the input element containing the oraSearchField attribute receives the returned value. |
XPath | Indicate the XPath to the schema element that should receive the returned value. |
Two values are returned in the following example:
<schema>
<bo/>
<mo/>
</schema>
<html>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>BO Search </td>
<td><input oraField="bo" oraSearch="Z1-BOSRCH" oraSearchOut="BUS_OBJ_CD; MO_CD:mo;"></td>
</tr>
</table>
</body>
<xml>
<root>
<bo/>
<mo/>
</root>
</xml>
</html>
Display Errors
Display Error Variables
One of the following error variables may be displayed.
Syntax |
---|
oraErrorVar="ERRMSG-TEXT" |
oraErrorVar="ERRMSG-LONG" |
oraErrorVar="ERRMSG-CATEGORY" |
oraErrorVar="ERRMSG-NUMBER" |
...
<table width="100%" cellpadding="12">
<tr class="oraErrorText">
<td>
<a href="" onclick="oraShowErrorAlert(); return false;">
<span class="oraErrorText" oraErrorVar="ERRMSG-TEXT"></span>
</a>
</td>
</tr>
</table>
...
HTML rendered
Highlight a Field in Error
Syntax | Comments |
---|---|
oraError="automate:true|false; prefix: " | Specifying automate:true automatically enables highlighting of the element in error when issuing an error. Note that true is the default and doesn’t need to be specified. Specify automate:false to turn off field highlighting. |
The system uses a match on the element name referenced in the error to the element names in the UI map. If the elements in the schema are within an XPath that may not match what is referenced by the error, use prefix:XPath to specify that. |
The following HTML example shows that the elements in the map are defined within a group called boGroup. The element name returned by the error will not include this group so in order for the field highlighting to work properly the prefix: attribute must indicate the group name.
<html>
<head>
<title>User Zone Input</title>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body oraError="automate:true; prefix:boGroup">
<table width="100%" cellpadding="12">
<tr class="oraErrorText">
<td>
<a href="" onclick="oraShowErrorAlert(); return false;">
<span class="oraErrorText" oraErrorVar="ERRMSG-TEXT"></span>
</a>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="4">
<tr style="padding-top:30px;">
<td align="right" class="label">User Id</td>
<td>
<span oraField="boGroup/userId" class="normal"/>
</td>
</tr>
<tr>
<td align="right" class="label">First Name</td>
<td>
<input oraField="boGroup/firstName" class="normal"/>
</td>
</tr>
<tr>
<td align="right" class="label">Last Name</td>
<td>
<input oraField="boGroup/lastName" class="normal"/>
</td>
</tr>
</table>
</body>
<xml>
<root>
<boGroup>
<userId>BOND007</userId>
<firstName>James</firstName>
<lastName></lastName>
</boGroup>
</root>
</xml>
</html>
HTML rendered, where the error element thrown is equal to 'lastName':
Overriding the Error Element Name
In the rare occasion where the element name returned by the error doesn't match the element name in the map, you can add an explicit attribute to indicate the error element name.
Syntax | Valid Values | Comments |
---|---|---|
oraErrorElement= | "element name" | The element name referenced here must exactly match the name of the error element assigned when the error was thrown. More than one HTML field can be referenced by the same error element name. |
This illustrates a scenario where the element name associated with the error differs from the element name on the map.
<html>
<head>
<title>User Zone Input</title>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body>
<table width="100%" cellpadding="12">
<tr class="oraErrorText">
<td>
<a href="" onclick="oraShowErrorAlert(); return false;">
<span class="oraErrorText" oraErrorVar="ERRMSG-TEXT"></span>
</a>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="4">
<tr style="padding-top:30px;">
<td align="right" class="label">User Id</td>
<td>
<span oraField="userId" class="normal"/>
</td>
</tr>
<tr>
<td align="right" class="label">First Name</td>
<td>
<input oraField="firstName" class="normal" oraErrorElement="firstName"/>
</td>
</tr>
<tr>
<td align="right" class="label">Last Name</td>
<td>
<input oraField="familyName" class="normal" oraErrorElement="lastName"/>
</td>
</tr>
</table>
</body>
<xml>
<root>
<userId>BOND007</userId>
<firstName>James</firstName>
<familyName></familyName>
</root>
</xml>
</html>
HTML rendered.
Display Error Pop-Up
When the error text is displayed, this function may be used to pop-up the standard error dialog (which displays more information) when a user clicks the error message.
Syntax |
---|
oraShowErrorAlert(); return false; |
<html>
<head>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body>
<table width="100%" cellpadding="12">
<tr class="oraErrorText">
<td>
<a href="" onclick="oraShowErrorAlert(); return false;">
<span class="oraErrorText" oraErrorVar="ERRMSG-TEXT"></span>
</a>
</td>
</tr>
</table>
<table>
<tr>
<td >Address:</td>
<td><input type="text" oraField="address"/></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" oraField="city"/></td>
</tr>
<tr>
<td>State:</td>
<td><input type="text" oraField="state"/></td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text" oraField="zip"/></td>
</tr>
<tr>
<td/>
<td style="padding-top=15px;">
<oraInclude map="F1-SaveCancelButtons"/>
</td>
</tr>
</table>
</body>
<xml>
<root>
<address>123 Main St</address>
<city>Alameda</city>
<state>CA</state>
<zip>94770</zip>
</root>
</xml>
</html>
HTML rendered.
Standard error pop-up dialog launched via click on error message:
Fire JavaScript for Browser Events
Working with the JavaScript Framework
There are many JavaScript events that can be used within the HTML/Javascript environment. These include events such as onLoad, onBlur, onChange, etc. The UI Map Framework also makes use of some of these events. It is important that any UI Map you develop works with the framework in order to obtain consistent results (events may not always be executed in the same order at all times!).
The following describes the recommended approach for safely handling loading and processing field updates in your UI Maps.
If JavaScript is required
within an XHTML UI Map or fragment, it will be necessary to bound
it within a ![CDATA[ ]]
tag to ensure a valid XML document. Note
that the tags themselves may need to be commented out to promote compatibility
with older browsers. For example:
<script type="text/javascript">
/* <![CDATA[ */
//
// javascript
//
/* ]]> */
</script>
Element Change Event
Syntax | Valid Values |
---|---|
oraChange=" " | A JavaScript function. |
At the time of UI Map load, if there is an event handler already attached to an HTML element, the framework removes it and attaches a combined event handler. The combined handler calls any framework handler first and then calls the other (custom) handlers.
In the following example the oraInvokeBS function is executed when the button is clicked.
<html>
<head>
<title>oraInvokeBS test</title>
</head>
<body>
<table>
<tr>
<td>User Id:</td>
<td>
<input oraField= "xmlGroup/userId"/>
<input type="button" value="Search" oraChange="oraInvokeBS('UserSearch','xmlGroup');"/>
</td>
</tr>
<tr>
<td/>
<td>Search Results</td>
</tr>
<tr>
<td/>
<td>
<table oraList="xmlGroup/searchList">
<tr>
<td><span oraField="userId"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<xml>
<root>
<xmlGroup>
<userId/>
<searchList>
<userId></userId>
</searchList>
</xmlGroup>
</root>
</xml>
</html>
Page Load Event
Syntax | Valid Values |
---|---|
oraLoad=" " | A JavaScript function. |
-
In the following example, the oraDisplayNone function is executed during page load:
<html> <body> <table summary="" border="1" cellpadding="1" cellspacing="1"> <tr> <td oraLoad="oraDisplayNone(item,'userId','')">User Id: </td> <td><span oraField="userId"></span></td> </tr> </table> </body> <xml> <root> <userId>SPLAXT</userId> </root> </xml> </html>
-
HTML rendered
After Page Load Event
Syntax | Valid Values |
---|---|
oraAfterLoad="" | A JavaScript function. |
In the following example the oraGetValueFromScript function is executed after page load.
<div>
<label for="boGroup_parameters_externalSystem" oraLabel="boGroup/parameters/externalSystem">
</label>
<span>
<select oraSelect="bs:F1-RetrieveExternalSystems" class="oraInput"
id="boGroup_parameters_externalSystem" oraField="boGroup/parameters/externalSystem"
oraSelectOut="valuePath:results/externalSystem; descPath:results/description"
oraSelectIn="outboundMsgType:boGroup/parameters/outboundMsgType"
oraAfterLoad
="oraGetValueFromScript(document.getElementById('boGroup_parameters_externalSystem');">
</select>
</span>
</div>
Hide Elements
Hide Using a Function
The system provides multiple techniques for hiding an HTML element.
Syntax | Valid Values | Comments |
---|---|---|
oraDisplayNone(item ); | (item, 'XPath', 'value', 'operator') | Used to hide an element based on the value of another element (referenced using its XPath). Enter a value of ' ' to interrogate a blank value. By default the operator is '='. This may be set instead to another operator such as '!=', '>', or '<'. |
(item, function name,true | false) | Used to indicate a JavaScript function, which must return a Boolean. | |
oraIsSuppress="true" | Use this option for fields that need to be hidden always and not dependent on something else. Set this attribute on the HTML element (div element). |
-
Example where the User Id label is hidden when no User Id value exists.
<html> <body> <table summary="" border="1" cellpadding="1" cellspacing="1"> <tr> <td oraLoad="oraDisplayNone(item,'userId','')">User Id: </td> <td><span oraField="userId"></span></td> </tr> </table> </body> <xml> <root> <userId></userId> </root> </xml> </html>
-
Example where the Save button is hidden when the user does not have security access to the action of change ('C') for the application service 'F1-DFLTS'.
<html> <body> <table summary="" border="1" cellpadding="1" cellspacing="1"> <tr> <td oraLoad="oraDisplayNone(item, oraHasSecurity('F1-DFLTS', 'C'), false );"> <input name="Save" type="button" onclick="oraInvokeBO('CM-IndividualTaxpayer', null, 'replace')"/> </td> </tr> </table> </body> <xml> <root> <userId></userId> </root> </xml> </html>
Check User's Security Access
The system provides two functions to check a user's security access to a given application service and access mode. These are commonly used for hiding elements.
Syntax | Parameters |
---|---|
oraHasSecurity( ) | 'Application Service code' |
'Access Mode' | |
oraHasSecurityPath('x','y') | 'Application Service XPath' |
'Access Mode XPath' |
See the previous section for an example of the oraHasSecurity function. The following shows an example where the status button is hidden when the user does not have security access to the access mode 'ACT' of the application service 'FORMTST'.
<html>
<body>
<table>
<tr>
<td oraLoad="oraDisplayNone(item, oraHasSecurityPath('appService', 'accessMode'), false );">
<input oraField="statusLabel" type="button" onclick="oraRunScript('UpdateState','status');"/>
</td>
</tr>
</table>
</body>
<xml>
<root>
<status>ACTIVATE</status>
<statusLabel>Activate</statusLabel>
<appService>FORMTST</appService>
<accessMode>ACT</accessMode>
</root>
</xml>
</html>
Invoke Schema Based Services
The system provides functions for invoking a business object, business service or service script.
Invoke BO Function
This function is used to perform a BO interaction directly from the UI map's HTML. It returns a 'true' or a 'false' depending on whether the invocation encounters an error.
Syntax | Parameters | Comments |
---|---|---|
oraInvokeBO( ) | 'BO Name' | |
'XPath' or null | Identifies a group element via XPath. If you specify the word null, then the entire embedded XML object will be passed. | |
'action' | Indicate the action to use. Valid values are add, delete, read, update, replace, fastAdd and fastUpdate. Fastpath: Refer to BO Actions for more information about
the various BO actions.
|
Example with the statement invoked in a JavaScript function.
function invokeBO {
if (!oraInvokeBO('F1-User','xmlGroup','read')) {
oraShowErrorAlert();
return;
}
}
Example with the statement invoked within onClick.
<input type="button" class="oraButton" oraMdLabel="DISPLAY_LBL" onClick="oraInvokeBO('F1-User');"/>
Invoke BS Function
This function is used to perform a business service interaction directly from the UI map's HTML. It returns a 'true' or a 'false' depending on whether the invocation encounters an error.
Syntax | Parameters | Comments |
---|---|---|
oraInvokeBS( ) | 'BS Name' | |
'XPath' or null | Identifies a group element via XPath. If you specify the word null, then the entire embedded XML object will be passed. |
Example with the statement coded within a JavaScript function.
function invokeBS {
if (!oraInvokeBS('F1-UserSearch','xmlGroup')) {
oraShowErrorAlert();
return;
}
}
Example with the statement invoked via onClick.
<input type="button" class="oraButton" oraMdLabel="DISPLAY_LBL" onClick="oraInvokeBS('F1-RetrieveInfo');"/>
Invoke SS Function
This function is used to perform a service script interaction directly from the UI map's HTML. It returns a 'true' or a 'false' depending on whether the invocation encounters an error.
Syntax | Parameters | Comments |
---|---|---|
oraInvokeSS( ) | 'Service Script Name' | |
'XPath' or null | Identifies a group element via XPath. If you specify the
word null, then the
document belonging to the parent node will be passed. If the parent
node is not enough, then the entire document can always be passed
using the following syntax:
|
Example with the statement invoked within a JavaScript function:
function invokeSS {
if (!oraInvokeSS('F1-GetUsers','xmlGroup')) {
oraShowErrorAlert();
return;
}
}
Example with the statement invoked within onClick.
<input type="button" class="oraButton" oraMdLabel="DISPLAY_LBL" onClick="oraInvokeSS('F1-GetUserInfo');"/>
Refresh a Rendered Map or Portal Page
Refresh Map
This function is used to 'Refresh' only the map zone issuing the command.
Syntax |
---|
oraRefreshMap; |
...
<tr>
<td/>
<td><input type="button" onclick="oraRefreshMap();" value="Refresh"/></td>
</tr>
...
Refresh Page
This function is used to refresh all zones in the portal.
Syntax |
---|
oraRefreshPage; |
...
<tr>
<td/>
<td><input type="button" onclick="oraRefreshPage();" value="Refresh"/></td>
</tr>
...
Launch BPA Script
Launch BPA Script
Syntax | Parameters | Comments |
---|---|---|
oraRunScript( ); | 'BPA script code'. | |
'XPath Element' | One or more element values may be passed into the BPA where it may be referenced as temporary variables. |
In the following example, a temporary variable named 'personId' is created with value '1234567890' and the BPA script named 'Edit Address' is launched.
<html>
<body>
<table>
<tr>
<td>
<div oraField="address"></div>
<span oraField="city"></span>
<span>,</span>
<span oraField="state"></span>
<span oraField="zip"></span>
<span oraField="country"></span>
<a href="" onClick="oraRunScript('Edit Address','personId');">edit</a>
</td>
</tr>
</table>
</body>
<xml>
<root>
<personId>1234567890</personId>
<address>123 Main St</address>
<city>Alameda</city>
<state>CA</state>
<zip>94770</zip>
</root>
</xml>
</html>
HTML rendered.
Launch BPA Script With Values
This function is used to launch a BPA, providing name/value pairs to push into temporary storage. Multiple values can be passed. The BPA script can then reference the temporary variables by name.
Syntax | Parameters | Comments |
---|---|---|
oraRunScriptWithValues( ); | 'BPA script code'. | |
'XPath Element Name':value | One or more pairs of element names and values. |
In the example below, a JavaScript function named 'editUser()' is responsible for launching the BPA script named 'UserEdit'. The temporary variable named 'userId' will be created with value 'CMURRAY'.
<html>
<head>
<script type="text/javascript">
function editUser() {
var values = {'userId': 'CMURRAY'};
oraRunScriptWithValues('UserEdit', values);
return;
}
</script>
</head>
<body>
...
</body>
</html>
Exit UI Map with Bound Values
This function is used to exit a UI Map. When you quit the map you can specify a value to return to the script and, in addition, whether to return updated XML.
Syntax | Parameters | Comments |
---|---|---|
oraSubmitMap( ); | 'Return Value' | |
Boolean value | Indicates if the updated XML should be returned. Default is true. |
In the following example, the Save button will return updated information, the Cancel button will not.
<html>
<body>
<table>
<tr>
<td/>
<td style="padding-bottom:15px;">
<a href="" onclick="oraShowErrorAlert(); return false;">
<span oraErrorVar="ERRMSG-TEXT"></span></a>
</td>
</tr>
<tr>
<td >Address:</td>
<td><input type="text" oraField="address"/></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" oraField="city"/></td>
</tr>
<tr>
<td>State:</td>
<td><input type="text" oraField="state"/></td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text" oraField="zip"/></td>
</tr>
<tr>
<td/>
<td style="padding-top=15px;">
<input type="button" value="Save" onClick="oraSubmitMap('SAVE');"/>
<input type="button" value="Cancel" onClick="oraSubmitMap('CANCEL',false);"/>
</td>
</tr>
</table>
</body>
<xml>
<root>
<address>123 Main St</address>
<city>Alameda</city>
<state>CA</state>
<zip>94770</zip>
</root>
</xml>
</html>
Save and Cancel buttons rendered:
Include a Map Fragment
This function is used to embed a map fragment within another UI map. Note that it is possible to use the include node within a map or a map fragment.
Syntax | Parameters | Comments |
---|---|---|
<oraInclude map=' ' prefixPath=' '/> | map='UI Map Code' | |
prefixPath='Xpath' | Optionally specify an xpath prefix to be appended onto every
included oraField, oraLabel, oraList, oraSelect valuePath and descPath,
oraDownloadData, and oraUploadData attribute value defined within
the included UI map fragment's HTML. Note: This functionality only
applies to XPath attribute values when those values do not appear
beneath an oraList attribute. Any XPath value within a table containing
an oraList attribute will not be affected by a prefixPath.
|
-
An example of a map fragment with two buttons, named 'F1-SaveCancelButtons'.
<input onClick ="oraSubmitMap('SAVE');" oraMdLabel="SAVE_BTN_LBL" class="oraButton" type="button"/> <input onClick ="oraSubmitMap('CANCEL',false);" oraMdLabel="CANCEL_LBL" class="oraButton" type="button"/>
-
An example of a map that includes the map fragment named 'F1-SaveCancelButtons'.
... <tr> <td colspan="2" align="center"> <oraInclude map="F1-SaveCancelButtons"/> </td> </tr> ...
Include a Web Component
A web component is a custom HTML element that produces a specific user interface feature. Each supported web component typically has one or more defined HTML attributes that affect how the web component functions and how it appears. The more complex web components may have a corresponding system configuration object that defines the behavior and information displayed by the resulting user interface element. For example the web component that produces a "tree" of information has a Tree configuration table, which defines the details about how to retrieve information for the tree and how to display each node.
Common Attributes
Some common attributes that may be used for each web component are:
-
A reference to the specific instance of the configuration object that governs the details to produce.
-
The ability to pass in context data as name and value pairs.
-
A 'mode' that support showing a preview of the feature
-
Literal value. The value can be referenced directly. Example:
treename="F1-Tree"
-
XPath Reference. XPath references must use the explicit syntax x[value]. Example:
treename="x[migrationTree]"
-
Global or Portal context reference. These references must use the explicit syntax c[value].
treename="c[TREE_NAME]"
-
Field label reference. These references must use the explicit syntax md[value] .
text=md[F1_ADD_LBL]"
-
Field help text reference. These references must use the explicit syntax mdh[value] .
text=mdh[F1_OPERATIONS_LBL]"
For complex attributes that support one or more name / value pairs, the syntax for defining the names and values follows the same rules as above for literal values, XPath references and context. Colons (":") should be used to separate the name from the value and semi-colons (";") separate each pair.
context="FIELD_NAME1:x[value1];FIELD_NAME2:F1AB;x[fieldName3]:c[FIELD_NAME3];"
A given web component may have additional HTML attributes specific to its functionality.
<body>
<oraInclude map="F1-OJETLIBSR"/>
..
</body>
The following sections describe each supported web component.
Trees
Refer to Trees for more information about tree configuration.
Syntax | Parameters | Comments |
---|---|---|
<ou-tree...></ou-tree> | treename="singleValue" | You must supply a reference to the name of the tree object that defines the configuration of the tree to display. This attribute expects a single value that follows the syntax described in the single value section above. |
context="..." | Optionally pass in one or more name / value pairs. The syntax follows the example shown in the complex attributes information above. |
The following example uses an explicit reference to a tree and does not pass any context. The particular tree relies on global context, which the tree node algorithm has access to.
<ou-tree treename="C1-PremiseTree"></ou-tree>
Contextual Insight
Refer to Contextual Insights for information about the configuration related to defining contextual insights.
Syntax | Parameters | Comments |
---|---|---|
<ou-insights ...></ou-insights> | insightType="singleValue" | Use this attribute to specify an insight type to display. Either this attribute or the insight class attribute must be supplied. This attribute expects a single value that follows the syntax described in the single value section above. |
insightClass="singleValue" | Use an insight class to display all the insight types for the insight group related to this class. This attribute expects a single value that follows the syntax described in the single value section above. | |
context="..." | Optionally pass in one or more name / value pairs. The syntax follows the example shown in the complex attributes information above. | |
mode="preview" | Optionally pass in a mode of preview to indicate to the underlying insight algorithm that prepares the data that the insight is being called in preview mode, with no context available. Ideally the algorithm returns sample information. | |
class=" " | Optionally provide a CSS helper class to control aspects of
the rendered insight. Supported values: class="card-full-width" - Applicable for card insights. Use this option class to ensure that the width for a card insight adjusts to the width of the zone that contains it. Card insights that don't set this parameter use a fixed width. |
The following example is from the insight preview map where the insight type is the one in context. No context data is needed and the mode is 'preview'.
<ou-insights insightType="x[insightType]" mode="preview"></ou-insights>
The following example uses an insight class and passes in context values from XPath elements with explicitly defined context names.
<ou-insights insightClass="C1CI" context="PER_ID:x[personId];ACCT_ID:x[accountId];PREM_ID:x[premiseId];"></ou-insights>
Button
The button web component provides support for the standard set of button formats used within the system.
Syntax | Parameters | Comments |
---|---|---|
<ou-button...></ou-button> | type=”singleValue” | You must define the type of button to display. This attribute
expects a single value that follows the syntax described in the single
value section above. The valid type values are:
If no type attribute is supplied, a ‘broken button’ image will be displayed. |
img=”singleValue” | Define the path of the image to display. Either this attribute
or the image reference attribute must be supplied for a button type
that includes an image. This attribute expects a single value that
follows the syntax described in the single value section above. Note that for SVG images, if the reference includes only the SVG file name with no path, the path is assumed to be the Framework SVG repository. |
|
imgRef=”singleValue” | Define the display icon reference of the image to be used. Either this attribute or the image attribute must be supplied for a button type that includes an image. This attribute expects a single value that follows the syntax described in the single value section above. | |
text="..." | Define the various text elements needed by the button. The
syntax follows the example shown in the complex attributes information
above. The valid text element name values are:
|
|
menu=”singleValue” | Define the menu to be used with the button. This attribute must be supplied for a button type that includes a menu control. This attribute expects a single value that follows the syntax described in the single value section above. | |
disabled=”singleValue” | This is a standard HTML attribute. A value of "true" or just the presence of the text "disabled" will result in an initially disabled button. | |
security="..." | Optionally define the security settings for the button. The
button will be hidden if the user does not have the appropriate security
access. The syntax follows the example shown in the complex attributes
information above. The valid security element name values are:
|
|
clickAction="..." | Optionally define the action to be taken when the button is
‘clicked’. The syntax follows the example shown in the complex attributes
information above. There are specific ‘name’ values for the attribute
as follows:
The attribute may also include other name/value pairs that define information to be passed into the script or used as navigation context fields. In addition to the security attribute settings, the system will check that the user has access to the script or navigation path before performing the action. The standard HTML ‘onClick’ attribute may still be used. if the HTML includes an ‘onClick’attribute as well as the ‘clickAction’, the ‘onClick’ attribute will take precedence |
The following is an example of a simple button with text.
<ou-button type="text" text="label:md[F1_BOOKMARK_LBL];"></ou-button>
The following is an example of an icon button using a display icon reference.
<ou-button type="image" imgRef="F1CMNT"></ou-button>
The following is an example of an image menu button.
<ou-button type="imageMenu" imgRef="F1STTGS" menu="CI_CONTEXTSCRIPT" text="tooltip:md[F1INSTY_VIS_LBL];></ou-button>
The following is an example of text button that navigates to another page.
<ou-button type="text" text="label:md[ALG_CD];tooltip:md[GOTO_ALG]" clickAction="action:NAVIGATE; navopt:f1algqTabMenu; ALG_CD:x[algorithm];></ou-button>
Show Schema Default on Add
Default values within in the UI map's schema will be displayed on a UI map's input fields if an embedded <action> node has a value of 'ADD' or blank.
Syntax |
---|
<action>ADD</action> |
<action> </action> |
The schema default for the <description> element will be displayed:
<schema>
<action/>
<boGroup type="group">
<key/>
<description default="enter description here"/>
</boGroup>
</schema>
<html>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Description </td>
<td><input oraField="boGroup/description"></td>
</tr>
</table>
</body>
<xml>
<root>
<action>ADD</action>
<boGroup>
<key/>
<description/>
</boGroup>
</root>
</xml>
</html>
HTML rendered.
Configure a Chart
In addition to integrating charts with zones, the system supports using the same attributes within the UI Map HTML to configure a graphical representation of an XML list. The designer can control the type, size, position, and contents of the chart using these attributes. For details of the attributes and syntax, refer to Data Explorer Graph Configuration.
Graph Examples
-
Sample of a pie chart configuration:
<html> <head> <title>Pie Chart</title> </head> <body> <div style="width:100%; height:290px;" oraChart="type:pie;" oraChartSeries1="list:set; labelPath:date; amount:amount; " oraChartBroadcast="BILL_ID:billId;"> </div> </body> <xml> <root> <set> <date>05-02-2003</date> <amount>163.24</amount> <billId>592211649441</billId> </set> <set> <date>06-02-2003</date> <amount>97.29</amount> <billId>592211649442</billId> </set> <set> <date>07-02-2003</date> <amount>54.38</amount> <billId>592211649443</billId> </set> </root> </xml> </html>
-
A pie chart rendered for a single series:
-
Sample of a line, cluster, or stacked graph configuration - each with two series:
<html> <head> <title>Stacked Chart</title> </head> <body> <div style="width:100%; height=300px;" oraChart="type:line;" oraChartSeries1="list:set; xaxis:date; label:Charge; amount:amount; " oraChartSeries2="list:set; xaxis:date; label:Balance; amount:balance; " oraChartBroadcast="BILL_ID:billId;"> </div> <div style="width:100%; height=300px;" oraChart="type:cluster;" oraChartSeries1="list:set; xaxis:date; label:Charge; amount:amount; " oraChartSeries2="list:set; xaxis:date; label:Balance; amount:balance; " oraChartBroadcast="BILL_ID:billId;"> </div> <div style="width:100%; height=300px;" oraChart="type:stacked;" oraChartSeries1="list:set; xaxis:date; label:Charge; amount:amount; " oraChartSeries2="list:set; xaxis:date; label:Balance; amount:balance; " oraChartBroadcast="BILL_ID:billId;"> </div> </body> <xml> <root> <set> <date>05-02-2003</date> <amount>163.24</amount> <balance>163.24</balance> <billId>592211649441</billId> </set> <set> <date>06-02-2003</date> <amount>97.29</amount> <balance>260.53</balance> <billId>592211649442</billId> </set> <set> <date>07-02-2003</date> <amount>54.38</amount> <balance>314.91</balance> <billId>592211649443</billId> </set> </root> </xml> </html>
-
Three types of chart rendered for two series each: line, cluster, and stacked.
Upload and Download a CSV File
The following HTML attributes can be used to manage both an upload and a download between a list defined within the map's schema and a CSV (comma separated value) file. Note that this technique is only recommended for a small to medium volume of data, for example no more than several hundred rows. For higher volumes, it is recommended to use batch upload / download functionality instead.
The syntax is oraUploadData="type:embed;path:list xpath;useLabels:true;showCount:true"
Upload configuration requires you to name a CSV file to be uploaded, and an XML list as target. By convention, each CSV row will create a separate list instance. Each comma-separated field in the file will be uploaded as a separate element in the list. To embed an upload dialog within a map, the oraUploadData attribute must be associated with a container element such as a div, td, or span.
The optional useLabels:true value indicates that while parsing the upload CSV file, the headers are expected to be labels
Specifying the optional showCount:true value will display the number of records uploaded.
Sample of oraUploadData="embed" within a div element.
<html>
<head>
<title>File Upload</title>
</head>
<body>
<div oraUploadData="type:embed;path:myList"> </div>
</body>
<xml>
<root>
<myList>
<id>838383930</id>
<name>Janice Smith</name>
</myList>
<myList>
<id>737773730</id>
<name>Bill McCollum</name>
</myList>
</root>
</xml>
</html>
This file upload dialog will be embedded into the body of the page where the oraUploadData is defined.
oraUploadData="type:popup;path:list xpath;useLabels:true;showOk:true;showCount:true"
Upload configuration requires you to name a CSV file to be uploaded, and an XML list as target. By convention, each CSV row will create a separate list instance. Each comma-separated field in the file will be uploaded as a separate element in the list. To upload a CSV file using a pop-up dialog, the oraUploadData attribute must be associated with an input element such as a button, text link, or image.
The optional useLabels:true value is used to indicate that while parsing the upload CSV file, the headers are expected to be labels
Specifying the optional showOk:true value will display an "Ok" button once the upload finishes. The popup will stay open until the button is pressed. Additionally, specifying the showCount:true value will display number of records uploaded.
Sample of oraUploadData="popup" associated with a button:
<html>
<head>
<title>File Upload</title>
</head>
<body>
<input type="button" name="submitButton" oraUploadData="type:popup;path:myList;" value='Get Data'>
<table oraList="myList">
<tr/>
<tr>
<td><span oraField="id"/></td>
<td><span oraField="name"/></td>
</tr>
</table>
</body>
<xml>
<root>
<myList>
<id>838383930</id>
<name>Janice Smith</name>
</myList>
<myList>
<id>737773730</id>
<name>Bill McCollum</name>
</myList>
</root>
</xml>
</html>
HTML Rendered:
Pressing the "Get Data" button will launch a standard file upload dialogue (provided by Framework) as shown below.
oraDownloadData="list xpath"
Download configuration requires you to name an XML list to be downloaded. By convention, each list instance will represent a separate row in the created file. By default every element of the list will be comma separated in the file.
Sample of oraDownloadData.
<html>
<head>
<title>File Download</title></head>
<body>
<input type="button" name="downloadButton" oraDownloadData="myList" value="Download"/>
</body>
<xml>
<root>
<myList>
<id>881-990987</id>
<name>John Mayweather</name>
</myList>
<myList>
<id>229-765467</id>
<name>Anna Mayweather</name>
</myList>
<myList>
<id>943-890432</id>
<name>Andrew Brewster</name>
</myList>
</root>
</xml>
</html>
HTML Rendered:
Pressing the "Download" button will launch a standard file download dialogue (provided by Framework) as shown below.
A successful download will result in a CSV file:
To download data from a sub list use the attribute oraDownloadDataInList instead of oraDownloadData. The attribute oraDownloadDataInList will have the sub list name. The XPath of the sub list is used to pick data of the specific row from the parent list. Thus only the specific sub list is downloaded.
oraDownloadDataUseLabels="true"
The oraDownloadDataUseLabels attribute can be used in conjunction with the oraDownloadData attribute described above. Specify oraDownloadDataUseLabels if you want the generated CSV file to use the element labels for columns headers rather than element names.
Construct Portal Zone Map Fragments
Portal zones can reference a UI map for the zone header and filter area. This UI map is not a complete HTML document, but is instead configured as a UI Map fragment. When constructing a zone map fragment you can reference the following substitution variables. Note that these variables will be dynamically populated at run time with information particular to the map's zone within the portal:
Variable | Replacement Logic |
---|---|
[$ZONEDESCRIPTION] | Zone's description text. |
[$SEQUENCEID] | Zone's sequence ID. |
[$ZONENAME] | Zone's name. |
[$HELPTEXT] | Zone's help text. |
[$ZONEPARAMNAME] | Zone parameter's value (or blank if it has not been specified). |
-
Refer to one of the following maps as examples: F1-UIMapHeader and F1-ExplorerHeader.
-
These maps make use of the oraInclude tag to incorporate HTML fragments for the header menu and framework actions. Refer to the zone type parameters for the UI Map fragments you should include in your HTML.
-
If you wish to have the "help text" icon appear next to your zone description, you should have id="title_[$SEQUENCEID]" on the <td> that contains your description.
-
If it is necessary to encapsulate JavaScript within a UI Map fragment, it will be necessary to bound the JavaScript within a
![CDATA[ ]]
tag to ensure a valid XML document. Note that the tags themselves may need to be commented out to promote compatibility with older browsers. For example:<script type="text/javascript"> /*<![CDATA[ */ // //javascript // /*]]> */ </script>
-
oraGetZoneSequence(zoneName). Uses the zone's code to retrieve its sequence number.
-
oraIsZoneCollapsed(sequenceId). Uses the zone's sequence to determine if collapsed.
-
oraHandleCollapse(seq). Collapse a zone.
-
oraHandleExpand(seq,refresh). Expand and/or refresh a zone.
Example of oraLoad[$SEQUENCEID] used within a function:
<script type="text/javascript">
function oraLoad[$SEQUENCEID]() {
checkRebateClaimStatus();
}
function checkRebateClaimStatus() {
var work = id(''analyticsFilterText[$SEQUENCEID]'',
document).cells[0].innerText.split('' '');
var rebateClaimId = work[work.length - 3];
id(''rebateClaimId'', document).value = rebateClaimId;
oraInvokeSS(''C1-CheckRCSt'',''checkRebateClaimStatus'', false);
var statusIndicator = id(''statusInd'', document).value;
if (statusIndicator == ''C1PE'' || statusIndicator == ''C1ID'') {
id(''addRebateClaimLine'', document).style.display = '''';
} else {
id(''addRebateClaimLine'', document).style.display = ''none'';
}
}
</script>
F1-ExplorerHeader rendered:
Invoking a Business Object
The oraInvokeBO function may be used within a portal zone header or zone filter map. It is similar to the command described in Invoke BO Function which allows for a business object to be invoked within the UI map’s HTML. Refer to that section for a description of the first three parameters.
Syntax | Parameters | Comments |
---|---|---|
oraInvokeBO( ) | 'BO Name' | |
'XPath' or null | ||
'action' | ||
null | This must be specified as the fourth argument. | |
[$SEQUENCEID] | This must be specified as the fifth argument. | |
true | false | Specify true if the fragment is used within a portal zone header. Specify false if the fragment is used with a zone filter map. |
Example in a portal zone header:
oraInvokeBO('CM-User','xmlGroup','read', null, [$SEQUENCEID], true)
Invoking a Business Service
The oraInvokeBS function may be used within a portal zone header or zone filter map. It is similar to the command described in Invoke BS Function which allows for a business service to be invoked within the UI map’s HTML. Refer to that section for a description of the first two parameters.
Syntax | Parameters | Comments |
---|---|---|
oraInvokeBS( ) | 'BO Name' | |
'XPath' or null | ||
null | This must be specified as the fourth argument. | |
[$SEQUENCEID] | This must be specified as the fifth argument. | |
true | false | Specify true if the fragment is used within a portal zone header. Specify false if the fragment is used with a zone filter map. |
Example in a portal zone header:
oraInvokeBS('CM-UserSearch','xmlGroup', null, [$SEQUENCEID], true)
Invoking a Service Script
The oraInvokeSS function may be used within a portal zone header or zone filter map. It is similar to the command described in Invoke SS Function which allows for a service script to be invoked within the UI map’s HTML. Refer to that section for a description of the first two parameters.
Syntax | Parameters | Comments |
---|---|---|
oraInvokeSS( ) | 'Service Script Name' | |
'XPath' or null | ||
null | This must be specified as the fourth argument. | |
[$SEQUENCEID] | This must be specified as the fifth argument. | |
true | false | Specify true if the fragment is used within a portal zone header. Specify false if the fragment is used with a zone filter map. |
Example in a portal zone header:
oraInvokeSS('UserSearch','xmlGroup', null, [$SEQUENCEID], true)
Detecting Unsaved Changes
Use this function to return a Boolean set to true if there are unsaved changes. The system will interrogate the function when the user attempts to navigate and issue a warning accordingly. This function is only needed if a UI map is using custom javascript to manage elements such that the system is not able to detect whether changes have been made. Also note that it's the responsibility of the UI map javascript to manage the values in the Boolean used for this function.
function hasUnsavedChanges(){
return isDirtyFlag;
}
Hiding Portal Tabs
The product provides the ability to use JavaScript to hide a tab on the current portal based on some condition using the oraAuthorizeTab JavaScript API. This API accepts a function as a parameter and turns off the tab index indicated.
For example, the UI Map may have a function to turn off one or more tab indexes.:
function overrideTabIndex(index){
if (index == 2) return false;
if (index == 3) return false;
}
The JavaScript is referenced “on load”:
<body class="oraZoneMap"
onLoad="oraAuthorizeTabs(overrideTabIndex);">
Required JavaScript Libraries
All of the functionality described in this document depends on a pair of JavaScript libraries. If you are writing and executing your maps entirely within the UI map rendering framework - you do not need to manually insert the following libraries - the framework will insert them for you when the UI Map is rendered.
src="privateUserMapSupport.js"
Your HTML document must reference this library to execute binding in a stand-alone environment.
<script type="text/javascript" src="privateUserMapSupport.js"></script>
src="userMapSupport.js"
To take advantage of optional toolset features, you must reference this library.
<script type="text/javascript" src="userMapSupport.js"></script>
onload="oraInitializeUserMap();"
To execute binding in a stand-alone environment, you must embed the following onload function into the <body> node.
<body onload="oraInitializeUserMap();">