SuiteScript 2.0 > Client Script > Display a Saved Search’s result in a popup alert dialog using inline-HTML-created table

Scenario

User/Customer wants to display a saved search’s result in a popup dialog alert for a quick reference, depending on their business use case. Additionally, an inline-HTML-created table will be used in containing the search results for better display. 

Solution

Below is a sample script for displaying the popup dialog alert, triggered on pageInit function. The script will perform a load-run on an existing saved search to get the results and display it. For this article, the script will only get the first 10 results from the saved search.

 

/**
 * @NApiVersion 2.x
 * @NScriptType ClientScript
 */
define(['N/ui/dialog', 'N/search'], function(
		dialog, search) {
	/**
     * Function to be executed after page is initialized.
     *
     * @param {Object} scriptContext
     * @param {Record} scriptContext.currentRecord - Current form record
     * @param {string} scriptContext.mode - The mode in which the record is being accessed (create, copy, or edit)
     *
     * @since 2015.2
     */
	function pageInit(context) {


		//Load the saved search
		var mySearch = search.load({
            	id: 'savedSearchId'
        	});


		//Run the search and return the first 10 results
		var srchRes = mySearch.run().getRange(0,10)


		//Start of inline HTML
		//Optional CSS stype for the table
        	var strHTML = '<style>';
	        strHTML += ' .hoverTable{border-collapse:collapse;}';
	        strHTML += ' .hoverTable td{padding:3px; border:#1659ba 1px solid;}';
	        strHTML += ' .hoverTable tr{background: #f1f2ea;}';
        	strHTML += ' .hoverTable tr:hover {background-color: #f1fc80;}';
	        strHTML += '  </style>';


        	//Defining the table - optimal size of the table for the popup dialog is 350px
	        strHTML += '<table border=1 cellpadding=3 cellspacing=0 class="hoverTable" style="width:350px">';


        	//Table headers
	        strHTML += '<tr><td>Internal ID</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>';


        	//Loop through the search results and adding them as table items
	        for (var int = 0; int < srchRes.length; int++) {


			strHTML += '<tr><td>';
		    	strHTML += srchRes[int].id;
    			strHTML += '</td><td>';
	    		strHTML += srchRes[int].getValue('srchCol1');
    			strHTML += '</td><td>';
    			strHTML += srchRes[int].getValue('srchCol2');
	    		strHTML += '</td><td>';
	    		strHTML += srchRes[int].getValue('srchCol3');
	    		strHTML += '</td><td>';
    			strHTML += srchRes[int].getValue('srchCol4');
	    		strHTML += '</td>';
		}


		strHTML += '</table>';


		//Call the alert dialog
		var options = {
	            title: "Alert Dialog - Saved Search",
	            message: strHTML
	         };
		dialog.alert(options);
	}


	return {
		pageInit : pageInit
	};
});