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

[Yass]

Hello,

On case form, I need to show an icon beside asset field only if the asset is hosted.

I want to do this functionality in UI Macro without using DOM Manipulation.

Any Idea?

Jelly is not my speciality so help will be appreciate!

Thanks

[Yass]

Hello,

I did the following 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="some_macro_${ref}"/>
	<span id="${jvar_n}" title="Hosted Asset" alt="Hosted asset" class="btn btn-ref btn-default" style="background-image: url('hosted_asset.png');background-repeat: no-repeat;background-position: 50% 7px;">
	</span>
	<script>
		function showHideMacro(asset) {
			var elementToShowOrHide = 'sn_customerservice_hosted_asset';
			var elementToShowMacroOn = 'asset';
			
			// Get the macro
			var myMacro = $(elementToShowOrHide);
			
			//Check for asset hosted status
			if(asset.u_hosted == true){
				// Get the element that to move the macro around
				var assetField = $(elementToShowMacroOn);
				
				// Make Visable
				myMacro.style.visibility = "visible";
			} else {
				// Hide the macro
				myMacro.style.visibility = "hidden";
			}
		}
	</script>
	<script>
		addLoadEvent( function() {
			g_form.getReference('asset', showHideMacro);
		});
	</script>
</j:jelly>

But this UI Macro doesn't work.

I am not able to retrieve the element in "elementToShowOrHide" on line 8.

I put the name of my UI Macro "sn_customerservice_hosted_asset" (from API Name field) in this variable but it's not working.

Someone can tell me what I need to put into this variable?

Regards,

Yass

[Yass · Accepted solution]

Hello,

I did it in 4 steps : 

1- Create UI Macro in order to show or hide an icon if the asset selected on case form is hosted (only when the case form is loaded)

 The UI macro API Name is "sn_customerservice_hosted_asset" and the UI Macro name is "hosted_asset" (CSM application)
 

<?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>
	<j:set var="jvar_n" value="macro_show_hide_${ref}"/>
	<span id="${jvar_n}" title="Hosted Asset" alt="Hosted asset" class="btn btn-ref btn-default hide_hosted_asset_flag" style="background-image: url('hosted_asset.png');background-repeat: no-repeat;">
	</span>
	<script>
		function showHideMacro(asset) {
			
			// Get the macro
			var elementToShowOrHide = 'macro_show_hide_${ref}';
			var myMacro = $(elementToShowOrHide);
			
			//Check for asset hosted status
			var assetHostedStatus = asset.u_hosted;
			if(assetHostedStatus == 'true'){
				// Show the Macro
				$('${jvar_n}').removeClassName('hide_hosted_asset_flag');
				$('${jvar_n}').addClassName('show_hosted_asset_flag');
			}
		}
	</script>
	<script>
		addLoadEvent( function() {
			g_form.getReference('asset', showHideMacro);
		});
	</script>
</j:jelly>

2- Add the Attribute "reference contrbutor" in asset field

 Use the API Name of the UI Macro

ref_contributions=sn_customerservice_hosted_asset;

3- Create an on change client script in order to show or hide an icon if the asset selected on case form is hosted

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

function showHideMacro(asset) {
	
	// Get the macro
	var elementToShowOrHide = 'macro_show_hide_sn_customerservice_case.asset';
	var myMacro = $(elementToShowOrHide);
	
	//Check for asset hosted status
	var assetHostedStatus = asset.u_hosted;
	if(assetHostedStatus == 'true'){
		// 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";
	}
}

4- Create a specific style for asset field when the asset visible in the case list is hosted

 

Hope that might help someone!

Regards,

Yass