UI 對應屬性和函數

請注意：本主題使用詞彙「欄位」來表示在「欄位」中顯示和擷取資料的一般概念，以及代表產品中用來定義欄位所提供的中繼資料物件。指的是後者時，會使用詞彙「中繼資料欄位」，並提供此「欄位」文件的超連結。

將 XML 繫結至 HTML

將 UI 對應的 XML 繫結至其 HTML 只需要兩個不同屬性。這兩個屬性都需要內嵌於 HTML 中的 XML 文件，其中 XML 被限制在 <xml> 節點中。

警告：您必須在 HTML 文件中內嵌一組 <xml></xml> 標記，繫結才會生效。

連結欄位


語法	值	描述
oraField=" "	欄位元素 XPath	此屬性是用來將 HTML 元素直接與 XML 元素連結，其中 XML 元素是在 UI 對應的 XML 結構中定義。屬性可與任何轉譯 HTML 元素 (例如 <span>、<div> 及 <input>) 搭配使用。

輸入元素的 HTML：


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

轉譯的 HTML

span 和 div 元素的 HTML：


<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 的轉譯結果：

連結列表

此屬性是用來將 HTML 資料表與 XML 列表連結，其中 XML 列表是在 UI 對應的 XML 結構中定義。元素的目的是在列表每次出現時觸發架構來複製資料表的 HTML。


語法	值	描述
oraList=" "	列表元素 XPath	此屬性是用來將 HTML 資料表與 XML 列表連結，其中 XML 列表是在 UI 對應的 XML 結構中定義。元素的目的是在列表每次出現時觸發架構來複製資料表的 HTML。

備註：內嵌於列表中的 oraField 屬性必須包含相對於列表的 XPath 導覽。請參閱下方範例。

<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 的轉譯結果：

建立下拉式列表

提供下列屬性以根據各種來源建立 HTML ‘select’ 元素 (也稱為下拉式列表)。


來源	語法	值	範例
查尋	oraSelect="lookup: ;"	查尋欄位	`... <td>House Type:</td> <td> <select oraField="houseType" oraSelect="lookup:HOUSE_TYPE;"> </select> </td>`
可延伸查尋	oraSelect="lookupBO: ;"	業務物件代碼	`... <td>UI Device Display Type:</td> <td> <select oraField="uiDeviceType" oraSelect="lookupBO: F1-DeviceDisplayTypes;"></select> </td>`
特性類型 (預先定義)	oraSelect="charType: ;"	特性類型代碼	`... <td>Usage:</td> <td> <select oraField="statusReasonUsage" oraSelect="charType:F1-SRUSG;"></select> </td> ...`
控制資料表	oraSelect="table: ;" 備註：此屬性只會與依照標準控制資料表結構的資料表搭配運作，其中的相關語言資料表包含資料欄 DESCR 作為其描述資料欄。請使用「應用程式檢視器」資料字典來識別符合此功能的資料表。警告：只有在顯示的值小於 500 時，oraSelect 函數才能運作。	資料表名稱	`... <td>Currency: </td> <td> <select oraField="currency" oraSelect="table:CI_CURRENCY_CD;"> </select> </td> ...`
頁面服務	oraSelect="service: ;"	頁面服務名稱	`... <td>Country:</td> <td> <select oraField="country" oraSelect="service:CIPTCNTW;"> </select> </td> ...`
內嵌列表	用來根據對應之 XML 中的列表，建立選取下拉式列表。 oraSelect="valuePath: ;descPath: "	在 valuePath 後方，請指出保存值之元素的 XPath。在 descPath 後方，請指出保存描述之元素的 XPath。	<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>
服務指令檔	oraSelect="ss: ;"	服務指令檔代碼	如需使用此函數所需的其他語法，請參閱下方內容。
業務服務	oraSelect="bs: ;"	業務服務代碼	如需使用此函數所需的其他語法，請參閱下方內容。

指定服務指令檔或業務服務時，需要額外對應資訊才能來回傳遞服務資料。


語法	值	描述
oraSelectIn=" ;"	serviceXPath:element;	用於將另一個元素的值傳遞至服務 (服務 XPath 的對應)。
oraSelectIn=" ;"	serviceXPath:'文字';	用於將常數或文字傳遞至服務 (服務 XPath 的對應)。
oraSelectOut="valuePath: ; descPath: "	請參閱下方範例	用於指出服務輸出中的哪個元素保有值，哪個元素保有描述。

使用業務服務的範例：

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

建立下拉式列表的此方法通常用於不同元素之間有依存項目，且下拉式列表 (對於下階元素) 中的有效值列表是根據對應 (上階元素) 中的另一個元素。當上階元素變更時，可能需要重新整理下階元素。可透過在對應的 onChange 事件中呼叫的函數來實作此行為。語法是 oraHandleDependentElements('依存元素');。可以命名多個目標元素 (依存項目)。

下列範例與上述業務服務範例相關，其中外部系統列表特定於以輸入形式傳送的指定外傳訊息類型。下方的程式碼片段顯示要觸發重新整理外部系統之下拉式列表的外傳訊息類型元素組態。

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

將輸入和輸出欄位格式化

下列屬性是為輸入和輸出欄位套用資料類型格式而設計。

自動格式設定


語法
oraSchemaDataTypes="false"

此屬性可用來觸發所轉譯 HTML 文件中的自動格式設定功能。自動格式設定將根據在 UI 對應的結構中所定義的資料類型屬性來進行。如需特定資料類型格式的詳細資訊，請參閱下方的 oraType 屬性描述。

警告：屬性 oraSchemaDataTypes="true" 會自動置於 UI 對應的 HTML！如果您不想要將結構的資料類型套用至轉譯的 HTML，則必須在 body 節點中指定此屬性的值為 false。必須使用屬性 <body oraSchemaDataTypes="false">，來避免自動格式設定！

UI 對應結構：

<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 對應 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 的轉譯結果。

日期格式設定

此函數可用來根據使用者的顯示設定檔顯示日期。對於輸入欄位，此設定會在使用者離開欄位時，將資料格式化。


語法
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 的轉譯結果。

時間格式設定

此函數可用來根據使用者的顯示設定檔顯示時間。對於輸入欄位，此設定會在使用者離開欄位時，將資料格式化。


語法
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 的轉譯結果。

日期和時間格式設定

此函數可用來根據使用者的顯示設定檔顯示時間戳記。如果此函數用於輸入元素，會將其分成兩部分，一個用於日期，另一個則用於時間。可以選擇地使用屬性值 'time:suppress' 來隱藏日期時間元素的時間部分。


語法
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 的轉譯結果。

使用標準時間的日期/時間格式設定

此 true 函數可用來根據「基準」時區的日光節約時間排程來轉譯日期/時間元素。「基準」時區是在安裝資料表中指定，代表資料庫時區。對於具有此設定的輸入元素，輸入的所有時間都會假設與基準時區的日光節約時間排程對應。如果輸入的時間無法明確地轉譯成標準時間，則使用者需要提供時區標籤以指示輸入的是日光節約時間，還是標準時間。


