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

[F_bio Santos]

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 · Accepted solution]

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:

[ChrisBurks]

Hello @F_bio Santos ,

No worries, no bother.

You should be able to leverage the shared variable "$scope.widget_parameters.shared" which in both widgets has been assigned to c.recObject. In the "Modal" create a new property on that object and assign as the ngModel to the textarea element. Whatever value is added to the textarea will then be available in both the "Modal" widget and the calling widget. In the Promise (.then()) of the spModal.open() method, dot walk out to the new property to access the value.

HTML of the "Modal" widget:

...
<textarea ng-model="c.recObject.textareaData"></textarea>
...

Client Controller of the widget calling the modal:

...

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
            console.log("textareaData: ", c.recObject.textareaData)
                  
			//process c.recObject data as needed here
			c.server.get({
				action: "ASSIGNTO",
				assignee: c.recObject.value
			})

		})
	}

[F_bio Santos]

So would I have to do somethink like this on the "Client Controller" of the widget calling the modal ?

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
            console.log("textareaData: ", c.recObject.textareaData)

           var message = current.getValue("message");

           message = message +  console.log("textareaData: ", c.recObject.textareaData);
                  
			//process c.recObject data as needed here
			c.server.get({
				action: "ASSIGNTO",
				assignee: c.recObject.value
			})

		})
	}

 
Added this:

           var message = current.getValue("message");

           message = message +  console.log("textareaData: ", c.recObject.textareaData);

Im using a "+" because I want to maintain what's already on the field.
(Let me know if u need screenshot's explaining it better)

[ChrisBurks]

You don't need the console.log. Console.log is to log out the information to the browser console, usually for troubleshooting.

Just use c.recObject.textareaData:

//you can do this (extra space in there to separate the values of message and textarea data)
message = message + " " + c.recObject.textareaData 

// or this should do the same thing in order to concantenate with the value that already exists in "message"
message += (" " + c.recObject.textareaData)

[F_bio Santos]

This is inside of the "ok" button right ?

[ChrisBurks]

Yes, the part when after the "ok" button is clicked.

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
            

           var message = current.getValue("message");
           message = message +  " " + c.recObject.textareaData;
                  
			//process c.recObject data as needed here
			c.server.get({
				action: "ASSIGNTO",
				assignee: c.recObject.value
			})

		})
	}