Hiding a UI Macro based on Field Data

[ewok]

I have created the following UI Macro that displays on a particular field in a form. The macro works great and provides the custom link to a 3rd party website and appends the field data onto the button link. However I want to hide the button if the data in a specific field is null. I have tried a few things based on some searching such as a Jelly If statement and even some if statements in the script section of this UI Macro. However none have proved to be successful. Any Suggestions? I am running Kingston Patch 4 currently. 

---Current UI Macro---

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:set var="jvar_n" value="ip_rep_${ref}"/>
<span id="${jvar_n}" onclick="ip_rep('${ref}')" title="IP Reputation" alt="IP Reputation" tabindex="0" class="btn btn-default icon-search">
<span class="sr-only">IP Reputation</span>
</span>
<script>
function ip_rep(reference){
window.open('https://www.talosintelligence.com/reputation_center/lookup?search=' + encodeURI(g_form.getValue('u_source_ip_s')));
}
</script>
</j:jelly>

----Jelly IF-----

<j:if test="${u_source_ip_s != null}">
<j:set var="jvar_n" value="ip_rep_${ref}"/>
<span id="${jvar_n}" onclick="ip_rep('${ref}')" title="IP Reputation" alt="IP Reputation" tabindex="0" class="btn btn-default icon-search">
<span class="sr-only">IP Reputation</span>
</span>
</j:if>

----Script IF----

function ip_rep(reference){
if (g_form.getValue('u_source_ip_s') != null){
window.open('https://www.talosintelligence.com/reputation_center/lookup?search=' + encodeURI(g_form.getValue('u_source_ip_s')));
}
}

[Paul Curwen]

Hi,

Have a look here, you can hide your UI Macro using client script, check the value of the field and if it meets the condition, then hide the UI MAcro using DOM manipulation (Not Service Portal Compatible): 

https://community.servicenow.com/community?id=community_question&sys_id=e252d761db101fc01dcaf3231f96...

Regards,

Paul. 

[ewok]

I attempted to create a client script as follows to try and hide the UI Macro without success. 

function onLoad() {
//Type appropriate comment here, and begin script below
gel("ip_rep_src_ip").style.display = "none" ;
}

I tried adding the HTML ID value to the jelly set,  j jelly and the span section of my UI Macro that matches what i have added to the client script. I have also loaded up the source of my page and didn't see the HTML ID for my macro. 

Needless to say it never successfully hides the UI Macro in my testing. Any tips?

[Ankit P]

Hi,

Your condition is similar to one of the existing UI Macro. Please see the out of the box UI Macro "show_related_records". The code resides in the UI Macro itself. No need of Client Script or UI Action.

[ewok]

I have reviewed the  show_related_records UI Macro. I have pasted that UI Macro below. It is rather large and of course ServiceNow hasn't commented anything. I have attempted to review and try to pick out exactly what is hiding the UI Macro. It seems that the e.hide(); is being used to hide the macro. I have been able to place that into my UI Macro and hide my macro. What I am now struggling with is my if condition. I have tried to copy and adjust the if statement in the OOB Macro but it doesn't seem to be functioning properly. Additionally i haven't found a good way to debug things with a UI Macro any tips you have related to that would be helpful too. 

Here is my if statement. 

var e = $('${jvar_n}');
src_ip = g_form.getValue('u_source_ip_s');
if (src_ip == null){
e.hide();
}

--show_related_records UI Macro----

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:set var="jvar_n" value="show_related_tasks_${ref}"/>
<g2:evaluate var="jvar_show_tasks_display" jelly="true">
var id = __ref__.getSysIdValue();
if (id == null)
"none";
else {
var ga = new GlideRecord('task_ci');
ga.addQuery('ci_item', __ref__.getSysIdValue());
ga.addQuery('task', '!=', jelly.sys_id);
ga.addQuery('task.active', true);
ga.setLimit(1);
ga.query();
if (ga.next())
"";
else
"none";
}
</g2:evaluate>

<a id="${jvar_n}"
onclick="showTasksDialog('${ref}')"
name="${jvar_n}"
style="display:$[jvar_show_tasks_display]"
title="${gs.getMessage('Show other active tasks affecting this CI')}">
<img border="0" src="images/warning.gifx" />
</a>

<script>
needsRefresh = false;
function onChange_cmdb_ci_show_related(element, original, changed, loading) {
if (needsRefresh == false) {
needsRefresh = true;
return;
}
if (changed.length == 0) {
$('${jvar_n}').hide();
return;
}
var ga = new GlideAjax('ShowRelatedTasksAjax');
ga.addParam('sysparm_name', 'getRelatedTaskCount');
ga.addParam('sysparm_ci', g_form.getValue('${ref}'));
ga.addParam('sysparm_task', g_form.getUniqueValue());
ga.getXML(relatedTaskReturn);
}

function relatedTaskReturn(response) {
var answer = parseInt(response.responseXML.documentElement.getAttribute("answer"));
var e = $('${jvar_n}');
if (answer > 0)
e.show();
else
e.hide();
}

var h = new GlideEventHandler('onChange_incident_cmdb_ci_show_related', onChange_cmdb_ci_show_related, '${ref}');
g_event_handlers.push(h);

function showTasksDialog(reference){
var v = g_form.getValue(reference);
var w = new GlideDialogWindow('show_list');
w.setTitle(getMessage('Other active tasks affecting this Configuration Item'));
w.setPreference('table', 'task_list');
w.setPreference('sysparm_view', 'default');
w.setPreference('sysparm_query', "active=true^sys_id!=" + g_form.getUniqueValue() + "^SUBQUERYsys_id,task,task_ci^ci_item=" + v + "^ENDSUBQUERY^GROUPBYsys_class_name");
w.render();
}
</script>
</j:jelly>