語法
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 的轉譯結果。

備註：系統會顯示時區標籤，因為 1:28 不是明確的時間。法律上，由於日光節約時間 (DST) 會在 2:00 AM 結束，所以 2009 年 11 月 1 日 1:28 AM 會出現兩次。使用 stdTime 函數，則只會在需要闡明時間重疊的情況時顯示時區標籤。

oraType="dateTime; stdTime:true" 在日光節約時間重疊期間的 HTML 轉譯結果

後一天的 HTML 轉譯結果。

使用時區參考的日期和時間格式設定


語法	有效值	描述
oraType="dateTime; stdTimeRef: ;"	請在冒號後方參考 XPath。	此函數可用來根據其 XPath 受到參考之時區的日光節約時間排程來轉譯日期/時間元素。請注意，所處理的時間假設是以參考之時區的標準時間儲存，因此系統只會執行日光節約時間轉換，不會執行時區變動。
oraType="dateTime; displayRef: ;"	請在冒號後方參考 XPath。	此函數類似 stdTimeRef 函數，但此函數除了執行日光節約時間轉換之外，還會執行時區變動。若要正確地使用 displayRef，請只將此屬性與以基準時區儲存的時區元素相關聯。

關於輸入元素，輸入的所有時間都會假設與參考時區的日光節約時間排程對應。如果輸入的時間無法明確地轉譯成標準時間，則使用者需要提供時區標籤以指示輸入的是日光節約時間，還是標準時間。

<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 的轉譯結果。

請注意：對於參考的時區，會一律顯示時區標籤。

oraType="dateTime; stdTimeRef:xpath" 在日光節約時間重疊期間的 HTML 轉譯結果

後一天的 HTML 轉譯結果。

持續時間格式設定


語法
oraType="duration"

此函數可用來顯示持續時間。對於輸入元素，使用者輸入的值會從分鐘數轉譯成適當的小時數和分鐘數。例如，當使用者離開輸入欄位時，系統會將輸入值 '90' 轉換成 '00:01:30'。

<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 的轉譯結果。

月份日格式設定


語法
oraType="dayInMonth"

此函數可用來顯示串連的日期和月份。

<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 的轉譯結果。

年度月份格式設定


語法
oraType="monthInYear"

此函數可用來顯示串連的月份和年度。

<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 的轉譯結果。

貨幣格式設定

此函數可用來顯示作為貨幣金額的數字。如需與幣別相關的組態選項，請參閱下列資料表。關於輸入元素，如果輸入非數字的值，則會發出錯誤。


語法	描述
oraType="money: "	請直接在冒號後方指定幣別代碼。
oraType="money;currencyRef: "	(在冒號後方) 請參考會參考幣別代碼之元素的 XPath。
oraType="money"	如果沒有指定任何幣別或幣別參考，則會使用安裝幣別。

備註：您必須在對應的標頭中指定一對樣式表參考 (cisEnabled 和 cisDisabled)，才能靠右對齊。樣式表控制了欄位的轉譯方式。如果您要更改轉譯方式，您必須置換 oraMoney 樣式。

<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 的轉譯結果

數字格式設定

此函數可用來顯示數字，或驗證輸入值。對於輸入元素，如果輸入非數字的值，則會傳回錯誤。


語法
oraType="number"

備註：您必須在對應的標頭中指定一對樣式表參考 (cisEnabled 和 cisDisabled)，才能靠右對齊。樣式表控制了欄位的轉譯方式。如果您要更改轉譯方式，您必須置換 oraNumber 樣式。

<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 的轉譯結果。

外來索引鍵參考格式設定

根據預設，顯示具有 fkRef oraType 的元素時，會啟用資訊字串、內容功能表、導覽以及搜尋 (如果已相應地設定外來索引鍵參考)。提供語法以讓您選擇關閉這裡的任一功能。

請注意，您也可以分別啟用外來索引鍵超連結，如需詳細資訊，請參閱內嵌架構導覽。下列為可用來控制外來索引鍵參考功能的各種屬性。請注意，每個個案中的預設值都是 true。應使用 false 值來停用功能。


語法
oraType="fkRef:true\|false; info:true\|false; context:true\|false; navigation:true\|false; search:true\|false"

fkRef。使用 'true' 值會啟用下列所有的外來索引鍵參考處理。使用 'false' 值會停用自動外來索引鍵參考處理。
info。使用 'true' 值會轉譯 UI 對應上的資訊字串 (如果適用的話)。
context。使用 'true' 值會轉譯內容功能表，讓它顯示在外來索引鍵參考元素之前 (如果適用的話)。
navigation。使用 'true' 值會將資訊字串轉譯成超連結 (如果適用的話)。按一下超連結，即可導覽至適當頁面。
search。使用 'true' 值會顯示啟動搜尋區域的搜尋圖示 (如果適用的話)。

備註：外來索引鍵導覽和內容功能表功能只適用於在入口區域中顯示的 UI 對應。在業務處理助理指令檔處理期間顯示的 UI 對應不支援導覽選項。搜尋功能僅適用於輸入 HTML 元素。

UI 對應結構：


<schema>
  <bo fkRef="F1-BOMO"/>
</schema>

UI 對應 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 的轉譯結果。

查尋格式設定

此函數可用來顯示查尋值的描述。


語法	有效值
oraType="lookup: "	請在冒號後方加上查尋欄位名稱。


<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 的轉譯結果。

可延伸查尋格式設定

此函數可用來顯示可延伸查尋值的描述。


語法	有效值
oraType="lookupBO: "	請在冒號後方加上業務物件代碼名稱。


<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 的轉譯結果。

特性類型格式設定

此函數可用來顯示預先定義之特性值的描述。


語法	有效值
oraType="charType: "	請在冒號後方加上特性類型代碼。


<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 的轉譯結果。

控制資料表格式設定

此函數可用來顯示具有相關聯語言資料表之控制資料表的描述。


語法	有效值
oraType="table: "	請在冒號後方加上資料表代碼。


<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 的轉譯結果。

新增/移除方格格式設定


語法	描述
oraType="addGridRow"	addGridRow 函數是用來在 UI 對應中建立「插入資料列」對話方塊。系統會顯示「新增」影像。按一下該影像，即可在方格中插入新的一資料列。如果列表空白，根據預設，系統會自動新增空白方格資料列。這表示使用此屬性時，使用者一律會看到至少一個方格資料列。
oraType="deleteGridRow"	deleteGridRow 函數是用來在 UI 對應中建立「刪除資料列」對話方塊。系統會顯示「刪除」影像。按一下該影像，即可將相鄰的資料列從方格中移除。

請注意：由於新增和移除對話方塊只有在資料表中時才相關，因此必須在 <td> 元素中指定這些屬性。

警告：這些屬性是設計來與業務物件動作「取代」搭配使用，而非與「更新」搭配使用。因此，如果對應包含方格，必須使用業務物件動作「取代」來更新業務物件。如需詳細資訊，請參閱業務物件取代動作。

範例：

<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 的轉譯結果。

未格式化的元素

此函數可用來顯示包含「原始」資料之元素的內容 (針對正在轉譯之結構元素所定義)。


語法
oraType="raw"

UI 對應結構：


<schema>
    <rawStuff type="raw"/>
</schema>

UI 對應 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 的轉譯結果。

字串格式設定

此函數可用來在元素包含逸出 XML 時，利用 XML 美化功能來顯示該元素的內容。


語法
oraType="xmlString"

備註：這不是必要函數，但如果您在對應的標頭中指定一對樣式表參考 (cisEnabled 和 cisDisabled)，所轉譯 XML 的美化功能就會增強。

範例：

<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 的轉譯結果。

沒有 oraType=”xmlString” 的 HTML 轉譯結果

HTML 格式設定

此函數可用來將元素的內容顯示為 HTML (而非純文字)。系統會自動將定義為 oraType="fkref" 的元素轉譯成 HTML。


語法
oraType="html"

警告：

為了避免執行惡意的 HTML，並非所有的 HTML 標記都受到支援。支援的標記列表定義於 "F1-HTMLWhiteList" 受管理之內容定義中。

當系統偵測到不支援的 HTML 時，整個元素就會逸出，並轉譯為純文字。因此，如果最終 HTML 元素不應該包含有效的 HTML，建議您正確地逸出任何提供的來源字串。如此一來，系統就只會逸出違規的字串，而不是逸出整個元素。

如果 HTML 元素是在指令檔中編寫的，請參閱編輯資料語法中所述的「逸出」函數，以取得詳細資訊。請使用 WebStringUtilities.asHTML java API，來處理以 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 的轉譯結果。

沒有 oraType="html" 的 HTML 轉譯結果

顯示標籤

從元素導出標籤

此屬性是用來取得 <span>、<td> 或 <input> HTML 標記的區分語言標籤。


語法	有效值
oraLabel=" "	UI 對應結構中元素的 XPath。該元素必須參考 mapField=、mdField= 或 label= 屬性。

備註：您也可以直接在用於標籤定義的 HTML 中定義欄位。如需詳細資訊，請參閱從欄位導出標籤。

請注意：如果結構包含多個屬性，oraLabel 屬性會根據下列階層來選取要轉譯的標籤：label 屬性比 mdField 屬性優先，而 mdField 屬性則比 mapField 屬性優先。

UI 對應結構：

<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 的轉譯結果：

從欄位導出標籤

此屬性是用來取得 <span>、<td>、<input> 或 <title> HTML 標記的區分語言標籤。標籤文字是導出自所參考的欄位。


語法	有效值
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 的轉譯結果：

啟用 UI 對應說明

顯示標籤區段說明使用基本中繼資料欄位，導出元素標籤的方法。此外，如果相同的中繼資料欄位包含說明文字，系統會自動在該元素標籤旁邊產生工具提示。按一下工具提示，使用者就能檢視說明文字。

您可以變更工具提示的轉譯方式。如需詳細資訊，請參閱自訂外觀與風格選項。

使用蹦現資料總管區域搜尋

搜尋選項

此屬性是用來啟用輸入 HTML 元素的搜尋區域功能。


語法	有效值
oraSearch=" "	區域代碼。

備註：oraSearch 屬性類似 oraType 屬性，因為它會透過 oraSchemaData 屬性「自動」包含在 HTML 中。這代表只有在結構或結構元素的外來索引鍵參考中未指定搜尋區域時，才需要將 oraSearch 屬性編碼到 UI 對應 HTML 中。

在 HTML 中定義搜尋的範例。UI 對應的結構：

<schema>
   <uiMap/> 
</schema>

UI 對應的 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>

在結構中定義搜尋的範例。UI 對應的結構：

<schema> 
   <uiMap search="F1-UISRCH"/>
</schema>

UI 對應的 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>

外來索引鍵參考定義搜尋區域的範例。UI 對應的結構：


<schema>
   <uiMap fkRef="F1-UISRC"/> 
</schema>

UI 對應的 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>

無論是哪種情況，HTML 的轉譯結果都是相同的。

將搜尋欄位初始化

此選用屬性是用來將搜尋區域篩選初始化。您可以將多個篩選初始化。此屬性只能與 oraSearch 屬性搭配使用。


語法	有效值	欄位值選項	註釋
oraSearchField=" "	一或多組以冒號分隔的欄位名稱與欄位值。每組以分號分隔。 oraSearchField="fieldName:fieldValue: ..." 欄位名稱是用來識別啟動搜尋時要初始化的區域篩選。欄位名稱必須與在搜尋區域的使用者篩選或隱藏篩選參數上指定之 searchField 記憶碼的值相符。	沒有值	如果您沒有指定欄位值，則系統會使用包含 oraSearchField 屬性之輸入元素的值。
		XPath	請指出包含要使用之值的結構元素 XPath。
		'文字'	請指出要提供的文字值。

備註：如果您沒有指定 oraSearchField 屬性，且結構元素指定已啟用搜尋的 fkRef，架構就會自動建立 oraSearchField，其中欄位名稱等於外來索引鍵參考的索引鍵 (中繼資料) 欄位。

警告：可以透過兩種方法叫用蹦現資料總管區域：按一下搜尋按鈕，或是在該按鈕左側的欄位中按下 Enter 鍵。當您按一下該按鈕時，系統不會將任何搜尋欄位資訊傳送給區域。搜尋欄位資訊只是用來在您按下 Enter 鍵時，將區域篩選值初始化。

在下列範例中，有兩個篩選值已初始化：

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

搜尋欄位傳回的對應

此選用屬性是用來導向搜尋區域所傳回的值。您可以指定多個欄位。此屬性只能與 oraSearch 屬性搭配使用。


語法	有效值	欄位值選項	註釋
oraSearchOut=" "	一或多組以冒號分隔的欄位名稱與欄位值。每組以分號分隔。 oraSearchOut="field name:xpath target; ..." 欄位名稱是用來識別從查詢區域傳回的搜尋結果。欄位名稱必須與在資料總管區域的搜尋結果參數中定義的 ELEMENT_NAME 記憶碼相符。	沒有值	如果您沒有指定欄位值，則包含 oraSearchField 屬性的輸入元素會收到傳回值。
oraSearchOut=" "		XPath	請指出應該要收到傳回值的結構元素 XPath。

請注意：如果您沒有指定 oraSearchOut 屬性，架構會建立預設值，並把其中的欄位名稱設定成 oraSearchField 的欄位名稱。

在下列範例中，會傳回兩個值：

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

顯示錯誤

顯示錯誤變數

系統會顯示下列其中一個錯誤變數。


語法
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 的轉譯結果

反白標示發生錯誤的欄位

備註：如需有關發出錯誤的詳細資訊，請參閱「編輯資料語法」中的終止陳述式。


