How do I add a editable field on a widget
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-01-2023 04:16 AM - edited 08-01-2023 04:22 AM
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: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: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: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: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):
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-01-2023 04:24 AM
Hello @F_bio Santos
Plz refer the link below for more details:-
Plz Mark my Solution as Accept and Give me thumbs up, if you find it Helpful.
Regards,
Samaksh
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-01-2023 04:29 AM
Should I use the example that they have on the post, on the "Options" widget ?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-01-2023 04:35 AM
I tried to use it on a single widget without anythink but it didnt worked