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]

Even with using the form widget it's still client side that you are working with and g_form is still used.

[ChrisBurks]

@F_bio Santos,

Depending upon your setup and how you're using the form widget and where your widget is that calls spModal, you might need to listen for when g_form is loaded and then assign gform to a variable.

This code would go in the widget where spModal is used:

var gform;
//listen for when gForm is loaded
$scope.$on('spModel.gForm.initialized', function(evt,data){
    //assign gform the gform instance
    gform = data;
});

With that above, gform will be available to use and get/set the value of "u_message" (client side).

for example:

...
var message = gform.getDisplayValue('u_message' )
gform.setDisplayValue( 'u_message',  + message + c.recObject.textareaData );
...

Of course my example may not be built the same as yours. So again how you would write your script depends on how you built your widget(s).