語法	註釋
oraError="automate:true\|false; prefix: "	指定 automate:true，即可在發出錯誤時自動啟用反白標示發生錯誤的元素功能。請注意，true 是預設值，因此不需要指定。指定 automate:false 即可關閉欄位反白標示功能。
	系統會比對在錯誤中所參考的元素名稱與 UI 對應中的元素名稱。如果結構中的元素位於可能與錯誤所參考名稱不相符的 XPath 中，請使用 prefix:XPath 來指定。

備註：必須為 oraError 樣式的參考指定一對樣式表參考 (cisEnabled 和 cisDisabled)。樣式表控制了發生錯誤之欄位的轉譯方式。如果您要更改轉譯方式，您必須置換 oraError 樣式。

下列的 HTML 範例顯示對應中的元素是在稱為 boGroup 的群組中定義。錯誤傳回的元素名稱不會包含此群組，因此為了讓欄位反白顯示的功能可正常運作，prefix: 屬性必須指出該群組名稱。

<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 的轉譯結果，其中發生的錯誤元素與 'lastName' 相同：

在 body 標記中使用 oraError 的 oraErrorElement 自動轉譯結果

置換錯誤元素名稱

在很少見的情況下，錯誤傳回的元素名稱與對應中的元素名稱不相符，此時您可以新增明確屬性來指出錯誤元素名稱。


語法	有效值	註釋
oraErrorElement=	"元素名稱"	這裡所參考的元素名稱必須與系統發出錯誤時所指派的錯誤元素名稱完全相符。相同錯誤元素名稱可以參考多個 HTML 欄位。

下列範例說明錯誤相關聯的元素名稱與對應中的元素名稱不相同的案例。

<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 的轉譯結果。

顯示錯誤蹦現視窗

顯示錯誤文字時，此函數可用來在使用者按一下錯誤訊息時，蹦現標準錯誤對話方塊 (顯示更多資訊)。


語法
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 的轉譯結果。

透過按一下錯誤訊息啟動的標準蹦現對話方塊：

針對瀏覽事件啟動 JavaScript

使用 JavaScript 架構

有許多 JavaScript 事件可以在 HTML/Javascript 環境中使用。例如 onLoad、onBlur、onChange 等事件。UI 對應架構也可以利用其中的部分事件。重要的是，您開發的所有 UI 對應都要按照順序與架構搭配運作，以便取得一致的結果 (系統可能不會永遠都以相同順序來執行事件！)。

警告：

下列範例說明在 UI 對應中安全地處理載入和處理欄位更新的建議方式。

如果在 XHTML UI 對應或片段中需要 JavaScript，您就必須將該 JavaScript 繫結在 ![CDATA[ ]] 標記中，以確保會產生有效的 XML 文件。請注意，標記本身可能需要加上註釋，以提升與較舊瀏覽器的相容性。例如：


<script type="text/javascript">
/* <![CDATA[ */

//
// javascript
//

/* ]]> */

</script>

元素變更事件


語法	有效值
oraChange=" "	JavaScript 函數。

載入 UI 對應時，如果已有一個事件處理程式附加到一個 HTML 元素，架構會將其移除，並附加合併的事件處理程式。合併的處理程式會先呼叫任何架構處理程式，然後再呼叫其他 (自訂) 處理程式。

警告：請注意，此函數不能用來執行會再次修改相關聯欄位資料值的邏輯，否則會發生無限循環迴圈。

在下列範例中，按一下按鈕時，就會執行 oraInvokeBS 函數。

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

頁面載入事件


語法	有效值
oraLoad=" "	JavaScript 函數。

警告：執行片段 UI 對應中的 oraLoad 時，且需要在頁面載入期間執行 JavaScript 函數 (函數會叫用業務物件、業務服務或業務指令檔)，您可以使用特殊語法 "oraLoad[$SEQUENCEID]"。如需可用於對應片段的其他特殊語法，請參閱建構入口區域標頭區段。

在下列範例中，系統會在頁面載入期間執行 oraDisplayNone 函數：

<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 的轉譯結果

頁面載入事件之後


語法	有效值
oraAfterLoad=""	JavaScript 函數。

在下列範例中，系統會在頁面載入之後執行 oraGetValueFromScript 函數。

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

隱藏元素

使用函數隱藏

本系統提供多個可隱藏 HTML 元素的技術。


語法	有效值	註釋
oraDisplayNone(item );	(item, 'XPath', '值', '運算子')	用來根據另一個元素 (使用其 XPath 參考) 的值來隱藏元素。輸入 ' ' 值以查詢空白值。依預設，運算子為 '='。您也可以改設為其他運算子，例如 '!='、'>' 或 '<'。
oraDisplayNone(item );	(item, 函數名稱,true \| false)	用於指出必須傳回布林的 JavaScript 函數。
oraIsSuppress="true"		對需要一律隱藏且不依存於其他項目的欄位使用此選項。此屬性設定於 HTML 元素 (div 元素) 上。

User Id 值不存在時，系統就會隱藏 User Id 標籤的範例。

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

使用者沒有應用服務 'F1-DFLTS' 之變更動作 ('C') 的安全性存取權時，系統就會隱藏 Save 按鈕的範例。

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

檢查使用者的安全性存取權

系統提供兩個函數來檢查使用者對於指定應用服務的安全性存取權和存取模式。這些函數常用來隱藏元素。


語法	參數
oraHasSecurity( )	'應用服務代碼'
oraHasSecurity( )	'存取模式'
oraHasSecurityPath('x','y')	'應用服務 XPath'
oraHasSecurityPath('x','y')	'存取模式 XPath'

如需 oraHasSecurity 函數的範例，請參閱上一個區段。下列範例顯示當使用者沒有應用服務 'FORMTST' 之存取模式 'ACT' 的安全性存取權時，系統就會隱藏狀態按鈕。

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

叫用結構式服務

系統提供叫用業務物件、業務服務，或服務指令檔的函數。

叫用業務物件函數

此函數可用來直接從 UI 對應的 HTML 執行業務物件互動。它會傳回 'true' 或 'false'，視叫用是否發生錯誤而定。


語法	參數	註釋
oraInvokeBO( )	'業務物件名稱'
	'XPath' 或 null	透過 XPath 來識別群組元素。如果您指定文字 null，則會傳送整個內嵌的 XML 物件。
	'動作'	請指出要使用的動作。有效值為 add、delete、read、update、replace、fastAdd 及 fastUpdate。 Fastpath：如需有關各種業務物件動作的詳細資訊，請參閱業務物件動作。

在 JavaScript 函數中叫用陳述式範例。

function invokeBO {
     if (!oraInvokeBO('F1-User','xmlGroup','read')) {
          oraShowErrorAlert();
          return;
}
}

在 onClick 中叫用陳述式範例。

<input type="button"  class="oraButton" oraMdLabel="DISPLAY_LBL" onClick="oraInvokeBO('F1-User');"/>

叫用業務服務函數

此函數可用來直接從 UI 對應的 HTML 執行業務服務互動。它會傳回 'true' 或 'false'，視叫用是否發生錯誤而定。


