show/hide widget based on condition

Hafsa1
Mega Sage

I have added widget "sp-variable-editor" to portal page as below. But I want this to be visible only for those cases whose (u_invoice="invalid"), for rest other cases this widget should not be visible. what changes to be done in this widget?

Hafsa1_0-1736512354620.png

 

1 ACCEPTED SOLUTION

Ankur Bawiskar
Tera Patron
Tera Patron

@Hafsa1 

here is the updated code

Client controller: no change

HTML: I have included 1 more div at the beginning and used a flag to show/hide it based on value from server side

<div ng-if="showWidget">
<div ng-class="{'panel panel-default': !data.hide_container}" ng-if="::c.hasVariables(data.sc_cat_item._fields) && !c.options.isServiceWorkspace">
  <div class="panel-heading" ng-if="!data.hide_container">
    <h3 ng-if="data.itemTitle" class="panel-title">{{data.itemTitle}}</h3>
    <h3 ng-if="!data.itemTitle" class="panel-title">{{data.vEditorLabel}}</h3>
  </div>
  <div ng-class="{'panel-body': !data.hide_container, 'variable-editor': data.hide_container}">
    <sp-model form-model="::data.sc_cat_item" mandatory="[]"></sp-model>
  </div>
  <div ng-if="c.showSave && c.options.readonly_variable_editor != 'true'" class="panel-footer">
    <button class="btn btn-primary pull-right" name="save" ng-click="c.save()">${Save}</button>
    <span ng-if="validating" style="padding-left:4px">${Validating...}</span>
	  <div style="clear: both;"></div>
  </div>
</div>
<div class="workspace-variables" ng-if="::c.hasVariables(data.sc_cat_item._fields) && c.options.isServiceWorkspace">
  <div class="variables">
    <sp-model form-model="::data.sc_cat_item" mandatory="[]"></sp-model>
  </div>
  <div ng-if="c.showSave && c.options.readonly_variable_editor != 'true'">
    <button class="btn btn-primary pull-right" name="save" ng-click="c.save()">${Save}</button>
    <span ng-if="validating" style="padding-left:4px">${Validating...}</span>
	  <div style="clear: both;"></div>
  </div>
</div>
<div ng-if="::!c.hasVariables(data.sc_cat_item._fields)">
  <h4 class="text-a-c">
    {{::c.data.msg}}
  </h4>
</div>
<now-message key="Variable saved" value="${Variable saved}"></now-message>
</div>

Server Script: Changes are done by adding a new line, ensure you add correct field name and value to compare

