Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Multi line message on Service Portal

ServiceNow Adm1
Giga Contributor

Hi Experts,

I have a requirement where on a selection of a variable value on Service Portal, I should display a multi-line message which will have colored text in between and embedded URLs like we have for HTML pages.

It should be displayed only when a specific value is selected and the content will change based on different values. Example; 

Information

This is a test message, it can have anything

Test Links

1 ACCEPTED SOLUTION

Justin77
Mega Guru

I recommend creating a new macro variable and configuring a widget for that one, which would just need the HTML required for the message and links.  Then you can show/hide that variable with a UI Policy.

View solution in original post

9 REPLIES 9

Appreciate if you could help further on how to achieve it with single widget where I can use same widget to display 10 different messages.

So in your variable's widget record, you can access the g_form API so it works like you would in a client script.  Inject $scope as a parameter in the Client Controller's function, and then add 

var g_form = $scope.page.g_form;

With that, you can check the values of the Category variable and set a $scope variable to be printed in your HTML.  See https://serviceportal.io/g_form-api-in-embedded-widgets/ for an example of using g_form in Client Controllers.

If you aren't familiar with how to pass $scope information to your HTML, I recommend reading some documentation from AngularJS: https://docs.angularjs.org/guide/scope

rajneeshbaranwa
Tera Guru

In the widget you can use event field.change event (This event is broadcasted when a field is updated on the form) to update the value in the widget.

Also use $scope.page.g_form.getValue to get the value of the field.

I creaed a sample code to achieve something similar.

 

Here primary_contact is my field name, You can replace it with your field name

Client Controller 

function($scope, $rootScope, $timeout)
{

var c = this;
var detail = '';

	$rootScope.$on("field.change",function(evt,parms)
	{
		if (parms.field.name == 'primary_contact')
			{
				
			detail = 'Primary contact Detail is ' + $scope.page.g_form.getValue('primary_contact');
				c.data.detail = detail;
				c.server.update();
			}
		
			});

			
		

	
}

Server Script :

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	data.detail = input.detail;

})();


HTML:

<div>
<!-- your widget template -->
  <input type='text' ng-model="::c.data.detail"> 
</div>

Hi Rajneesh,

Thank you for the code. But what I am looking is different.

Let say I have below code in HTML field but I want to display only a specific section of the HTML content not all.

 

 

 <div><span style="font-size: 10pt;">Tablet is a device enrolled <span style="text-decoration: underline;">by requestor</span> and managed by MDM AirWatch</span></div>
<div>&nbsp;</div>
<div><span style="font-size: 10pt;">By default you'll get an <strong>Apple (IOS) tablet</strong></span></div>
<div><span style="font-size: 10pt;">Apple tablet's advantage is a fully configured device without any manual configuration</span></div>
<div>&nbsp;</div>
<div><span style="font-size: 10pt;">Nokia(Android) is a second choice</span></div>
<div>&nbsp;</div>
<div><strong><span style="font-size: 10pt;">Only request coming from official corporate tablet project will be approved. Other demand will be rejected</span></strong></div>
<div>&nbsp;</div>
<div><span style="font-size: 10pt;">On your tablet, you'll receive corporate APPs and access to corporate data. For more info, please visit <span style="color: #0000ff;">Mobile Device Management</span> IT </span><span style="font-size: 10pt;">Solus topic</span></div>
<div>&nbsp;</div>
<div><span style="font-size: 10pt;"><strong>Attention</strong>, if a SIM card is needed, please check the appropriate box in Accessories. Tablet and SIM card will be delivered together.</span></div>
  

ServiceNow Adm1
Giga Contributor