How do I add a editable field on a widget

F_bio Santos
Kilo Sage

Im trying to put a editable field on a widget wich will get a field on a table and show it there, Im trying to use the OOTB "Ticket Fields" and "Options" that servicenow have.

I believe I have to use a (sp-editable-field) but I dont know how to do it.

Table: 
        Label: Template Table
        Name: x_kpm86_app_temp_0_template_table

 

Field I want to show: 
        Label: Close Notes
        Name: close_notes

Widget (Options)

HTML: 

 

 

<div ng-if="c.data.variables.length > 0" ng-init="c.variable_toggle = c.toggle">
  <button class="btn variables-toggle-btn" aria-expanded="{{c.variable_toggle}}" aria-label="{{data.ariaLabel}}" ng-click="c.variable_toggle = !c.variable_toggle" ng-if="!c.hide_control">
    <span style="font-size: 12px;" class="glyphicon" ng-class="c.variable_toggle ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
    {{data.label}}
  </button>

  <div ng-if="c.variable_toggle" id="variables-toggle" aria-hidden="{{!c.variable_toggle}}">
    <hr role="presentation" ng-if="!c.hide_control">
    <div class="m-b break-word" ng-repeat="variable in c.data.variables">
      <label class="m-t-xs m-b-none text-muted"><b>{{::variable.label}}</b></label>
      <div ng-if="!variable.multi_row">
        <div ng-switch="variable.type">
          <!-- 27 is type URL, 33 is type Attachment -->
          <a ng-switch-when="27" class="pre-wrap" title="{{::variable.label}}" href="{{::variable.display_value}}" target="_blank">{{::variable.display_value}}</a>
          <span ng-switch-when="33" class="file-attachment">
          	<a ng-if="::variable.state != 'not_available'" class="pre-wrap" title="{{::variable.label}}" href="javascript&colon;void(0);" ng-click="scanAttachment(variable)" aria-label="${Download {{variable.display_value}}}">{{::variable.display_value}}</a>
            <span ng-if="::variable.state == 'not_available'" class="error">
							<a class="pre-wrap" title="{{::variable.label}}" href="javascript&colon;void(0);" ng-click="scanAttachment(variable)" aria-label="${File {{variable.display_value}} failed security scan}">{{::variable.display_value}}</a>
             	(${File failed security scan})
            </span>
          </span>
          <span ng-switch-default class="pre-wrap">{{::variable.display_value}}</span>
        </div>
      </div>
      <div ng-if="variable.multi_row">
        <a href="javascript&colon;void(0)" class="hidden-xs" uib-popover-template="'sp_multirow_vs_summarizer.html'" popover-title="{{variable.label}}" popover-placement="auto top" popover-append-to-body="true" popover-trigger="outsideClick">${Click to view}</a>
        <a href="javascript&colon;void(0)" class="visible-xs" ng-click="c.openMrvsModal(variable)">${Click to view}</a>
      </div>
    </div>
  </div>
</div>

 

 


Server Script:

 

 

(function() {
    data.label = options.label || gs.getMessage("KPMG Options");
    if (options.task)
        data.ariaLabel = gs.getMessage("{0} for {1}", [data.label, options.task]);
    else
        data.ariaLabel = data.label;
    if (options.variables) {
        data.variables = filterVariables(options.variables);
        return;
    }
    data.labelClose = gs.getMessage("Close");
    var tableName = options.table || $sp.getParameter('table');
    var sysId = options.sys_id || $sp.getParameter('sys_id');
    var record = sn_std_tkt_api.TicketConfig.getTicketRecord(tableName, sysId);

    if (record == null)
        return;

    data.canRead = record.canRead();
    if (!data.canRead)
        return;

    data.variables = filterVariables(new GlobalServiceCatalogUtil().getVariablesForTask(record, true));

})();

function filterVariables(variables) {
    if (variables == null || variables.length == 0)
        return variables;

    var filteredVariables = [];
    variables.forEach(function(variable) {
        if (variable.visible_summary)
            filteredVariables.push(variable);
    });

    return filteredVariables;
}

 

 


Client Controller:

 

 

function($scope, snAttachmentHandler, i18n, spModal) {
  /* widget controller */
  var c = this;
	c.toggle = c.options.toggle || false;
	c.hide_control = c.options.hide_control || false;
	c.task = c.options ? c.options.task : "";
	
	/* Open mrvs data in a model for mobile screen */
	c.openMrvsModal = function(data) {
		spModal.open({
			title: data.label,
			widget: "template_renderer",
			widgetInput: {data: data, template: "sp_multirow_vs_summarizer.html"}, 
			buttons: [{label:c.data.labelClose, primary: true}]
		});	
	}
	
	$scope.scanAttachment = function(variable) {
		if (variable.state == 'not_available')
			snAttachmentHandler.showMessage('error',i18n.getMessage('Upload file scan failed').withValues([variable.display_value]));
		else
			snAttachmentHandler.scanAttachment({'sys_id' : variable.value});
	}
}

 

 

What Im trying to do (this is a image of the widget on the portal): 

F_bioSantos_0-1690888943796.png

 




3 REPLIES 3

Samaksh Wani
Giga Sage
Giga Sage

Hello @F_bio Santos 

 

Plz refer the link below for more details:-

 

https://www.servicenow.com/community/developer-forum/need-to-add-editable-field-in-portal/m-p/168489...

 

Plz Mark my Solution as Accept and Give me thumbs up, if you find it Helpful.

 

Regards,

Samaksh

Should I use the example that they have on the post, on the "Options" widget ?

I tried to use it on a single widget without anythink but it didnt worked