(function() {
	data.table = options.table || $sp.getParameter("table");
	data.sys_id = options.sys_id || $sp.getParameter("sys_id") || $sp.getParameter("sl_sys_id");
	data.msg = gs.getMessage('There are no variables associated');
	data.hide_container = options.hide_container;
	data.vEditorLabel = gs.getMessage('Variables');
	if (input) {
		var vars = [];
		var fields = input.sc_cat_item._fields;
		data.sys_id = input.sys_id;
		data.table = input.table;
		if (!data.table || !data.sys_id)
			return;

		var values = getValues(data.table, data.sys_id);
		for (var v in fields) {
			// 12: Break, 19: Container Start, 20: Container End, 24: Container Split
			if (values[f].type == 12 || values[f].type == 19 || values[f].type == 20 || values[f].type == 24)
					continue;
			vars.push(fields[v]);
		}

		if (data.table == "sc_cart_item")
			SPCart.updateItem(input.sys_id, vars);
		else
			$sp.saveVariables(input.table, input.sys_id, vars);
		return;
	}
	
	if (!data.table || !data.sys_id) {
		return;
	}

	var gr = $sp.getRecord(data.table, data.sys_id);
	if (gr.isValid() && gr.canRead()) {
		data.showWidget = gr.u_invoice == 'invalid' ? true: false;
		var targetTable = data.table;
		if (targetTable == "sc_cart_item")
			targetTable = "sc_cat_item";
		var req_id = "";
		var task_id = "";
		var sys_id = "";
		var table_id = "";
		var opened_by= "";
		if(data.table == 'sc_task') {
			req_id = gr.request_item.getValue();
			task_id = data.sys_id;
			sys_id = gr.request_item.cat_item.getValue();
			opened_by = gr.opened_by.getValue();
		} else if(data.table == 'sc_req_item') {
			req_id = data.sys_id;
			sys_id = gr.cat_item.getValue();
			opened_by = gr.opened_by.getValue();
		} else if(data.table == 'sc_cart_item') {
			sys_id = gr.cat_item.getValue();
			req_id = gr.getUniqueValue();
		} else if (gr.instanceOf("task")) {
			targetTable = data.table;
			table_id = data.sys_id;
			opened_by = gr.opened_by.getValue();
			var catItemProducedGr = new GlideRecord("sc_item_produced_record");
			catItemProducedGr.addQuery("record_key", data.sys_id);
			catItemProducedGr.query();
			if (catItemProducedGr.next())
				sys_id = catItemProducedGr.getValue("producer");
		} else {
			sys_id = gr.request_item.cat_item.getValue();
		}
		var filter = {
			sys_id : String(sys_id),
			request_id : String(req_id),
			task_id : String(task_id),
			table: String(targetTable),
			table_id: String(table_id),
			opened_by : String(opened_by)
		};
		if (gr.isValidField("variables"))
			data.vEditorLabel = gr.getElement("variables").getLabel();
		data.sc_cat_item = $sp.getCatalogItem(filter);
		if (options.showItemTitle)
			data.itemTitle = data.sc_cat_item.short_description;
		var values = {};
		if (data.table == 'sc_task' || data.table == 'sc_req_item' || data.table == 'sc_cart_item') {
			values = getValues(data.table, req_id, task_id, opened_by);
		} else {
			// Other task extensions
			values = getValuesForProducer(data.table, data.sys_id, opened_by);
		}
		data.values = values;
		var isQuestionReadOnly = ((options.readonly_variable_editor == 'true') || ((gs.getProperty('glide.sc.evaluate.variables.write.access', true) == 'true') ? !gr.variables.canWrite() : !gr.canWrite()));

		for(var f in data.sc_cat_item._fields) {
			if (isQuestionReadOnly)
				data.sc_cat_item._fields[f].sys_readonly = true;
			
			//	Adding table_name for attachment variables
			if (data.sc_cat_item._fields[f].type == 'sc_attachment') {
				data.sc_cat_item._fields[f].recordTableName = data.table;
				data.sc_cat_item._fields[f].recordSysId = data.sys_id;
			}
			
			// Put the values into the cat item fields
			if (typeof values[f] != "undefined") {
				if (values[f].type == 12 || values[f].type == 19 || values[f].type == 20 || values[f].type == 24)
					continue;
				if (typeof values[f].value != "undefined") {
					if (values[f].type == 9 || values[f].type == 10)
						data.sc_cat_item._fields[f].value = values[f].displayValue;
					else if (values[f].type == 25 && data.sc_cat_item._fields[f].catalog_view_masked)
						data.sc_cat_item._fields[f].value = values[f].decrypted_value;
					else
						data.sc_cat_item._fields[f].value = values[f].value;
					data.sc_cat_item._fields[f].displayValue = values[f].displayValue;
					data.sc_cat_item._fields[f].display_value_list = values[f].display_value_list;
				}
			}
		}
	} else
		data.msg = gs.getMessage('You are either not authorized or record is not valid');
	
	function getValues(table, sys_id, task_id, opened_by) {
		var qs = new GlideappVariablePoolQuestionSet();
		if (table == "sc_cart_item")
			qs.setCartID(sys_id);
		else if(table == "sc_task") {
			qs.setRequestID(sys_id);
			qs.setTaskID(task_id);
		} else {
			qs.setRequestID(sys_id);
		}
		
		qs.load();
		var values = {};
		var questions = qs.getFlatQuestions().toArray();
		for (var i = 0; i < questions.length; i++) {
			var q = questions[i];
			var o = {value: q.getValue(), displayValue: q.getDisplayValue(), type: q.getType()};
			//handling List Collector (21) and Masked (25) variables.
			if (o.type == 21)
				o.display_value_list = q.getDisplayValues().toArray();
			if (o.type == 25 && q.canDecrypt(opened_by, table))
				o.decrypted_value = q.decrypt(o.value);
			var qKey = q.getName();
			if (typeof qKey == 'undefined' || qKey == '')
				qKey = "IO:" + q.getId();
			values[qKey] = o;
		}
		return values;
	}
	
	function getValuesForProducer(table, sys_id, opened_by) {
		var qs = new GlideappSequencedQuestionSet();
		qs.setTableName(table);
		qs.setTableSysID(sys_id);
		
		qs.load();
		var values = {};
		var questions = qs.getFlatQuestions().toArray();
		for (var i = 0; i < questions.length; i++) {
			var q = questions[i];
			var o = {value: q.getValue(), displayValue: q.getDisplayValue(), type: q.getType()};
			//handling List Collector (21) and Masked (25) variables.
			if (o.type == 21)
				o.display_value_list = q.getDisplayValues().toArray();
			if (o.type == 25 && q.canDecrypt(opened_by, table))
				o.decrypted_value = q.decrypt(o.value);
			var qKey = q.getName();
			if (typeof qKey == 'undefined' || qKey == '')
				qKey = "IO:" + q.getId();
			values[qKey] = o;
		}
		return values;
	}
})();

