How do I call a <sn-record-picker> in a spModal ?

F_bio Santos · ‎10-03-2023

Hi everyone, I want to put a <sn-record-picker> inside a spModal, but Im not sure how to do this, can anyone help ?

Code:

HTML:

<div id="AtualizarButton" class="panel panel-default">
    <div class="panel-heading">${Atualizar}</div>
    <div class="panel-body">
     <button type="button" class="btn btn-primary btn-block" style="background-color: #3641B3;" ng-click="c.onAlert()">${Atualizar} 
</button>
    </div>
</div>

WHAT I WANT TO PUT INDE THE spModal
<sn-record-picker id="AssignToPicker" field="user" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>
<button type="submit" class="btn btn-primary" ng-click="saveUser()" id="btnSubmit" >${Submit}</button>

Server Script:

(function() {
  /* populate the 'data' object */
    // Get table & sys_id
    data.table = $sp.getParameter("table");
    data.sys_id = $sp.getParameter("sys_id");

    // Valid GlideRecord
    gr = new GlideRecord(data.table);
    if (!gr.isValid())
        return;

    // Valid sys_id
    if (!gr.get(data.sys_id))
        return;

    data.state = gr.getValue('state');
    data.unid = gr.getValue('sys_class_name');
	data.resolved = gr.getValue('resolved');

    if (input && input.action) {
        var action = input.action;

        // If Incident table
        if (action == 'resolve') {
            gr.setValue('resolved', true);
            gr.setValue('state', 3);
            gr.update();
            gs.addInfoMessage("O pedido foi fechado.");
        }
    }

    data.state = gr.getValue('Assigned To');
	
		data.user = '';

		data.user_dv = '';

		if (input && input.action == "saveUser") {

			//here you cad use the selected user id & name from the input variables

			// and save or process your business logic
			gr.assigned_to = input.selected_user_id;
			gr.variables.assigned_to = input.selected_user_id;
			gr.update();
		}

})();

Client Controller:

api.controller = function($window, $location, spModal) {
    /* widget controller */
    var c = this;
    c.action = function(state) {
        c.data.state = state;
    };


    c.onAlert = function() {
        var c = this;
        c.onAlert = function() {
            spModal.confirm('Test').then(function(answer) {
                if (answer) {
                    c.uiAction('resolve');
                }
            });
        }
    }
};

ChrisBurks · ‎10-03-2023

Based on the documentation I set it up as follows.

1. Create a custom widget that holds the record picker directive

*Set an Id on your custom widget

Widget ID: "modal-record-picker"

HTML

<div>
  <label>{{data.label}}</label>
	<sn-record-picker field="c.recObject" table="data.table" search-fields="data.searchFields" display-fields="data.displayFields" value-field="data.valueField" default-query="data.defaultQuery" page-size="data.pageSize"> </sn-record-picker>
</div>

Server script:

(function() {
    if (input) {
        data.label = input.label;
        data.table = input.table;
        data.searchFields = input.searchFields;
        data.displayFields = input.displayFields;
        data.defaultQuery = input.defaultQuery;
        data.valueField = input.valueField;
        data.pageSize = input.pageSize;
    }
})();

Client Controller:

api.controller=function($scope) {
  var c = this;
  c.recObject = $scope.widget_parameters.shared;

};

2. Embed the widget into spModal:

HTML:

<div id="AtualizarButton" class="panel panel-default">
    <div class="panel-heading">${Atualizar}</div>
    <div class="panel-body">
     <button type="button" class="btn btn-primary btn-block" style="background-color: #3641B3;" ng-click="c.openModal()">${Atualizar} 
     </button>
    </div>
    <div class="m-t-lg wrapper">
      <h3>{{c.recObject.displayValue}}</h3>
    </div>
</div>

Client Controller:

api.controller=function($scope, spModal) {
	var c = this;

	c.recObject = {
		"displayValue":"",
		"name":"user",
		"value":""
	}

	var widgetInput = {
		"label": "${Selecciona un usuario}",
		"table":"sys_user",
		"searchFields": "name,user_id",
		"displayFields": "name,user_id",
		"defaultQuery": "active=true",
		"valueField": "sys_id",
		"pageSize": "10"

	}

        //Set a "widget" property with the widget id given to the widget holding the snRecordPicker directive
	c.openModal = function(){
		spModal.open({
			widget: 'modal-record-picker',
			shared: c.recObject,
			widgetInput: widgetInput,
			scope: $scope
		}).then(function(resp){
			//resp will contain true if "ok" button is selected

			//process c.recObject data as needed here
			console.log("selected record", c.recObject)

		})
	}

};

Demo:

View solution in original post

ChrisBurks · ‎10-09-2023

