Hide UI Macro

[Abdul Musavvir]

Hi Everyone,

I have created a UI macro to open Teams chat. Need to hide this UI macro based if the field value is empty. I have written something like below, however its not working .

Can anyone suggest how I can acheive this.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core"
xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<a class="btn-default;" id="${jvar_n}" onclick="invokeChat('${ref}');">
              <img src="teams.png" width="30"  title="Teams Chat" alt="${gs.getMessage('Click to open Teams chat')}" />
</a>
    <span onChange="onChange('${ref}')"></span>
<script>
    function onChange(element, original, changed, loading) {
var visibility = 'visible';
var sysID = g_form.getValue('caller_id');
if (!sysID)
visibility = 'hidden';

var e = gel('${jvar_n}');
e.style.visibility= visibility;
}
    
function invokeChat(reference) {

var prefix = 'https://teams.microsoft.com/l/chat/0/0?users=';
var firstname = g_form.getReference('caller_id').first_name;
var user = g_form.getReference('caller_id').email;
var subject = '&amp;amp;message=Hi ' + firstname + ', this is regarding your Incident ' + g_form.getValue('number') + ': ' + g_form.getValue('short_description');

var w = getTopWindow();
var url = prefix + user + subject;
w.open(url);
}
</script></j:jelly>

Thanks in Advance.

Abdul

[Ankur Bawiskar]

@Abdul Musavvir 

this link has the solution

Hide / Show UI Macro on Case Form based on field data

Regards
Ankur

[Ankur Bawiskar]

@Abdul Musavvir 

Did you get a chance to check the link I shared yesterday?

Regards
Ankur

[Abdul Musavvir]

I did tried that, and I'm not able to make it.

I have written something like below

Jelly:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core"
xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<style>
		.hide_hosted_asset_flag {
			visibility: hidden;
			position: absolute;
			left: -1000px;
		}
		.show_hosted_asset_flag {
			visibility: visible;
			background-position: 50% 7px;
		}
	</style>
	<g2:evaluate var="jvar_caller" jelly="true">
        var caller = '';
            caller = current.caller_id.getDisplayValue();
        if(caller != ''){
        caller="true";
		}
		caller;
    </g2:evaluate>
	<j:if test="${jvar_caller}">
<a class="btn-default;" id="${jvar_n}" onclick="invokeChat('${ref}');">
              <img src="teams.png" width="30"  title="Teams Chat" alt="${gs.getMessage('Click to open Teams chat')}" />
</a>
	</j:if>
<script>
function invokeChat(reference) {

var prefix = 'https://teams.microsoft.com/l/chat/0/0?users=';
var firstname = g_form.getReference('caller_id').first_name;
var user = g_form.getReference('caller_id').email;
var subject = '&amp;amp;message=Hi ' + firstname + ', this is regarding your Incident ' + g_form.getValue('number') + ': ' + g_form.getValue('short_description');

var w = getTopWindow();
var url = prefix + user + subject;
w.open(url);
}
</script></j:jelly>

Here if statement not working.

Client Script:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
	
	if (!newValue) {
		// Hide the UI Macro
		var elementToShowOrHide = 'teams_chat';
		var myMacro = $(elementToShowOrHide);
		myMacro.style.visibility = "hidden";
		myMacro.style.position = "absolute";
		myMacro.style.left = "-1000px";
		return;
	}
	g_form.getReference('caller_id', showHideMacro);
}

function showHideMacro(caller_id) {
	
	// Get the macro
	var elementToShowOrHide = 'teams_chat';
	var myMacro = $(elementToShowOrHide);
	
	//Check for asset hosted status
	var email = caller_id.email;
	if(email != ''){
		// Show the macro
		myMacro.style.visibility = "visible";
		myMacro.style.position = "static";
	} else {
		// Hide the macro
		myMacro.style.visibility = "hidden";
		myMacro.style.position = "absolute";
		myMacro.style.left = "-1000px";
	}
}

I got below error

[Roman Haas]

The error gives you a pretty good hint where the problem is 🙂

This line in your client scripts seems strange to me:

var myMacro = $(elementToShowOrHide);

I guess you wanted to get the JQuery object for this DOM object. I think you need to use $j in a client script to access JQuery. And you also need to make sure that the field "isolate_script" is set to "false" in order to access the DOM at all.

Try this line of code (unfortunately, I could not test it due to my PDI being offline):

var myMacro = $j(elementToShowOrHide);

Another small suggestion: Why do you save the string "teams_chat" in a variable? I would definitely do that if I would use it more than once. But in your code example you only use that string once, so why not just write it directly?

var myMacro = $j('teams_chat');

I like to make guard clauses to not run into errors:

var myMacro = $j('teams_chat');

if(!myMacro){ return; }

//do all the stuff you want to do if the script found the DOM object.