Use a UI Action to launch a custom component in a modal so an agent doesn't have to navigate to a different screen to accomplish a task.

Before you begin

Role required: workspace_admin

About this task

Launch a custom component in a modal so an agent doesn't have to leave the current screen. For example, you can launch a modal that contains contact information about the customer named in an open record so an agent can ask callers to confirm their identity. The following example shows a list in a modal.

List in modal

Procedure

  1. Develop and deploy a custom component to your instance.
    For more information, see Custom components.
  2. Create an entry in the Registered Scripting Modal.
    1. In the Filter Navigator, enter sys_aw_registered_scripting_modal.list to open that table.
    2. Click New.
    3. Use the search icon (search icon) to select a component, in this case, use sn-workspace-header.
    4. Enter the name of the API, in this case showHeader.
    5. Public API gets auto-populated:
      Register modal
    6. Click Save.
  3. Author your UI Action to render your component in a modal.
    1. Create a new UI Action for the appropriate table and on the Workspace tab, select either Workspace Form Button or Workspace Menu Button depending on how and where you want the UI Action to appear.

      For information on creating a UI Action, see Set up custom UI actions in legacy workspace.

      Workspace form button or menu

      When you select one of the check boxes, the Workspace Client Script text box appears.
    2. Enter the following code in the Workspace Client Script text box: 
      function onClick(g_form) {
  g_modal.global.showHeader({
    title: 'Test custom modal',
    confirmTitle:'YES',
    params: {
      primaryValue: 'THIS IS A PRIMARY VALUE',
      secondaryItems:{}
    }
  }).then(function(result){
    alert('confirm:'+result);
  }, function(error) {
    alert('cancel:'+error);
  });
}
  4. Now test the UI Action by opening a record in Workspace from the table you selected when creating this UI Action.
    The UI Action should appear in the Form pane.