Ah, then move the update part into the script which is opening the spModal to process the information in the ".then()" which is triggered when the "OK" button is clicked;
For example:

Client Controller

...
c.openModal = function(){
		spModal.open({
			widget: 'modal-record-picker',
			shared: c.recObject,
			widgetInput: widgetInput,
			scope: $scope
		}).then(function(resp){
			//executes after the "ok" button is clicked

			//process c.recObject data as needed here
			c.server.get({
				action: "ASSIGNTO",
				assignee: c.recObject.value
			})

		})
	}

Server script

(function() {
	data.table = $sp.getParameter('table');
	data.sys_id = $sp.getParameter('sys_id');
	
	var inc = new GlideRecord(data.table);

	if(input && input.action == 'ASSIGNTO'){
		if(inc.get(data.sys_id)){
			inc.assigned_to = input.assignee.toString();
			inc.update();
		}

	}
})();

Example:

I put the simple list widget on the page so that it can be seen when the record gets updated

View solution in original post

Tushar · ‎10-03-2023

Hi @F_bio Santos

To put a <sn-record-picker> inside a spModal, you can try below steps -

Add the <sn-record-picker> element to the template of the spModal.
Pass the spModal object to the sn-record-picker element as a prop.

HTML

<sp-modal id="AssignToUserModal" header="Assign to User">
  <sn-record-picker id="AssignToPicker" field="user" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" sp-modal="spModal"></sn-record-picker>
  <button type="submit" class="btn btn-primary" ng-click="saveUser()" id="btnSubmit">Submit</button>
</sp-modal>

Then, in your client controller, you can open the modal using the spModal.open() function.

c.onAssignToUser = function() {
  spModal.open({
    id: 'AssignToUserModal'
  });
};

When the modal opens, the <sn-record-picker> element will be rendered inside of the modal. The user can then select a user and click the "Submit" button to save the selection.

Also make sure that the <sn-record-picker> element is a ServiceNow widget, so you will need to include the ServiceNow widget library in your Service Portal page.

Please, don't forget to mark my answer as correct if it solves your issue or mark it as helpful if it is relevant for you!

Regards,
Tushar

F_bio Santos · ‎10-03-2023

Hi @Tushar it didnt work, what I want is when I click this button:

Which right now shows this:

I want it to show this inside the spModal:

F_bio Santos · ‎10-03-2023

Update @Tushar i changed it a bit and the modal opened with the code you sent, but it does not show the record picker inside it.

ChrisBurks · ‎10-03-2023

Based on the documentation I set it up as follows.

1. Create a custom widget that holds the record picker directive

*Set an Id on your custom widget

Widget ID: "modal-record-picker"

HTML

<div>
  <label>{{data.label}}</label>
	<sn-record-picker field="c.recObject" table="data.table" search-fields="data.searchFields" display-fields="data.displayFields" value-field="data.valueField" default-query="data.defaultQuery" page-size="data.pageSize"> </sn-record-picker>
</div>

Server script:

(function() {
    if (input) {
        data.label = input.label;
        data.table = input.table;
        data.searchFields = input.searchFields;
        data.displayFields = input.displayFields;
        data.defaultQuery = input.defaultQuery;
        data.valueField = input.valueField;
        data.pageSize = input.pageSize;
    }
})();

Client Controller:

api.controller=function($scope) {
  var c = this;
  c.recObject = $scope.widget_parameters.shared;

};

2. Embed the widget into spModal:

HTML:

<div id="AtualizarButton" class="panel panel-default">
    <div class="panel-heading">${Atualizar}</div>
    <div class="panel-body">
     <button type="button" class="btn btn-primary btn-block" style="background-color: #3641B3;" ng-click="c.openModal()">${Atualizar} 
     </button>
    </div>
    <div class="m-t-lg wrapper">
      <h3>{{c.recObject.displayValue}}</h3>
    </div>
</div>

Client Controller:

api.controller=function($scope, spModal) {
	var c = this;

	c.recObject = {
		"displayValue":"",
		"name":"user",
		"value":""
	}

	var widgetInput = {
		"label": "${Selecciona un usuario}",
		"table":"sys_user",
		"searchFields": "name,user_id",
		"displayFields": "name,user_id",
		"defaultQuery": "active=true",
		"valueField": "sys_id",
		"pageSize": "10"

	}

        //Set a "widget" property with the widget id given to the widget holding the snRecordPicker directive
	c.openModal = function(){
		spModal.open({
			widget: 'modal-record-picker',
			shared: c.recObject,
			widgetInput: widgetInput,
			scope: $scope
		}).then(function(resp){
			//resp will contain true if "ok" button is selected

			//process c.recObject data as needed here
			console.log("selected record", c.recObject)

		})
	}

};

Demo: