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

Jonas27 · ‎04-30-2021

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);
}

Oleg · ‎05-12-2021

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:

create new page named "Form" for example
add two required parameters: table and sysId
add client state parameter with the name "view", type "String" and the value "" (empty string)
add data resource to the page: Glide Form from "@servicenow/now-record-form-connected" application
configure the Glide Form to use @context.props.table as Table, @context.props.sysId as Sys ID and @state.view as Forced view name
add container to the page following Form component
use add CSS rules flex-direction: row; and gap: 1em; on container
add two buttons inside if the container: "Use default view" and "Use mobile view"
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");
```
Bind "Button clicked" event of the button "Use default view" to the client script "Set Default View"
Bind "Button clicked" event of the button "Use mobile view" to the client script "Set Mobile View"
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".

View solution in original post

Brad Tilton · ‎04-30-2021

Have you bound the client state parameter to the view property on the form component and which form component are you using? You may also need to tell the form component to refresh itself.

Jonas27 · ‎04-30-2021

Thanks a lot for you answer. 😃

Yes, I bound the client state parameter to the view property on the form component.

I'm using the component "Form".

How do I tell the component to refresh itself?

Brad Tilton · ‎04-30-2021

I played around with this a little bit and wasn't able to change the view and make the form component refresh. You may need to bind the view to a page parameter, then route to the other view so the whole page refreshes with the new page parameter.

Jonas27 · ‎05-03-2021

That sounds like a great video idea, doesn't it? I'm sure a lot of others user will want to change views via buttons in records and it seems like the way to do it is a bit different from changing views in lists.

It would also help me, since I don't really know how to implement your answer.