This is the third article in series to create the UI Map in Oracle Utilities. In Previous two article we have seen that how to create the Business Service, Data Area and Service Program.
Navigate to “Admin Menu | U | UI Map +“. Give the UI Map Name as “CM_PERINPUT” and select “UI Map Type” = Complete HTML Document.
Now go to Schema Tab and in bottom section add below schema:
<schema>
<pNameSearch type="group">
<includeBS name="CM_PERSER"/>
</pNameSearch>
</schema>
In above schema, we have included the Business Service “CM_PERSER” by using tag <includeBS>.
In this way our UI Map will get the Schema of our “Business Service” which has all the definition about which should go to header part and which should go to body part.
Now to generate the HTML you can use “Generate HTML” feature which have options to generate “Display only UI” or “Input UI” as per shown in below image.
I used the “Input Map” and then customized. Following is the complete code.
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="cisDisabled.css" type="text/css" rel="stylesheet">
<link href="cisEnabled.css" type="text/css" rel="stylesheet">
<script language="javascript" type="text/javascript">
function validateEnterKey(e, htmlElement){
var characterCode;
if(e && e.which){ //if which property of event object is supported (NN4)
e = e;
characterCode = e.which; //character code is contained in NN4's which property
}
else{
e = event
characterCode = e.keyCode; //character code is contained in IE's keyCode property
}
if(characterCode == 13){ //if generated character code is equal to ascii 13 (if enter key)
return true; //Detected enter key press event
}
else{
return false;
}
}
function searchByPName()
{
oraInvokeBS('CM_PERSER','pNameSearch' );
showResults();
}
function showResults(){
document.getElementById('resultTable') .style.display="inline";
}
</script>
</head>
<body oraError="automate:true; prefix:boGroup">
<table cellpadding="12" width="100%">
<tr class="oraErrorText">
<td><a onclick="oraShowErrorAlert(); return false;" href=""><span oraErrorVar="ERRMSG-TEXT" class="oraErrorText"></span></a></td>
</tr>
</table>
<table cellspacing="4" width="100%">
<colgroup>
<col class="oraLabel oraTableLabel">
<col class="oraNormal oraTableData">
</colgroup>
<tr>
<td>Search Person </td>
<td><input class="oraInput" oraField="pNameSearch/pageHeader/personName" id="serPer" onKeyDown="if(validateEnterKey(event,this)){searchByPName();};">
<img src="images/runSearch.gif" onclick="searchByPName()"/>
</td>
</tr>
<tr>
<td class="oraEmbeddedTable oraSectionEnd" colspan="2">
<div class="oraGridDiv">
<table cellspacing="2" style="display:none" oraList="pNameSearch/pageBody/PerNameList" id="resultTable" onResize="if (this.clientWidth > this.parentNode.clientWidth) { this.parentNode.className += ' oraGridDivScroll';};">
<thead>
<tr>
<th nowrap oraLabel="entityName" class="oraGridColumnHeader"></th>
</tr>
</thead>
<tbody>
<tr>
<td oraField="entityName" class="oraNormal oraDisplayCell"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</body>
<xml style="display:none;"></xml>
</html>
Now, look into the below java script function which I have added In above code:
function searchByPName()
{
oraInvokeBS('CM_PERSER','pNameSearch' );
showResults();
}
oraInvokeBS is the Utility java script method provided by the CC&B / ORMB which invokes the Business Service. First Parameter is the “Business Service Name” and second parameter is the xpath value from where the output of Business service (Java Program) should be copied.
Click on save button to save the UI Map.
To check the UI and working of UI Map, go to Main tab and click on “Test UI Map”.
Following output will be shown:
Leave a Reply