語法	參數	註釋
oraInvokeBS( )	'業務服務名稱'
oraInvokeBS( )	'XPath' 或 null	透過 XPath 來識別群組元素。如果您指定文字 null，則會傳送整個內嵌的 XML 物件。

在 JavaScript 函數中編碼陳述式的範例。

function invokeBS {
     if (!oraInvokeBS('F1-UserSearch','xmlGroup')) {
          oraShowErrorAlert();
          return;
  }
}

透過 onClick 叫用陳述式的範例。

<input type="button"  class="oraButton" oraMdLabel="DISPLAY_LBL" onClick="oraInvokeBS('F1-RetrieveInfo');"/>

叫用服務指令檔函數

此函數可用來直接從 UI 對應的 HTML 執行服務指令檔互動。它會傳回 'true' 或 'false'，視叫用是否發生錯誤而定。


語法	參數	註釋
oraInvokeSS( )	'服務指令檔名稱'
oraInvokeSS( )	'XPath' 或 null	透過 XPath 來識別群組元素。如果您指定文字 null，則會傳送屬於上階節點的文件。如果上階節點的文件還不夠，您可以使用下列語法來傳送整份文件： `oraInvokeSS('service script', null, null, [$SEQUENCEID])`

在 JavaScript 函數中叫用陳述式的範例。


function invokeSS {
     if (!oraInvokeSS('F1-GetUsers','xmlGroup')) {
          oraShowErrorAlert();
          return;
}
}

在 onClick 中叫用陳述式範例。

<input type="button"  class="oraButton" oraMdLabel="DISPLAY_LBL" onClick="oraInvokeSS('F1-GetUserInfo');"/>

重新整理已轉譯的對應或入口頁面

重新整理對應

此函數可用來只「重新整理」發出指令的對應區域。


語法
oraRefreshMap;

...
    <tr>
        <td/>
        <td><input type="button" onclick="oraRefreshMap();" value="Refresh"/></td>
    </tr>
...

重新整理頁面

此函數可用來重新整理入口中的所有區域。


語法
oraRefreshPage;

...
    <tr>
        <td/>
        <td><input type="button" onclick="oraRefreshPage();" value="Refresh"/></td>
    </tr>
...

內嵌架構導覽

使用導覽選項導覽

此函數可使用在導覽選項中定義的資訊導覽至其他頁面。


語法	參數
oraNavigate( );	'導覽選項代碼'
oraNavigate( );	'索引鍵 XPath'

警告：此函數僅適用於在入口區域中定義的 UI 對應。業務處理助理指令檔所啟動的 UI 對應中不應該使用此函數。

下列範例展示此函數的兩種可能用法：作為 URL和作為按鈕。請注意，UI 對應結構必須包含 fkRef 屬性。如需詳細資訊，請參閱外來索引鍵參考格式設定。

<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 的轉譯結果。

啟動業務處理助理指令檔


語法	參數	註釋
oraRunScript( );	'業務處理助理指令檔代碼'
oraRunScript( );	'XPath 元素'	一或多個元素值可傳送到業務處理助理中，它可以在其中作為暫存變數參考。

警告：此函數只適用於在入口區域中顯示的 UI 對應。在執行中的業務處理助理指令檔中啟動的 UI 對應，無法直接從 UI 對應的 HTML 啟動另一個業務處理助理指令檔。而是會從 UI 對應傳回一個值，並執行「執行指令檔」或「轉移控制」步驟類型。

備註：指令檔作者有責任在指令檔的初始步驟中提取暫存中的資訊。

在下列範例中，系統會建立名為 'personId' 的暫存變數，其值為 '1234567890'，並啟動名為 'Edit Address' 的業務處理助理指令檔。

<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 的轉譯結果。

啟動具有值的業務處理助理指令檔

此函數可用來啟動業務處理助理，提供要推送至暫存的名稱/值配對。您可以傳送多個值。然後，業務處理助理可以依照名稱來參考暫存變數。


語法	參數	註釋
oraRunScriptWithValues( );	'業務處理助理指令檔代碼'
oraRunScriptWithValues( );	'XPath 元素名稱':value	一或多組元素名稱與值。

請注意：如果您需要將值推送到不是位於 UI 對應之 XML 結構中的業務處理助理指令檔，請使用此 JavaScript 函數，而不是 oraRunScript。

在下列範例中，名為 'editUser()' 的 JavaScript 函數負責啟動名為 'UserEdit' 的業務處理助理指令檔。系統將會建立名為 'userId' 的暫存變數，值為 'CMURRAY'。

<html>
<head>
<script type="text/javascript">
 
function editUser() {
    var values = {'userId': 'CMURRAY'};
    oraRunScriptWithValues('UserEdit', values);
    return;
}
 
</script>
</head>
<body>
...
</body>
</html>

結束具有繫結值的 UI 對應

此函數可用來結束 UI 對應。當您結束對應時，可以指定要傳回給指令檔的值，以及是否要傳回已更新的 XML。


語法	參數	註釋
oraSubmitMap( );	'傳回值'
oraSubmitMap( );	布林值	指出是否應傳回已更新的 XML。預設值為 true。

在下列範例中，Save 按鈕會傳回已更新的資訊，Cancel 按鈕則不會。

<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 和 Cancel 按鈕的轉譯結果：

包含對應片段

此函數可用來將對應片段內嵌到另一個 UI 對應中。請注意，您可以在對應或對應片段中包含 include 節點。


語法	參數	註釋
<oraInclude map=' ' prefixPath=' '/>	map='UI 對應代碼'
<oraInclude map=' ' prefixPath=' '/>	prefixPath='Xpath'	您可以選擇性指定 Xpath 前綴，以附加至定義於包含 UI 對應片段之 HTML 中的每個內含 oraField、oraLabel、oraList、oraSelect valuePath 與 descPath、oraDownloadData 及 oraUploadData 屬性值。請注意：此功能只適用於 XPath 屬性值沒有出現在 oraList 屬性下方時。包含 oraList 屬性之資料表中的任何 XPath 值都不會受到 prefixPath 影響。

具有兩個按鈕，名為 '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"/>

包含名為 'F1-SaveCancelButtons' 之對應片段的對應範例。

...
<tr>
   <td colspan="2" align="center">
<oraInclude map="F1-SaveCancelButtons"/>
   </td>
</tr>
...

包含 Web 元件

Web 元件是產生特定使用者介面功能的自訂 HTML 元素。每個受支援的 Web 元件通常都有一或多個已定義的 HTML 屬性，該屬性會影響 Web 元件的運作方式及顯示方式。較複雜的 Web 元件可能會有相對應的系統組態物件，定義所產生的使用者介面元素顯示的行為及資訊。例如，產生「樹狀目錄」資訊的 Web 元件具有「樹狀目錄」組態表，其中定義如何擷取樹狀目錄資訊以及如何顯示每個節點的相關明細。

通用屬性

可用於每個 Web 元件的部分通用屬性為：

管理產生明細之組態物件特定實例的參考。
能將內容資料作為名稱和值組來傳遞。
支援顯示功能預覽的「模式」

部分屬性支援可受參考的單一值。對於這些類型的屬性，可以使用下列其中一個參考來提供值：

文字值。可以直接參考此值。範例：
```
treename="F1-Tree"
```
XPath 參考。XPath 參考必須使用明確的語法 x[value]。範例：
```
treename="x[migrationTree]"
```
「全域」或「入口」內容參考。這些參考必須使用明確的語法 c[value]。
```
treename="c[TREE_NAME]"
```
欄位標籤參考。這些參考必須使用明確的語法 md[value]。
```
text=md[F1_ADD_LBL]"
```
欄位說明文字參考。這些參考必須使用明確的語法 mdh[value]。
```
text=mdh[F1_OPERATIONS_LBL]"
```

對於支援一或多個名稱/值組的複雜屬性，用來定義名稱和值之語法所遵循的規則，與上述的文字值、XPath 參考和內容所遵循的規則相同。冒號 (":") 應該用來分隔名稱和值，並用分號 (";") 來分隔每一組。

context="FIELD_NAME1:x[value1];FIELD_NAME2:F1AB;x[fieldName3]:c[FIELD_NAME3];"

指定的 Web 元件可能有其功能特定的額外 HTML 屬性。

備註：任何定義 Web 元件的 UI 對應，必須將 F1-OJETLIBSR 對應片段包含在 "body" 標記內。

<body>
<oraInclude map="F1-OJETLIBSR"/>
..
</body>

備註：還會提供標準 HTML 屬性 (例如 ID=".." 和 style="..")。這些被定義為正常。請注意，Web 元件本身可能會直接控制某些樣式層面，因此會置換在 HTML Web 元件上所提供的任何樣式設定。例如，「內容洞察分析」組態提供文字顏色的設定，而該設定會置換在 HTML 中定義的任何顏色。

下列各節描述每個受支援的 Web 元件。

樹狀目錄

如需樹狀目錄組態的詳細資訊，請參考樹狀目錄。


語法	參數	註釋
<ou-tree...></ou-tree>	treename="singleValue"	您必須提供定義要顯示之樹狀目錄組態的樹狀目錄物件名稱的參考。此屬性預期為依照上述單一值小節中所述語法的單一值。
<ou-tree...></ou-tree>	context="..."	(選擇性) 傳遞一或多個名稱/值組。語法依照上述複雜屬性資訊中顯示的範例。

下列範例明確參考某個樹狀目錄，且不會傳遞任何內容。特定樹狀目錄則依賴樹狀目錄節點演算法可存取的全域內容。

<ou-tree treename="C1-PremiseTree"></ou-tree>

內容洞察分析

如需與定義內容洞察分析有關之組態的資訊，請參考內容洞察分析。


語法	參數	註釋
<ou-insights ...></ou-insights>	insightType="singleValue"	使用此屬性來指定要顯示的洞察分析類型。必須提供此屬性或洞察分析類別屬性。此屬性預期為依照上述單一值小節中所述語法的單一值。
	insightClass="singleValue"	使用某個洞察分析類別，來顯示與此類別相關之洞察分析群組的所有洞察分析類型。此屬性預期為依照上述單一值小節中所述語法的單一值。
	context="..."	(選擇性) 傳遞一或多個名稱/值組。語法依照上述複雜屬性資訊中顯示的範例。
	mode="preview"	(選擇性) 以預覽模式傳遞，指出基礎洞察分析演算法準備在預覽模式中呼叫洞察分析資料，但沒有可用的內容。在理想的情況下，該演算法會傳回範例資訊。
	class=" "	(選擇性) 提供 CSS 協助程式類別，以控制已轉譯之洞察分析的各個層面。受支援的值： class="card-full-width" - 適用於卡片洞察分析。使用此選項類別以確保卡片洞察分析的寬度會調整為包含該卡片洞察分析的區域寬度。未設定此參數的卡片洞察分析會使用固定寬度。

下列範例來自洞察分析預覽對應，其中的洞察分析類型就是內容中的洞察分析類型。不需要任何內容資料且模式為「預覽」。

<ou-insights insightType="x[insightType]" mode="preview"></ou-insights>

下列範例使用某個洞察分析類別，並傳遞 XPath 元素的內容值，搭配明確定義的內容名稱。

<ou-insights insightClass="C1CI" context="PER_ID:x[personId];ACCT_ID:x[accountId];PREM_ID:x[premiseId];"></ou-insights>

按鈕

按鈕 Web 元件支援系統內使用的標準按鈕格式集。


語法	參數	註釋
<ou-button...></ou-button>	type=”singleValue”	您必須定義要顯示的按鈕類型。此屬性預期為依照上述單一值小節中所述語法的單一值。有效的類型值為： image - 僅限影像 text - 僅限文字 imageText - 影像後面接著文字 menu - 文字加上可開啟功能表的下拉式列表插入號 imageMenu - 影像加上可開啟功能表的下拉式列表插入號如果未提供任何類型屬性，則會顯示「故障按鈕」影像。
	img=”singleValue”	定義要顯示的影像路徑。必須為包含影像的按鈕類型提供此屬性或影像參考屬性。此屬性預期為依照上述單一值小節中所述語法的單一值。請注意，對於 SVG 影像，如果參考只包含 SVG 檔案名稱而沒有路徑，則會假設該路徑為 Framework SVG 儲存庫。
	imgRef=”singleValue”	定義要使用之影像的顯示圖示參考。必須為包含影像的按鈕類型提供此屬性或影像屬性。此屬性預期為依照上述單一值小節中所述語法的單一值。
	text="..."	定義按鈕所需的各種文字元素。語法依照上述複雜屬性資訊中顯示的範例。有效的文字元素名稱值為： label - 要用於按鈕的標籤文字 tooltip - 要用於按鈕的動態顯示文字 aria-label - 按鈕的 ARIA 標籤
	menu=”singleValue”	定義要與按鈕搭配使用的功能表。必須為包含功能表控制的按鈕類型提供此屬性。此屬性預期為依照上述單一值小節中所述語法的單一值。
	disabled=”singleValue”	這是標準 HTML 屬性。值為 "true" 或只有 "disabled" 文字，會導致一開始就停用按鈕。
	security="..."	(選擇性) 定義按鈕的安全性設定。如果使用者沒有適當的安全性存取權，系統就會隱藏按鈕。語法依照上述複雜屬性資訊中顯示的範例。有效的安全性元素名稱值為： service - 其安全性存取權會控制按鈕存取權的應用服務 accessMode - 服務的特定存取模式，會決定更精細的按鈕存取層級
	clickAction="..."	(選擇性) 定義按鈕被「按一下」時要採取的動作。語法依照上述複雜屬性資訊中顯示的範例。該屬性有特定的 ‘name’ 值，如下所示： action - 要採取的動作。有效值為 ‘BPA’ 與 ‘NAVIGATE’ script - 當動作為 ‘BPA’ 時，要執行的指令檔 navopt - 當動作為 ‘NAVIGATE’ 時，要使用的導覽選項該屬性也可能包含其他名稱/值組，用於定義要傳遞給指令檔的資訊，或是作為導覽內容欄位。除了安全性屬性設定之外，系統在執行動作之前，會先檢查使用者是否有該指令檔或導覽路徑的存取權。標準的 HTML ‘onClick’ 屬性可能仍在使用。如果 HTML 包含 ‘onClick’ 屬性及 ‘clickAction’ 屬性，則 ‘onClick’ 屬性有較高的優先順序

