UI Builder: How to change the view on a form via an event?

[Jonas27]

On a UI Builder page, I have a "Form" component and I want it to change its view, when I click on a button.

As described in the video "UI Builder - Client state parameters, client scripts, and events", I have created a client state parameter, I have created a client script to change this parameter, I have created events to execute the client script, and bound them to a button.

This all works nicely for lists, but when I try to use this method on a form, when I click the button, nothing happens.

Is there something I am missing? Do I have to update the form somehow after changing the client state parameter for the view?

Or do I have to use a different script for changing views in forms? I'm using the script from the video:

/**

 * @param {params} params

 * @param {api} params.api

 * @param {any} params.event

 * @param {any} params.imports

 */

function handler({

    api,

    event,

    helpers,

    imports

}) {

    const viewState = event.payload.view;

    api.setState('form_view', viewState);

}

[Jonas27]

Can anybody else help me with this?

[Oleg · Accepted solution]

You didn't described exactly how you configure Form component. So I'll describe step by step instructions how to change the Form view dynamically starting with creating new page:

1. create new page named "Form" for example
2. add two required parameters: table and sysId
3. add client state parameter with the name "view", type "String" and the value "" (empty string)
4. add data resource to the page: Glide Form from "@servicenow/now-record-form-connected" application
5. configure the Glide Form to use @context.props.table as Table, @context.props.sysId as Sys ID and @state.view as Forced view name
6. add container to the page following Form component
   
7. use add CSS rules flex-direction: row; and gap: 1em; on container
8. add two buttons inside if the container: "Use default view" and "Use mobile view"
9. add two Client Scripts to the page "Set Default View" and "Set Mobile View".
   The code of "Set Default View" should contain one line
   

   api.setState("view", "");​

   
   The code of "Set Mobile View" should also contain one line
   

   api.setState("view", "Mobile");​

10. Bind "Button clicked" event of the button "Use default view" to the client script "Set Default View"
11. Bind "Button clicked" event of the button "Use mobile view" to the client script "Set Mobile View"
12. configure Form component to use sections and fields from the Glide Form data source:
    @data.glide_form_1.nowRecordFormBlob.sections
    @data.glide_form_1.nowRecordFormBlob.fields
    

If you open the page with the corresponding parameters (like /form/incident/e329de99731423002728660c4cf6a73c) you will be able to switch between default and Mobile view of Incident by clicking on buttons "Use default view" and "Use mobile view".

[Jonas27]

Hi Oleg, it worked! Thanks a lot for you detailed description. What did the trick for me, was using the "Forced View" fields in the Glide Form. (That and creating a new page, because in my former page it wouldn't even work with the forced view.)