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.

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).
oraSelectIn=" ;"	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.


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.

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.

HTML rendered for oraType="dateTime; stdTime:true" on 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.

HTML rendered for oraType="dateTime; stdTimeRef:xpath" on 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.

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.


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.

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.


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"

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.


Syntax
oraType="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=" "	MD Field code.

Note: You can also define labels derived from the map's schema definition, refer to Derive Label from an Element for more information.

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.
oraSearchOut=" "		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':

oraErrorElement automatically rendered using oraError in the body tag

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:

Detailed window launched using oraShowAlert function

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 '<'.
oraDisplayNone(item );	(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'
oraHasSecurity( )	'Access Mode'
oraHasSecurityPath('x','y')	'Application Service XPath'
oraHasSecurityPath('x','y')	'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'
oraInvokeBS( )	'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'
oraInvokeSS( )	'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.


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>
...

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'
oraNavigate( );	'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


Syntax	Parameters	Comments
oraRunScript( );	'BPA script code'.
oraRunScript( );	'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'.
oraRunScriptWithValues( );	'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'
oraSubmitMap( );	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'
<oraInclude map=' ' prefixPath=' '/>	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.
<ou-tree...></ou-tree>	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.

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:

oraUploadData attribute attached to the Get Data button

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:

oraDownloadData attribute attached to the Download button

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();">