Create UI Macro Button next to Priority Field and display a text explaining the Priority values

[Hari7]

Hello All,

I want to create UI Macro Button next to Priority Field (like the below image) and display a text explaining the Priority values 1,2,3,4. Priority field is an OOB field from task and used on the story table. Request you to help on the UI Macro on how to build this. 

[AnveshKumar M · Accepted solution]

Hi @Hari7 ,

Follow along to get your requirement.

UI Page:

Create a UI Page as below,

name: priority_info_ui_page

Script:

<?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="jvar_loc_name" jelly="true">

<div>
<b>P1:</b> <p>Your explaination</p>
<b>P2:</b> <p>Text for P2</p>
<b>P3:</b> <p>Text for P3</p>
<b>P4:</b> <p>Text for P4</p>
</div>
</j:jelly>

Create a UI Macro (System UI -> UI Macros -> New):

create an UI Macro as below.

Name: priority_info_button

Script: 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<span id="u_priority_info_button" onclick="showPriorityInfo()" title="Priority info" alt="Priority Info" tabindex="0" class="btn btn-default icon-comment">

      <span class="sr-only">Priority info</span>

</span>

<script type="text/javascript">
function showPriorityInfo(){
var gm = new GlideModal("priority_info_ui_page");
gm.setTitle("Priority information");
gm.setWidth(400);
gm.render();
}
</script>
</j:jelly>

Add it to the Priority Field:

Now we have to attach this UI Macro to the Priority field.

1. Right click on Priority field label and select "Configure Dictionary"

2. If you couldn't see Attributes field In the dictionary form opened, click on Advanced View related link at the page bottom.

3. If the field doesn't have any attributes adde just past this "ref_contributions=priority_info_button". If there are attributes already present just add a , at the end paste the above string.

[Hari7]

Hi @AnveshKumar M ,

Thank you for taking time in helping me out on this.  I have followed the steps and I was able to see the icon next to the field but when I click on the icon, I dont get the text from the UI Page passed. Please find the below screenshot for your reference. 

[AnveshKumar M]

Hi @Hari7

Try this code in UI Page.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<div>

<b>P1:</b> <p>Your explaination</p>

<b>P2:</b> <p>Text for P2</p>

<b>P3:</b> <p>Text for P3</p>

<b>P4:</b> <p>Text for P4</p>

</div>

</j:jelly>

Please mark my answer helpful and accept as solution, if it helped you.

[Kartik Gopal]

This code is working for me. Only thing missing is the closing </g:evaluate> on Line #3 of the UI Page

<?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="jvar_loc_name" jelly="true"></g:evaluate>

<div>
<b>P1:</b> <p>Your explaination</p>
<b>P2:</b> <p>Text for P2</p>
<b>P3:</b> <p>Text for P3</p>
<b>P4:</b> <p>Text for P4</p>
</div>
</j:jelly>