UI Map Attributes and Functions
Note:This topic uses the term "field" to refer to both the generic concept of displaying and capturing data in a 'field' as well as referring to the meta-data object supplied in the product to define
Fields. When referring to the latter, the term "MD Field" (meta-data Field) is used and a hyperlink to the Field documentation is provided.
Contents
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.
Warning:
You must embed a pair of <xml></xml> tags within your HTML document for binding to occur.
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. |
Note:
The oraField attributes embedded within the list must contain XPath navigation relative to the list. See below for an example.
<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 | ... <td>House Type:</td> <td> <select oraField="houseType" oraSelect="lookup:HOUSE_TYPE;"> </select> </td> |
Extendable Lookup | oraSelect="lookupBO: ;" | BO code | ... <td>UI Device Display Type:</td> <td> <select oraField="uiDeviceType" oraSelect="lookupBO: F1-DeviceDisplayTypes;"></select> </td> |
Characteristic Type (pre-defined) | oraSelect="charType: ;" | Characteristic Type code | ... <td>Usage:</td> <td> <select oraField="statusReasonUsage" oraSelect="charType:F1-SRUSG;"></select> </td> ... |
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 | ... <td>Currency: </td> <td> <select oraField="currency" oraSelect="table:CI_CURRENCY_CD;"> </select> </td> ... |
Page Service | oraSelect="service: ;" | Page Service name | ... <td>Country:</td> <td> <select oraField="country" oraSelect="service:CIPTCNTW;"> </select> </td> ... |
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. | <html> <body> <table summary="" border="0" cellpadding="1" cellspacing="1"> <tr> <td>Select: </td> <td><select oraSelect= "valuePath:list/value; descPath:list/desc" oraField="target"></select></td> </tr> </table> </body> <xml> <root> <target>10</target> <list> <value>10</value> <desc>Ten</desc> </list> <list> <value>20</value> <desc>Twenty</desc> </list> <list> <value>40</value> <desc>Forty</desc> </list> </root> </xml> </html> |
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.
Warning:
The attribute oraSchemaDataTypes="true" will be automatically injected into the UI map's HTML! If you do not wish to apply the schema's data types to the rendered HTML then you must specify this attribute in the body node with a value of false. The attribute <body oraSchemaDataTypes="false"> is required to avoid automatic formatting!
• 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.
<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.
<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.
Note:
The time zone label is displayed because 1:28 is ambiguous otherwise. Legally, November 1, 2009 1:28 AM occurs twice because daylight savings time (DST) is removed at 2:00 AM. With the stdTime function time zone labels are only displayed when required to clarify time overlaps.
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.
Note:
The time zone label is always displayed for a referenced time zone.
HTML rendered for the following day.
Duration Formatting
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. |
Note:
You must specify a pair of stylesheet references, cisEnabled and cisDisabled, in the map's header for right alignment. The stylesheet controls how the field will be rendered. If you want to alter the rendering you must override the oraMoney style.
<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.
Note:
You must specify a pair of stylesheet references, cisEnabled and cisDisabled, in the map's header for right alignment. The stylesheet controls how the field will be rendered. If you want to alter the rendering you must override the oraNumber style.
<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.
• 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.
Note:
Foreign key navigation and context menu functionality is only available for UI maps presented in a portal zone. UI Maps presented during BPA script processing cannot support navigation options. Search functionality is only available for input HTML elements.
• 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. • An 'add' image is displayed. • Clicking the image inserts a new row in the grid. • If the list is empty, by default, an empty grid row is automatically be added. This means that the user will always see at least one grid row when this attribute is used. |
oraType="deleteGridRow" | The deleteGridRow function is used to build "delete row" dialog into the UI map. • A 'delete' image is displayed. • Clicking the image removes the adjacent row from the grid. |
Note:
Because add and delete dialogs are relevant only inside a table, these attributes must be specified within a <td> element.
Warning:
These attributes are designed to work with the business object action of 'replace' rather than 'update'. Therefore, if the map contains a grid, the business object action of 'replace' must be used to update the business object. Refer to
BO Replace Action for more information.
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.
• 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" |
Note:
It is not required, but the pretty print of the rendered XML is enhanced if you specify a pair of stylesheet references, cisEnabled and cisDisabled, in the map's header.
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.
Warning:
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. |
Note:
You can also define a field directly in your HTML for label definition, refer to
Deriving Label from a Field for more information.
Note:
If the schema contains multiple attributes, the oraLabel attribute will pick the label to render according to the following hierarchy: The label attribute overrides the mdField attribute, which in turn will override the mapField 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=" " | |
• 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. |
Note:
The oraSearch attribute is similar to the oraType attribute, because it will be 'automatically' included into HTML via the oraSchemaDataTypes attribute. This means that coding the oraSearch attribute into UI Map HTML is only required if a search zone has not been specified in the schema, or in the schema element's FK reference.
• 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. |
Note:
If you do not specify an oraSearchField attribute and the schema element has a search enabled fkRef specified, the framework automatically builds an oraSearchField where the field name is equal to the FK reference's key (MD)
fields.
Warning:
The pop-up explorer zone can be invoked one of two ways: By clicking on the search button, or by hitting the enter key from the field to the left of the button. If you click on the button then no search field information will be passed to the zone. Search field information is only used to initialize zone filter values when enter is pressed.
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. |
Note:
If you do not specify an oraSearchOut attribute, the framework will build a default where the field name will be set equal to the oraSearchField's field name.
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
Note:
For more information on throwing an error, refer to the
Terminate Statement in the Edit Data Syntax.
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. |
Note:
A pair of stylesheet references, cisEnabled and cisDisabled, must be specified for reference of the oraError style. The stylesheet controls how the field in error will be rendered. If you want to alter the rendering you must override the oraError style.
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. |
Note:
A pair of stylesheet references, cisEnabled and cisDisabled, must be specified for reference of the oraError style. The stylesheet controls how the field in error will be rendered. If you want to alter the rendering you must override the oraError style.
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!).
Warning:
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.
Warning:
Note that the function must not be used to execute logic that will modify the associated field data value again - or an endless loop will occur.
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. |
Warning:
When executing oraLoad within a fragment UI map, and you need to execute a JavaScript function during page load (where the function invokes a business object, business service, or service script) you can use the special syntax "
oraLoad[$SEQUENCEID]". For other special syntax used for map fragments, refer to the
Construct a Portal Zone Header section.
• 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: oraInvokeSS('service script', null, null, [$SEQUENCEID]) |
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.
...
<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.
...
<tr>
<td/>
<td><input type="button" onclick="oraRefreshPage();" value="Refresh"/></td>
</tr>
...
Embed Framework Navigation
Navigate using Navigation Option
This function is used to navigate to another page using the information defined on a navigation option.
Syntax | Parameters |
---|
oraNavigate( ); | 'Navigation Option code' |
'Key XPath' |
Warning:
This function is only intended for a UI map defined within a portal zone. It should not be used within a UI map launched by a BPA script.
The following example exhibits two possible uses of this function: as a URL and as a button. Note that the UI Map schema must contain a fkRef attribute. Refer to
FK Reference Formatting for more information.
<schema>
<userId fkRef="CI_USER"/>
</schema>
<html>
<body>
<table summary="" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>User Link: </td>
<td><a href="" onclick="oraNavigate('userMaint','userId'); return false;">
<span oraField="userId" oraType="fkRef:CI_USER"></span></a>
</td>
</tr>
<tr>
<td>User Button: </td>
<td><input type="submit" onclick="oraNavigate('userMaint','userId')"
value="Go to User"/></td>
</tr>
</table>
</body>
<xml>
<root>
<userId>SPLAXT</userId>
</root>
</xml>
</html>
HTML rendered.
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. |
Warning:
This function is only applicable to UI maps displayed in portal zones. UI maps launched within a running BPA script cannot directly launch another BPA script from the UI map's HTML. Instead, return a value from the UI map and execute a Perform Script or Transfer Control step type.
Note:
It is incumbent on the script author to pull information out of temporary storage in the initial steps of the script.
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. |
Note:
You would use this JavaScript function, instead of oraRunScript, if you need to push values to the BPA script that are not located in the UI Map's XML structure.
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
Some attributes support a single value that is referenced. For these types of attributes, the value may be provided using one of the following references:
• 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.
Note:
Any UI map that defines a web component must include the F1-OJETLIBSR map fragment within the "body" tag.
<body>
<oraInclude map="F1-OJETLIBSR"/>
..
</body>
Note:
Standard HTML attributes may also be provided (e.g ID=".." and style=".."). These are defined as normal. It should be noted that the web components themselves may control some styling aspects directly and thus override any style settings provided on the HTML web component. For example, the Contextual Insights configuration provides settings for text color that would override any color defined in the HTML.
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: • image - image only • text - text only • imageText - image followed by text • menu - text plus a dropdown caret to open the menu • imageMenu - image plus a dropdown caret to open the menu 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: • label - the label text to be used for the button • tooltip - the hover text to be used for the button • aria-label - the ARIA label for the button |
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: • service - the application service whose security access governs access to the button • accessMode - the specific access mode for the service that determines a more granular level of access to the button |
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: • action - the action to be taken. Valid values are ‘BPA’ and ‘NAVIGATE’ • script - the script to be performed when the action is ‘BPA’ • navopt - the navigation option to be used when the action is ‘NAVIGATE’ 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
Note:
If you do not specify the useLabels:true value and the XML target element name is "camelCase" then the corresponding spreadsheet header should be title case with a space between words, e.g.;"Camel Case". Letters and special characters are not considered a different word, for example Address1 must be uploaded into the target XML element address1.
Specifying the optional showCount:true value will display the number of records uploaded.
CAUTION:
If you are using a grid in conjunction with the
oraUploadData function, then you must maintain the grid's list with a 'replace' business object action. Refer to
BO Replace Action for more information.
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
Note:
If you do not specify the useLabels:true value and the XML target element name is "camelCase" then the corresponding spreadsheet header should be title case with a space between words, e.g., "Camel Case". Letters and special characters are not considered a different word, for example Address1 must be uploaded into the target XML element address1.
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.
CAUTION:
If you are using a grid in conjunction with the
oraUploadData function, then you must maintain the grid's list with a 'replace' business object action. Refer to
BO Replace Action for more information.
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.
Note:
The number formatting is based on the user profile setting. For localities where the decimal symbol is a comma, an implementation may configure a property setting (spl.csv.delimiter.useFromDisplayProfile=true) to cause the system to use a semicolon as the delimiter that separates the elements rather than a comma.
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). |
Warning:
• 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>
Note:
If you wish to preserve the values of a filter input field, within a filter map fragment, for the framework 'Go Back' and 'Go Forward' functionality, you must associate the input field (text box, select, etc.) with a unique HTML id. Input field values associated with a unique id will be captured in the framework's 'memento'. The 'memento' is used to rebuild the input map when the portal zone is navigated to using the 'Go Back' or 'Go Forward' functionality.
Note:
Many specialized functions exist to manipulate zone behavior, for example:
• 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.
All of these, and many more functions, are located within the JavaScript library
userMapSupport.js described below.
Note:
When executing oraLoad within a fragment UI map, and you need to execute a JavaScript function during page load (where the function invokes a business object, business service, or service script) you can use the special syntax "oraLoad[$SEQUENCEID]". Refer to the
Load Page Event section for more information.
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.
Warning:
When executing HTML outside of the framework you must include the following references explicitly within your HTML. In addition, the tool you use to render the HTML must have access to a physical copy of privateUserMapSupport.js for bind support.
src="privateUserMapSupport.js"
Your HTML document must reference this library to execute binding in a stand-alone environment.
Warning:
Referencing functions within this JavaScript library is dangerous - because these functions are owned by framework and they may be changed during version upgrade or via the normal patch process.
<script type="text/javascript" src="privateUserMapSupport.js"></script>
src="userMapSupport.js"
To take advantage of optional toolset features, you must reference this library.
Note:
You can reference the functions within this JavaScript library to write custom functions within the UI map..
<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();">
Parent topic