h
ow to create new UI page , i want script , and how to create UI action button also ,
please help me on this
thanks
Hi,
You can create a UI Action on any Form or Table and then on click of the UI action I am going to show you how to call a UI Page.
For example, I have created a Ui action named "Community UI Page Help" on the Incident table and on click of that UI action I am displaying a UI Page which has only One Field as of now and two buttons "OK" and "Cancel". On selection of any o those buttons an operation happens on the Incident form which is explained below.
Follow the steps mentioned below:
- Create the Field or use the field which you want to display in your UI Page.
- Create the UI action with code as mentioned below:
function showPage(){
var gdw = new GlideDialogWindow('community_ui');
gdw.setSize(750,300);
gdw.setPreference('table_name', g_form.getTableName());
gdw.render();
}
Next thing is to create the UI Page which will be called on hit of this UI action. In my example UI Page name is "community_ui" as called in UI action in Line 2.
You can refer the code below which is documented to understand on what is being done:
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate>
var tableName = RP.getWindowProperties().get('table_name'); // Getting the Target Table Name for which the operation needs to be done
tableName;
</g:evaluate>
<g:evaluate>
var choices = new GlideRecord('sys_choice'); //Querying the choice table to get the values which needs to be displayed in the Dialog Box
choices.addQuery('name', tableName);
choices.addQuery('element', 'u_choice_type'); //Give your Field Name created which needs to be displayed in the UI Page which opens on click on UI action
choices.addQuery('inactive', false);
choices.orderBy('sequence');
choices.query();
choices;
</g:evaluate>
<table style="margin:20px 10px;"> //Give your CSS Styles as required
<tr>
<td>
<label for="inc_cause"> Incident Cause</label>
</td>
<td>
<select id="inc_cause">
<option value="" selected="selected">-- None --</option>
<j:while test="${choices.next()}">
<option value="${choices.value}">${choices.label}</option>
</j:while>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;padding-top:10px;">
<button class="btn btn-default" onclick="closeWindow()" style="margin-right:10px;">Cancel</button>
<button class="btn btn-primary" onclick="update_ticket()">Ok</button>
</td>
</tr>
</table>
</j:jelly>
Client Script:
gel('inc_cause').value = g_form.getValue('u_choice_type');
//If OK Button is pressed then this functionis called as defined in HTML Line Number 34
function update_ticket(){
var abc = gel('inc_cause').value;
g_form.setValue('short_description',abc);
g_form.save();
GlideDialogWindow.get().destroy();
}
//If Cancel is pressed then this functionis called as defined in HTML Line Number 33
function closeWindow() {
GlideDialogWindow.get().destroy();
}
Below are images for the same.
If you want to learn more on Jelly Script or how to wrote UI Pages would strongly recommend to go through Tech Now episodes hosted by Chuck Tomasi available on you tube. Below are links for the same:
https://www.youtube.com/watch?v=_MhWugMQegs
https://www.youtube.com/watch?v=Td7t_tiehzY
https://www.youtube.com/watch?v=gPy5xkks0tA
Hope this help. Please mark the answer as helpful/correct based on impact.
Regards,
Shloke
