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:

[F_bio Santos]

That's exacly what I need 

[ChrisBurks · Accepted solution]

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

[F_bio Santos]

Thank you a lot for the help @ChrisBurks, I was overthinking the solution, this helped a lot

[ChrisBurks]

You're welcome@F_bio Santos . I'm glad I was able to help.

[F_bio Santos]

Hi @ChrisBurks, sorry for bothering you again, but Im trying to get the value of a <textarea> that is on the "Modal" widget, and put it on a field of the record, I have tried everythink I could remember that could work but got no results, I dont know how to call the html element that is on the "modal" widget