AnkurBawiskar_0-1736602143014.png

 

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

View solution in original post

10 REPLIES 10

Ankur Bawiskar
Tera Patron
Tera Patron

@Hafsa1 

you can check this in the server side script and based on that hide the complete HTML

share your complete widget code HTML, Client Controller and Server Side

Is that a custom widget which you cloned from "sp-variable-editor"

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

this is just cloned from sp-variable-editor widget, nothing is custom. can you edit in that.

@Hafsa1 

so what script did you start with in that cloned widget?

I already informed where possible changes are required.

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

Hafsa1
Mega Sage

HTML:

<div ng-class="{'panel panel-default': !data.hide_container}" ng-if="::c.hasVariables(data.sc_cat_item._fields) && !c.options.isServiceWorkspace">
<div class="panel-heading" ng-if="!data.hide_container">
<h3 ng-if="data.itemTitle" class="panel-title">{{data.itemTitle}}</h3>
<h3 ng-if="!data.itemTitle" class="panel-title">{{data.vEditorLabel}}</h3>
</div>
<div ng-class="{'panel-body': !data.hide_container, 'variable-editor': data.hide_container}">
<sp-model form-model="::data.sc_cat_item" mandatory="[]"></sp-model>
</div>
<div ng-if="c.showSave && c.options.readonly_variable_editor != 'true'" class="panel-footer">
<button class="btn btn-primary pull-right" name="save" ng-click="c.save()">${Save}</button>
<span ng-if="validating" style="padding-left:4px">${Validating...}</span>
<div style="clear: both;"></div>
</div>
</div>
<div class="workspace-variables" ng-if="::c.hasVariables(data.sc_cat_item._fields) && c.options.isServiceWorkspace">
<div class="variables">
<sp-model form-model="::data.sc_cat_item" mandatory="[]"></sp-model>
</div>
<div ng-if="c.showSave && c.options.readonly_variable_editor != 'true'">
<button class="btn btn-primary pull-right" name="save" ng-click="c.save()">${Save}</button>
<span ng-if="validating" style="padding-left:4px">${Validating...}</span>
<div style="clear: both;"></div>
</div>
</div>
<div ng-if="::!c.hasVariables(data.sc_cat_item._fields)">
<h4 class="text-a-c">
{{::c.data.msg}}
</h4>
</div>
<now-message key="Variable saved" value="${Variable saved}"></now-message>