以下是有文字的簡單按鈕範例。

<ou-button type="text" text="label:md[F1_BOOKMARK_LBL];"></ou-button>

以下是使用顯示圖示參考的圖示按鈕範例。

<ou-button type="image" imgRef="F1CMNT"></ou-button>

以下是影像功能表按鈕的範例。

<ou-button type="imageMenu" imgRef="F1STTGS" menu="CI_CONTEXTSCRIPT" text="tooltip:md[F1INSTY_VIS_LBL];></ou-button>

以下是會導覽至其他頁面的文字按鈕範例。

<ou-button type="text" text="label:md[ALG_CD];tooltip:md[GOTO_ALG]" clickAction="action:NAVIGATE; navopt:f1algqTabMenu; ALG_CD:x[algorithm];></ou-button>

新增時顯示結構預設值

如果內嵌 <action> 節點的值為 'ADD' 或空白，UI 對應之結構中的預設值會顯示在 UI 對應的輸入欄位中。


語法
<action>ADD</action>

<action> </action>

在下列範例中，系統會顯示 <description> 元素的結構預設值。

<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 的轉譯結果。

設定圖表

除了將圖表與區域整合之外，系統也支援在 UI 對應 HTML 中，使用相同的屬性來設定 XML 列表的圖形表示式。設計者可以使用這些屬性，控制圖表的類型、大小、位置及內容。如需屬性和語法的明細，請參考資料總管圖表組態。

圖表範例

圓餅圖組態的範例：

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

針對單一數列呈現的圓餅圖：

折線圖、叢集圖或堆疊圖組態的範例，其中每個圖表都有兩個數列：

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

針對兩個數列呈現的三種圖表類型 (折線圖、叢集圖及堆疊圖) ：

上傳及下載 CSV 檔案

下列 HTML 屬性可用來管理定義於對應結構中的列表與 CSV (逗號分隔值) 檔案之間的上傳及下載作業。請注意，此技術只建議用於小型至中型資料量 (例如不超過數百資料列)。對於更大量的資料，我們建議您改用批次上傳/下載的功能。

語法是 oraUploadData="type:embed;path:list xpath;useLabels:true;showCount:true"

對於上傳組態，您必須指定要上傳的 CSV 檔案，以及作為目標的 XML 列表。依照慣例，每個 CSV 資料列會建立個別列表實例。檔案中的每個以逗號分隔的欄位將會上傳作為列表中的個別元素。若要在對應中內嵌上傳對話方塊，oraUploadData 屬性必須要與容器元素相關聯，例如 div、td 或 span。

選擇性 useLabels:true 值指出，系統在剖析上傳的 CSV 檔案時，標頭應該為標籤。

備註：如果您沒有指定 useLabels:true 值，且 XML 目標元素的名稱為 "camelCase"，則對應的試算表標頭應該為字首大寫，且兩個字中間具有空格，例如 "Camel Case"。字母和特殊字元不會被視為不同的字，例如，必須將 Address1 上傳到目標 XML 元素 address1 中。

指定選擇性 showCount:true 值，系統就會顯示已上傳的記錄數。

警告：如果您將方格與 oraUploadData 函數一起使用，就必須使用「取代」業務物件動作來維護該方格的列表。如需詳細資訊，請參閱業務物件取代動作。

在 div 元素中的 oraUploadData="embed" 範例。

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

系統會將此檔案上傳對話方塊內嵌在定義 oraUploadData 之頁面本文中。

oraUploadData="type:popup;path:list xpath;useLabels:true;showOk:true;showCount:true"

對於上傳組態，您必須指定要上傳的 CSV 檔案，以及作為目標的 XML 列表。依照慣例，每個 CSV 資料列會建立個別列表實例。檔案中的每個以逗號分隔的欄位將會上傳作為列表中的個別元素。若要使用蹦現對話方塊上傳 CSV 檔案，oraUploadData 屬性必須與輸入元素相關聯，例如按鈕、文字連結或影像。

選擇性 useLabels:true 值可用來指出，系統在剖析上傳的 CSV 檔案時，標頭應該為標籤。

指定選擇性 showOk:true 值，系統就會在上傳完成時顯示「確定」按鈕。蹦現視窗會保持開啟，直到使用者按下該按鈕為止。此外，指定 showCount:true 值，系統就會顯示已上傳的記錄數。

警告：如果您將方格與 oraUploadData 函數一起使用，就必須使用「取代」業務物件動作來維護該方格的列表。如需詳細資訊，請參閱業務物件取代動作。

與按鈕相關聯之 oraUploadData="popup" 的範例：

<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 的轉譯結果：

按「Get Data」按鈕時，將會啟動標準檔案上傳對話方塊 (由架構提供)，如下所示。

oraDownloadData="list xpath"

對於下載組態，您必須指定要下載的 XML 列表。依照慣例，每個列表實例代表所建立檔案中的個別資料列。根據預設，列表中的每個元素在檔案中都會以逗號分隔。

備註：數字格式設定是根據使用者設定檔設定。對於小數點符號為逗號的地區，實作可設定特性設定 (spl.csv.delimiter.useFromDisplayProfile=true)，讓系統使用分號 (而非逗號) 作為分隔元素的分隔符號。

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 的轉譯結果：

按下「Download」按鈕時，將會啟動標準檔案下載對話方塊 (由架構提供)，如下所示。

成功的下載作業將會產生 CSV 檔案：

若要從子列表下載資料，請使用屬性 oraDownloadDataInList，而非 oraDownloadData。屬性 oraDownloadDataInList 將會有子列表名稱。子列表的 XPath 用來從上階列表選取特定資料列的資料。因此，系統只會下載特定的子列表。

oraDownloadDataUseLabels="true"

屬性 oraDownloadDataUseLabels 可與上述的屬性 oraDownloadData 一起使用。如果您想要所產生的 CSV 檔案使用資料欄標頭的元素標籤 (而非元素名稱)，請指定 oraDownloadDataUseLabels。

建構入口區域對應片段

入口區域可以參考區域標頭和篩選區域的 UI 對應。此 UI 對應不是完整的 HTML 文件，而是被設定為 UI 對應片段。建構區域對應片段時，您可以參考下列的替代變數。請注意，系統將會在執行階段中，以動態的方式為這些變數植入該區域在入口中之區域特有的資訊：


變數	取代邏輯
[$ZONEDESCRIPTION]	區域的描述文字。
[$SEQUENCEID]	區域的順序 ID。
[$ZONENAME]	區域的名稱。
[$HELPTEXT]	區域的說明文字。
[$ZONEPARAMNAME]	區域參數的值 (如果未指定的話則為空白)。

