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]

It is not working I dont know why, even the "ASSIGNTO" stops working 

[ChrisBurks]

Do you see any errors if you do an inspect element?

Also I notice you have something like current.getValue('message'). Is that "current" something you defined somewhere in your client controller?

[F_bio Santos]

So I have this field "u_message" which Im trying to put what we write on the <textarea> in there, but I want to add it to what is already there in case someone uses the <textarea> more than 1 time.

What I have right now:

Field in the portal:

Modal:

I have this code on the "ok" action but it is not working not sure why 

           var message = current.getValue("u_message");
           message = message +  " " + c.recObject.textareaData;

[ChrisBurks]

But where did you define "current"?
So far we have been discussing creating a widget(s). And for the most part, most all of the code has been through Client controller. The client controller is client side.

In ServiceNow "current" is an object that ServiceNow gives to us out-of-the-box but on the server-side most of the time in a business rule.

That current is NOT accessible client side unless you have defined your own "current" object somewhere else in your client script with a "getValue" method that can access a form fields value.

If the message field (u_message) is a variable on a catalog item/record producer then it normally has an out-of-box method to retrieve the value. The method is using the g_form object with method .getValue. More specifically if you're using a widget to access it from the catalog item/record producer then the way to access g_form is via $scope.page.g_form.getValue('u_message'). If your spModal is within a client script then g_form will suffice.

[F_bio Santos]

Hi @ChrisBurks I did this using other method, I called the "form" widget in the spModal instead of using the <record picker> and the <textarea>