Embedded Modal widget to call catalog items/record producers/forms.
Import
·
Jan 28, 2021
·
article
Hi,
This Modal widget is a similar concept to Add-Row functionality on the catalog item. Instead one can insert a Database record with leaving the current form.
HTML:
<div>
<button class="btn btn-{{options.color}} m-b" ng-click="openModal()">{{data.buttonMsg}}
<sp-widget widget="data.modalInstance" ng-if="data.modalInstance"></sp-widget>
</button>
</div>
Client Controller:
function($scope, $window, spUtil, glideUserSession, spModal, $rootScope) {
/* widget controller */
var c = this;
var shared = {};
$scope.openModal = function (ev, table, sysid, query, view) {
if (!sysid)
sysid = -1;
spUtil.get("widget-modal", {
embeddedWidgetId: "sc-cat-item-v2",
embeddedWidgetOptions: {
sys_id: c.options.sysid,
display_cart_on_right: true,
auto_redirect: "false",
disableUIActions: false
}
}).then(function (widget) {
var modalCtrl;
widget.options.afterOpen = function (ctrl) {
modalCtrl = ctrl;
};
//var unregister = $scope.$on('sp.form.record.updated', function () { //if embeddedWidgetId:'widget-modal'
var unregister = $scope.$on("$sp.sc_cat_item.submitted", function () { //if embeddedWidgetId:'sc-cat-item-v2'
modalCtrl.close();
});
widget.options.afterClose = function () {
unregister();
$scope.data.modalInstance = null;
};
$scope.data.modalInstance = widget;
});
}
}
Server Script:
data.buttonMsg = gs.getMessage(options.button_text || "Add Record");
Note: Option Schemas can be added for all the dynamic Options.
Call this dynamically to from a variable:
Create a Macro variable and add the following JSON into the Default value.
{
"widget": "embedded-modal-widget",
"color": "warning",
"button_text": "Add Record",
"sysid": "sys_id of the catalog item/record producer"
}
Hope this is helpful for anyone looking how to use Embedded Modal Widgets. ![]()
View original source
https://www.servicenow.com/community/itsm-articles/embedded-modal-widget-to-call-catalog-items-record-producers/ta-p/2307642