Easy List Modal on UI Actions

Consider this scenario: you are looking to use a related list to handle data management for a form or have a need to implement a custom UI action, but aren’t impressed by the default slushbucket presented to you when clicking the “Edit” button. There are many drawbacks to the slushbucket view, but perhaps the biggest is the fact that you are unable to modify the way it displays values or how it chooses to represent records you are manipulating. In addition, it is not very visually appealing. Luckily, there is a strong way to present list functionality on a related list and be in complete control of what data is displayed and how without the need to make a complicated UI Page.

This method is called GlideDialogWindow(‘show_list’). This has the native ability to present a list view in a modal window on any form. It does require a few parameters in order to render the form properly – see the below code snippet:

function openChildList() {

               var w = new GlideDialogWindow('show_list');

               w.setTitle(getMessage('Incident List'));

               w.setPreference('table', 'incident_list');

               w.setPreference('sysparm_view', 'context_view');

               w.setPreference('sysparm_query', "sys_id!="+g_form.getUniqueValue()+"^parent_incidentISEMPTY!");

               w.setPreference('focusTrap', true);

               w.render();

}

This code should be used inside of a client-side UI Action. In other words, make sure you are using an onclick element that calls the function at the top. My example above is showing the Incident list with a specific filter and view. Here are the configurable parameters:

• table: Set the table of results you wish to display. Please be aware that you will need to pass it a value of “[table_name]_list”. So the configuration item table would be “cmdb_ci_list”, for example. Conversely, you can pass it just the table name if you wanted to show the form view instead of the list view!
• sysparm_view: The view you’d like to display on the form (this can be used to present only the fields you want to display, just make your own view and present it here). Keep in mind that view names are determined by placing underscores in place of spaces.
• sysparm_query: An encoded query that represents the filtered data you’d like to show. Keep in mind that because this is client-side you cannot access gs functions. You can build this yourself by opening up a list view on this table, making your filter on the condition builder and right clicking to copy the encoded query.

This is how you display your modal, but there’s a good chance your requirement or need doesn’t stop there. It’s likely you want the user to interact with this data in some meaningful way, which means that you need a UI context action that will allow them to checkbox and action these list items.

For my UI action, I made a “List choice” UI action as follows:

function confirmAddRelatedIncident() {



	var checkedIncidents = g_list.getChecked();

	var incidentCheck = new GlideAjax('getRelatedIncidents');

	incidentCheck.addParam('sysparm_name', 'getIncidents');

	incidentCheck.addParam('sysparm_incidentList', checkedIncidents);

	incidentCheck.addParam('sysparm_incidentCurrent', g_form.getUniqueValue());

	incidentCheck.getXML(getIncidents);

}



function getIncidents(response) {

  //var answer = response.responseXML.documentElement.getAttribute("answer");

  location.reload();

}

This grabs the incidents selected (this is the g_list.getChecked() method) and passes it to a script include that commits the records. Of course there are many ways to manipulate your data depending on the requirement or need. Hopefully this method proves helpful as an alternative way to present related table data in a cleaner, more controlled way.