logo

NJP

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. image

View original source

https://www.servicenow.com/community/itsm-articles/embedded-modal-widget-to-call-catalog-items-record-producers/ta-p/2307642