警告：

請參閱下列其中一個對應來作為範例：F1-UIMapHeader 與 F1-ExplorerHeader。
這些對應會利用 oraInclude 標記來納入標頭功能表和架構動作的 HTML 片段。請參閱區域類型參數，以取得您應該要納入 HTML 的 UI 對應片段。
如果您想在區域描述的旁邊顯示「說明文字」圖示，您應該在包含該描述的 <td> 中有 id="title_[$SEQUENCEID]"。
如有必要在 UI 對應片段中封裝 JavaScript，則必須將其繫結在 ![CDATA[ ]] 標記中，以確保 XML 文件有效。請注意，標記本身可能需要加上註釋，以提升與較舊瀏覽器的相容性。例如：
```
<script type="text/javascript">

/*<![CDATA[ */

//
//javascript
//
/*]]> */
</script>
```

備註：如果您想要針對架構的「返回」及「往前」功能，保留篩選對應片段中篩選輸入欄位的值，您必須將輸入欄位 (文字方塊、選取等) 與唯一的 HTML ID 相關聯。系統會將與唯一 ID 相關聯的輸入值擷取在架構的 'memento' 中。使用「返回」或「往前」功能來導覽至入口區域時，系統會使用該 'memento' 來重新建立輸入對應。

備註：有許多特殊函數可用來操作區域行為，例如：

oraGetZoneSequence(zoneName)。使用區域的代碼來擷取其序號。
oraIsZoneCollapsed(sequenceId)。使用區域的順序來判斷該區域是否已收合。
oraHandleCollapse(seq)。收合區域。
oraHandleExpand(seq,refresh)。展開與/或重新整理區域。

您可以在下方所述的 JavaScript 程式庫 userMapSupport.js 中找到所有這些函數以及其他函數。

備註：執行片段 UI 對應中的 oraLoad，且需要在頁面載入期間執行 JavaScript 函數 (函數會叫用業務物件、業務服務或業務指令檔)，您可以使用特殊語法 "oraLoad[$SEQUENCEID]"。如需詳細資訊，請參閱載入頁面事件區段。

在函數中使用 oraLoad[$SEQUENCEID] 的範例

<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 的轉譯結果：

叫用業務物件

您可以在入口區域標頭或區域篩選對應中使用 oraInvokeBO 函數。它與在叫用業務物件函數中所述的指令類似，可讓您在 UI 對應的 HTML 中叫用業務物件。請參閱該區段以取得前三個參數的描述。


語法	參數	註釋
oraInvokeBO( )	'業務物件名稱'
	'XPath' 或 null
	'動作'
	null	這必須指定為第四個引數。
	[$SEQUENCEID]	這必須指定為第五個引數。
	true \| false	當您要在入口區域標頭中使用片段時，請指定 true。當您要在區域篩選對應中使用片段時，請指定 false。

在入口區域標頭中的範例：

oraInvokeBO('CM-User','xmlGroup','read', null, [$SEQUENCEID], true)

叫用業務服務

您可以在入口區域標頭或在區域篩選對應中使用 oraInvokeBS 函數。它與在叫用業務服務函數區段中所述的指令類似，可讓您在 UI 對應的 HTML 中叫用業務服務。請參閱該區段以取得前兩個參數的描述。


語法	參數	註釋
oraInvokeBS( )	'業務物件名稱'
	'XPath' 或 null
	null	這必須指定為第四個引數。
	[$SEQUENCEID]	這必須指定為第五個引數。
	true \| false	當您要在入口區域標頭中使用片段時，請指定 true。當您要在區域篩選對應中使用片段時，請指定 false。

在入口區域標頭中的範例：

oraInvokeBS('CM-UserSearch','xmlGroup', null, [$SEQUENCEID], true)

叫用服務指令檔

您可以在入口區域標頭或在區域篩選對應中使用 oraInvokeSS 函數。它與在叫用服務指令檔函數區段中所述的指令類似，可讓您在 UI 對應的 HTML 中叫用服務指令檔。請參閱該區段以取得前兩個參數的描述。


語法	參數	註釋
oraInvokeSS( )	'服務指令檔名稱'
	'XPath' 或 null
	null	這必須指定為第四個引數。
	[$SEQUENCEID]	這必須指定為第五個引數。
	true \| false	當您要在入口區域標頭中使用片段時，請指定 true。當您要在區域篩選對應中使用片段時，請指定 false。

在入口區域標頭中的範例：

oraInvokeSS('UserSearch','xmlGroup', null, [$SEQUENCEID], true)

偵測未儲存的變更

請使用此函數，以便在出現未儲存的變更時傳回設定為 True 的布林值。系統會在使用者嘗試導覽時調查該函數，並視調查結果發出警告。只有在 UI 對應使用自訂 JavaScript 來管理元素，導致系統無法偵測是否已做出變更時，才需要使用此函數。另請注意，UI 對應 JavaScript 負責管理此函數所用的布林值。

function hasUnsavedChanges(){
       return isDirtyFlag;
   }

隱藏入口頁籤

產品可讓您利用 oraAuthorizeTab JavaScript API，根據某些條件使用 JavaScript 隱藏目前入口上的頁籤。此 API 會接收函數作為參數，並關閉指定的頁籤索引。

例如，UI 對應可以有關閉一或多個頁籤索引的函數。

function overrideTabIndex(index){
    if (index == 2) return false;
    if (index == 3) return false;
  }

系統會在「載入時」參考 JavaScript：

<body class="oraZoneMap"
onLoad="oraAuthorizeTabs(overrideTabIndex);">

必要的 JavaScript 程式庫

本文件中所述的所有功能都取決於兩個 JavaScript 程式庫。如果您完全是在 UI 對應轉譯架構中編寫及執行自己的對應，就不需要手動插入下列程式庫，因為架構會在轉譯 UI 對應時為您插入程式庫。

警告：執行不在架構中的 HTML 時，您必須在 HTML 中明確包含下列參考。此外，您用來轉譯 HTML 的工具必須可存取 privateUserMapSupport.js 的實體副本，才能獲得繫結支援。

src="privateUserMapSupport.js"

HTML 文件必須參考此程式庫，才能在獨立環境中執行繫結。

警告：參考此 JavaScript 程式庫中的函數非常危險，因為這些函數由架構所擁有，並可能會在版本升級期間或透過一般的修補程式處理而有所變更。

<script type="text/javascript" src="privateUserMapSupport.js"></script>

src="userMapSupport.js"

若要利用選用的工具組功能，您必須參考此程式庫。

請注意：您可以參考此 JavaScript 程式庫中的函數，以在 UI 對應中編寫自訂函數。

<script type="text/javascript" src="userMapSupport.js"></script>

onload="oraInitializeUserMap();"

若要在獨立環境中執行繫結，您必須將下列的 onload 函數內嵌到 <body> 節點中。

<body onload="oraInitializeUserMap();">