Tutorial: Add a server script to query an instance table

After adding your widget and creating a basic template, you can define more advanced scripts that enable the user to query data from an instance table. Using client and server scripts, you can pass the data model between the client and server by querying data from the database, displaying it to the user, and sending any updates back to the server.

Before you begin

Role required: admin or sp_admin

Procedure

  1. From the Widget Editor, open the Quick Order widget.
  2. Select Server Script to open the server script field.
  3. Replace the default server script with the following custom script.
    (function() {
    	if (input.keywords != null && input.keywords != '')
    		data.items = getCatalogItems(input.keywords);
    	
    	function getCatalogItems(keywords) {
    		var sc = new GlideRecord('sc_cat_item');
    		sc.addActiveQuery();
    		sc.addQuery('123TEXTQUERY321', keywords);
    		sc.addQuery('sys_class_name', 'NOT IN', 'sc_cat_item_wizard,sc_cat_item_content');
    		sc.addQuery('sc_catalogs', '0d08b13c3330100c8b837659bba8fb4');
    		sc.setLimit(100);
    		sc.orderByDesc("ir_query_score");
    		sc.query();
    		var results = [];
    		while (sc.next()) {
    			if (!$sp.canReadRecord(sc))
    				continue;
    
    			var item = {};
    			$sp.getRecordDisplayValues(item, sc, 'name,price,sys_id');
    			item.category = sc.getValue('category');
    			results.push(item);
    		}
    		return results;
    	}
    })();
    

    This script performs a keyword search on the sc_cat_item table using the 123TEXTQUERY321 query method.

  4. Replace the HTML template with the following script:
    <div class="panel panel-primary">
     <div class="panel-heading">Request an item from the catalog</div>
     <div class="panel-body">
       <input class="form-control" type="search" placeholder="Start typing here to search the list of catalog items" ng-model="c.data.keywords" ng-change="c.server.update()" ng-model-options="{debounce: 250}" />
       <ul class="list-group result-container">
         <li class="list-group-item" ng-repeat="item in c.data.items">
           <a href>{{item.name}}</a><span class="pull-right">{{item.price}}</span>
         </li>
       </ul>
     </div>
    </div>
    

    This template adds a search field and displays the results of the query performed in the server script using the following Angular directives. To learn more about these directives, review the Angular API Reference.

    Table 1. Angular directives used in the template
    Angular directive Description
    ng-model Automatically reads and writes value changes to the model variable c.data.keywords.
    ng-model-options Configures ng-model behavior. In this template, ng-model updates the model after a user has stopped typing for 250 milliseconds.
    ng-change Executes c.server.update() after the model value changes. This function posts the data object to the server script. After the script is executed, the data object is automatically updated with the new values from the server generated data object.
    ng-repeat Creates a template from the parent element and child elements. For each item in c.data.items, an instance of the template is created and the expressions {{item.name}} and {{item.price}} are replaced with the values from each item.
  5. Add the following script to the CSS - SCSS field:
    .result-container {
     margin-top: 10px;
    }
    
  6. Refresh your test page preview to view the changes.

    As you type in the search box, matching catalog items appear. Try searching for ipad.