Customising the Current Status widget

[MichaelCreatura]

Hello,

We would like to use the Current Status widget on our Employee Center, however we would like to display the Message field on the Employee Center. 

We have cloned the widget, and amended the widget HTML to include the following:

However, this is not having the desired results:

What else needs to be changed?

Thanks, 
Michael 

[Ct111 · Accepted solution]

if you are thinking of displaying data from database you need to use below syntax at server or client side

and then display it on html template.

LINK

I hope this information helps

[Ankur Bawiskar]

@MichaelCreatura 

you need to set the value into that by fetching from server side field

please share your widget client, html and server side script

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

[Harsh Vardhan]

@MichaelCreatura  Try with this script. You need to change only in server side and html.

Tested and working on PDI.

HTML:

<div ng-if="!data.service || data.outages.length > 0" class="panel panel-{{options.color}} b">
  <div class="panel-heading">
    <h3 class="panel-title">${Current Status}<span ng-if="data.serviceDisplay"> - {{data.serviceDisplay}}</span></h3>
  </div>

  <div class="panel-body">
    <div ng-if="!standalone && !data.service" class="hidden-xs">${We constantly monitor our services and their related components.} ${If there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}</div>

    <div ng-if="data.outages.length == 0" class="col-xs-12 bs-callout bs-callout-success">
      <div ng-if="!data.service">${No system is reporting an issue}</div>
    </div>
    <div ng-if="data.outages.length > 0" ng-repeat="outage in data.outages" class="col-xs-12 bs-callout bs-callout-{{outage.type}}">
      <a ng-if="!data.service" style="color:inherit" ng-href="?id=service_status&service={{outage.serviceID}}">{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}}) {{outage.message}}
        <div ng-if="options.show_outage_details == 'true' && outage.details" ng-bind-html="::trustAsHtml(outage.details)" class="sp-outage-details"></div>
      </a>
      <span ng-if="data.service" style="color:inherit">{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}}) 
        <div ng-if="options.show_outage_details == 'true' && outage.details" ng-bind-html="::trustAsHtml(outage.details)" class="sp-outage-details"></div>
      </span>
    </div>
    <div ng-if="::standalone"><a href="?id=services_status" aria-label="${More information, open current status page}">${More information...}</a></div>
  </div>
</div>

Server Side: 

// populate the 'data' object
// e.g., data.table = $sp.getValue('table');
var outage = new GlideRecord("cmdb_ci_outage");
outage.addQuery("cmdb_ci.sys_class_name", "IN", options.sys_class_list || "cmdb_ci_service");
outage.addQuery("begin", "<=", gs.nowNoTZ());
outage.addQuery("end", ">=", gs.nowNoTZ()).addOrCondition("end", "=", "NULL");
data.service = (input && input.service) || $sp.getParameter("service");
if (!GlideStringUtil.nil(data.service)) {
  outage.addQuery("cmdb_ci", data.service);
	var serviceGR = new GlideRecord("cmdb_ci_service");
	if (serviceGR.get(data.service))
		data.serviceDisplay = serviceGR.getDisplayValue();
}
outage.query();
data.outages = [];
data.outageIDs = "";
while (outage.next()) {
	var out = {};
	out.typeDisplay = outage.type.getDisplayValue();
	out.type = outage.getValue("type");
	out.details = outage.getValue("details");
	out.ci = outage.cmdb_ci.getDisplayValue();
	out.serviceID = outage.getValue("cmdb_ci");
	out.begin = outage.begin.getDisplayValue();
	out.message = outage.message.getDisplayValue();
	data.outages.push(out);
	data.outageIDs += "," + outage.getUniqueValue();
}

Result:

Hope it will help you.

Thanks

Harsh