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
Giga 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