Display Variable Editor in Service Portal

[reginabautista]

Hi guys,

I have followed the workaround in the article in HI below...

ServiceNow KB: In Service Portal, the Variable Editor widget does not work with sc_task records and ...

I have then cloned the sp-variable-editor and embed it to the the Form cloned widget.

However the variables are still not displaying on the form.

Would you know what am I doing wrong?

[reginabautista]

Hi harishkumar

Thanks for the reply. I have already updated the record in sp_ui_formatter to point to my cloned widget.

Coiuld you guide me how to do this please. I didn't quite tunderstand what you meant below:

You need to create a new formatter   with this name as well in formatter table for which ever table you need and add that formatter in the form layout as well

[Harish KM]

Can I know for which table you want to display the variable editor?

Recently I had implemented the same for FInance Request table. So i did the following

I need to add the same formatter in this table like below

[reginabautista]

Hi harish, still no luck

[Harish KM]

can you let me know for which table you want to display variable editor?

Below is my widget script I modified

HTML:

<div class="panel panel-default" ng-if="::c.hasVariables(data.sc_cat_item._fields)||data.values!=''">

  <div class="panel-heading">

      <h3 class="panel-title">Variables</h3>

  </div>

  <div class="panel-body">

      <sp-model form-model="data.sc_cat_item" mandatory="[]"></sp-model>

  </div>

  <div ng-if="c.showSave" class="panel-footer">

      <button class="btn btn-primary pull-right" name="save" ng-click="c.save()">${Save}</button>

  <div style="clear: both;"></div>

  </div>

</div>

Server:

(function() {

data.table = $sp.getParameter("table") || options.table;

data.sys_id = $sp.getParameter("sys_id") || $sp.getParameter("sl_sys_id") || options.sys_id;

gs.log("TABLE SYSID"+data.sys_id);

if (input) {

var vars = [];

var fields = input.sc_cat_item._fields;

data.sys_id = input.sys_id;

data.table = input.table;

for (var v in fields) {

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);

}

var gr = new GlideRecord(data.table);

var t = gr.get(data.sys_id);

var itemsType;

var classname;

var parentsysid;

if(data.table == 'sc_req_item'){

itemsType = gr.cat_item;

}

else if(data.table == 'sn_sm_finance_request'){

var finvar=new GlideRecord('question_answer');

finvar.addQuery('table_name',data.table);

finvar.addQuery('table_sys_id',data.sys_id);

finvar.query();

if(finvar.next()){

itemsType=finvar.question.cat_item;

}

}

else if(data.table == 'sn_sm_finance_task'){

var finvar1=new GlideRecord('question_answer');

finvar1.addQuery('table_name',data.table);

finvar1.addQuery('table_sys_id',data.sys_id);

finvar1.query();

if(finvar1.next()){

itemsType=finvar1.question.cat_item;

}

//}

}

if (gr.get(data.sys_id)) {

data.sc_cat_item = $sp.getCatalogItem(itemsType, !!options.isOrdering);

var values= getValues(data.table, data.sys_id);

for(var f in data.sc_cat_item._fields) {

// Put the values into the cat item fields

if (typeof values[f] != "undefined" && typeof values[f].value != "undefined") {

data.sc_cat_item._fields[f].value = values[f].value;

data.sc_cat_item._fields[f].displayValue = values[f].displayValue;

}

else{

}

}

}

function getValues(table, sys_id) {

var values = {};

var o;

if(data.table == 'sc_req_item')

{

var qs = new GlideappVariablePoolQuestionSet();

if (table == "sc_cart_item")

qs.setCartID(sys_id);

else

qs.setRequestID(sys_id);

qs.load();

values = {};

var questions = qs.getFlatQuestions().toArray();

for (var i = 0; i < questions.length; i++) {

var q = questions[i];

o = {value: q.getValue(), displayValue: q.getDisplayValue(), type: q.getType()};

if (o.type == 21)

o.display_value_list = q.getDisplayValues().toArray();

values["IO:" + q.getId()] = o;

}

return values;

}

else if(data.table == 'sn_sm_finance_request' || data.table == 'sn_sm_finance_task')

{

var grdata = new GlideRecord(data.table);

grdata.addQuery('sys_id',sys_id);

grdata.query();

if(grdata.next()){

// data.category = grdata.getDisplayValue('category');

// data.approval = grdata.getDisplayValue('approval');

}

//////////////////////////////////////////

values = {};

var qa = new GlideRecord('question_answer');

qa.addQuery('table_sys_id',sys_id);

qa.query();

while(qa.next()){

//var o = {

//value: qa.getValue('value'),

//value: qa.value.getValue(),

//   displayValue: qa.value.getDisplayValue(),

//type: qa.question.type.toString()

// };

o = {value: qa.value.toString(), displayValue: qa.value.getDisplayValue(), type: qa.question.type};

//console.log('o++++++++++++++++');

// console.log(o);

if (o.type == 21){

var displayMap = {};

var listValues = o.value.split(',');

var listDisplayValues = [];

var listRef = new GlideRecord(qa.question.list_table);

listRef.addQuery('sys_id', 'IN', listValues.join(','));

listRef.query();

while(listRef.next()){

displayMap[listRef.getUniqueValue()] = listRef.getDisplayValue();

}

listValues.forEach(function(value){

listDisplayValues.push(displayMap[value]);

});

o.display_value_list = listDisplayValues;

o.displayValue = listDisplayValues.join(',');

}

if(o.type == 8){

var ref = new GlideRecord(qa.question.reference);

if(ref.get(o.value)){

o.displayValue = ref.getDisplayValue();

}

}

values["IO:"+ qa.question] = o;

}

return values;

}

}

})();

Client:

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

  /* widget controller */

  var c = this;

var isSaved = false;

var g_form = $scope.page.g_form;

var origActionName;

if (g_form)

addSaveHandler();

else

c.showSave = true;

// Used when embedded as a formatter

function addSaveHandler() {

g_form.$private.events.on("submit", function(){

origActionName = g_form.getActionName();

if (isSaved) return true;

c.server.update().then(function(){

isSaved = true;

g_form.submit(origActionName);

});

return false;

});

}

c.save = function(){

var activeElement = $document.activeElement;

if (activeElement)

activeElement.blur();

c.server.update().then(function() {

if (c.data.table == "sc_cart_item")

$rootScope.$broadcast("$sp.service_catalog.cart.update");

});

};

c.hasVariables = function(fields) {

if (!fields)

return false;

return Object.keys(fields).length > 0;

}

}

[Harish KM]

My formatter table looks like below. The yellow color highlighted macro is used by variable editor . Hence I added that to the table finance request and finace task. After that I added this two formatters to the table via form layout.