Implementing UI Actions compatible with both UI16 and Workspace

RyoyaFukuda
Tera Contributor

Hi all.
I'm currently facing a challenge regarding the implementation of form UI Actions that function correctly in both UI16 (the classic UI) and Workspace (e.g., Agent Workspace).

What I want to achieve:
I aim to create a UI Action that performs client-side input validation and displays a confirmation dialog when a record's specific state changes, followed by server-side record update processing.

Specific requirement example:

  • On an Incident form, when the "Resolve" button is clicked, check if a Resolution Note has been entered.
  • If the check passes, display a final confirmation dialog to the user.
  • If the user confirms, change the Incident status to "Resolved" on the server-side and save the record.

My current understanding and challenges:

  • There are cases where the behavior of client-side APIs like g_form in UI Action client scripts may differ between UI16 and Workspace (e.g., how messages are displayed, availability of certain methods).
  • I would prefer to use the same codebase as much as possible for both environments, while branching the processing only when necessary for environment-specific behaviors.

Questions:

  1. What are the best practices for implementing a UI Action (form button) that includes client-side scripting and is compatible with both UI16 and Workspace?
  2. Specifically, for client-side input validation and confirmation dialogs, could you advise on compatible scripting methods across both environments, or recommended approaches for environment detection and branching?
    • Is it appropriate to use g_form.isWorkspace() for this purpose?
    • What would be a good strategy for distinguishing between message display methods (g_form.addErrorMessage, alert, etc.)?
  3. If a UI Action alone is insufficient or if more advanced control is needed on the Workspace side, should I consider combining it with Workspace Client Scripts (WSCS) or exploring other approaches (e.g., using UX Framework components)? If so, what considerations should I keep in mind?

Any implementation examples, relevant official documentation, or existing solutions you may know of would be greatly appreciated.

Thank you in advance for your kind assistance.

1 REPLY 1

Tanushree Maiti
Tera Patron

Hi @RyoyaFukuda 

 

Try with this UI Action :

 

  • Action name: resolve_incident (must be unique)
  • Client: true
  • Onclick: resolveINCClient()
  • Workspace Form Button: true (Checked)
  • Format for Configurable Workspace: true (Checked)

Sample code/Not tested

function resolveINCClient () {

    var closeNotes = g_form.getValue('close_notes');   

    if (closeNotes == '' || closeNotes == null) {

        g_form.showFieldMsg('close_notes', 'Please enter a Resolution Note before resolving.', 'error');

        return false;

    }

        try {

        g_modal.confirm('Confirm Resolution', 'Are you sure you want to resolve this Incident?', function(confirmed) {

            if (confirmed) {

               gsftSubmit(null, g_form.getFormElement(), 'resolve_incident');

            }

        });

    } catch (e) {

             if (confirm('Are you sure you want to resolve this Incident?')) {

            gsftSubmit(null, g_form.getFormElement(), 'resolve_incident');

        }

    }

}

if (typeof window == 'undefined') {

    serverResolve();

}

 

function serverResolve() {

    current.incident_state = 6;

    current.state = 6;

    current.update();

    action.setRedirectURL(current);

}

 

 

Refer: How to use UI Actions in Workspaces

KB1811593 Workspace Fundamentals: Understanding UI Actions and Declarative Actions on a Next Experie... 

Please Accept the solution if it assisted you with your question & Mark this response as Helpful.
Regards
Tanushree Maiti
ServiceNow Technical Architect
LinkedIn: https://www.linkedin.com/in/tanushreemaiti