How do I auto-populate drop down using sn-record-picker?

bmendez0428
Tera Contributor

Issue:

I am currently building a contact form widget. I managed to get my dropdown for the Requestor field working and mapping to my intake table. The command field on my contact form is (u_command) it's a choice list field type. The Sub-command field is referenced from a table with over 700 values. (u_sub_command). I cannot get the command and sub-command dropdowns to auto populate. I am fairly new to ServiceNow. Any help would be greatly appreciated. 

 

HTML code: 

<div class="widmarg contact-margin">
  <h3 class="txtstyle">
    Submit a Request
  </h3>
</div>

<div class="container">
  <p class="subText">Submit a request for more information and a member of our team will reach out to you soon!<p>  
<!---  <form name="contactUs" novalidate> --->
   <!--- <div class="form-actions"> -->
      <div class="col-md-12" id="top-container">
          <div class="col-md-12 mb-3">              
          <label for="subject">Subject</label>
          <textarea type="text" class="form-control" name="subject" ng-model="c.data.subject" rows="" maxlength=""></textarea>  
        </div>        
        <div class="col-md-6 mb-3">
          <div>
            <label for ="commands"><span class=""></span>Command</label>
            <sn-record-picker field="c.data.command" table="'u_ecma_intake'" display-field="'command'" default-query="'active=true'" value-field="'sys_id'" search-fields="'name'" page-size="100" placeholder="Select..."></sn-record-picker>
          	<span class="help-block" ng-show="needHelp.name.$invalid && !needHelp.name.$pristine">Required</span>
        	</div>        
      	</div>
        <div class="col-md-6 mb-3">
          <label for="sub_command"><span class="fa fa-asterisk mandatory"></span>Sub-Command</label>
          <sn-record-picker field="c.data.sub_command" table="'u_ecma_intake'" display-field="'sub_command'" default-query="''" value-field="'name'" search-fields="'displayValue'" page-size="100" placeholder="Select..."></sn-record-picker>
          <span class="help-block" ng-show="needHelp.name.$invalid && !needHelp.name.$pristine">Required</span>
        </div>  
     
  		</div>
      <div class="row col-sm-12">
        <div class="col-md-12">
          <label for="requestor_name"><span class="fa fa-asterisk mandatory"></span>Requestor</label>
          <sn-record-picker field="c.data.requestor_name" table="'sys_user'" display-field="'name'" default-query="'active=true'" value-field="'sys_id'" search-fields="'name'" page-size="100" placeholder="Select..."></sn-record-picker>
          <span class="help-block" ng-show="needHelp.name.$invalid && !needHelp.name.$pristine">Required</span>
        </div>        
      </div>

      <div class="row col-sm-12">
        <div class="col-md-6 mb-3">
          <label for="email"><span class="fa fa-asterisk mandatory"></span>Email</label>
          <input type="email" class="form-control" name="email" ng-model="c.data.email" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required> 
          <span class="help-block" ng-show="needHelp.email.$invalid && !needHelp.email.$pristine">Please enter email</span>
        </div>
        <div class="col-md-6 mb-3">
          <label for="organizationName"><span class="fa fa-asterisk mandatory"></span>Organization Name</label>
          <input type="text" class="form-control" name="name" ng-model="c.data.organizationName" required>
          <span class="help-block" ng-show="needHelp.name.$invalid && !needHelp.name.$pristine">Required</span>
        </div>        
      </div>



      <div class="row col-sm-12">
        <div class="col-md-12 mb-3">              
          <label for="comments">Comment</label>
          <textarea type="text" class="form-control" name="comments" ng-model="c.data.comments" rows="3" maxlength="300"></textarea>  
        </div>
      </div>
  		<div class="submit-button">
  
  			<p style="text-align: left; margin-bottom: 30px; margin-top: 17px;"><button class="btn bdr_rad" style="background-color: #f1bb1b;" type="submit" ng-click="c.submitData();" ng-disabled = "needHelp.$invalid">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Submit&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></p>
  		</div>


   <!--- </div> -->      
<!--- </form> --->

 

Client Script:

function($scope, $location, spUtil) {
  /* widget controller */
  var c = this;

      c.submitData = function(){
			
	
		
	

           c.data.action = "addData";
           //Check Log to make sure data is stored in client

					$scope.requestor_name = {
					displayValue: c.getDisplayValue('requestor_name'),
					value: c.data.sys_id,
					name: 'requestor_name'
					
					}
				
					$scope.sub_command = {
						displayValue: c.getDisplayValue('u_sub_command'),
						value: c.data.sys_id,
						name:'sub_command'
											
		};
		  
           c.server.update().then(function(){
                 //reset callback function so it doesn't repeat
						 
		
                 c.data.action = undefined;
								 c.data.subject = "";
                 c.data.email = "";
                 c.data.organizationName = "";
                 c.data.comments = ""
                 
                 spUtil.addInfoMessage("Your request has been submitted")
		             alert("Your request has been successfully submitted");
           
                 $location.url("/ecma");
						 
                 
                 
           });
           

           };
           
      
}

 

find_real_file.png

1 REPLY 1

Sushma R1
Tera Expert

try like this

The Directive:

It supports the following properties:

Property Description
field a JavaScript object consisting of “displayValue”, “value” and “name”
table the table to pull records from
default-query the query to apply to the table
display-field (or display-fields) the display field
value-field the value field (usually sys_id)
search-fields the fields to search
page-size number of records to display in dropdown

 

To use the snRecordPicker you will also need to create the “field” object in your controller as well as listen for the “field.change” event.

The Controller: