UI Builder - How to reload a form on save?

Hendrik6 · ‎09-02-2022

Hello

In UI Builder I have a workspace that contains two simple pages. The first page displays a list of records and the second one contains a form and a button. When I click the 'New' Button in the header of the list I want to open the form, fill it out, submit it and return to the list page. When I open an existing record, I want to open the form as well, fill out the fields, save the form and return to the list.

However currently I am facing two problems:

I am starting at the list page and click on the 'New' button. Then I fill out the form and save it and get returned to the list. When now click on the 'New' button again, the form opens again, but it displays the record that I just created.
Again, I am starting at the list page, but now I click on an existing record. The form opens and I change some values. Then I save the record and get returned to the list. However, the records values are not changed. I must manually refresh the list.

I found a solution how to solve both problems, but it feels a bit hacky, and I am wondering whether there is a better solution. So let me explain my setup:

As I mentioned, the layout is very simple:

I have a list of records on one page with the path 'list'.

And I have page with the path 'form' that contains a form and two buttons. The button 'To List' is only for convenience to navigate back to the list. The 'Save' button saves the form and returns to the list. The page has to mandatory parameters 'table' and 'sys_id' an optional one called 'redirect'. The mandatory ones I use to configure the data resource and to control whether a new record should be created (sys_id = -1). The optional one indicates to which page should be redirected if it is set.

The 'Save' button has an event handler assigned that saves the record.

Furthermore, there is a data resource on the page that contains the form. Whenever, the user saved the form several 'Screen Status Changed (Form)' events get fired. I attached a client script to reload the page and to navigate to another page.

The client script first checks if the status of the 'Screen Status Changed (Form)' event is either 'inserted' or 'updated'. If this is the case it executes an UI action, that reloads the page via loaction.reload(). If the optional parameter 'redirect' is set the client script redirects to the page which is provided.

function handler({
    api,
    event,
    helpers,
    imports
}) {
    // The script is assigned to the "Screen Status Changed (Form)" event of the Glide Form data resource.
    if (event.payload.status == 'inserted' || event.payload.status == 'updated') {
        // Reload Page
        api.data.glide_form.executeUiAction({
            actionSysId: '2b2496a71b61d9d0cd4d777d8b4bcbeb'
        });
        // Navigate to page if the parameter redirect contains a value
        if (api.context.props.redirect)
            helpers.navigate.to(api.context.props.redirect);
    }
}

With this approach I can ensure that both problems are solved. However, a full reload of the page is a bit 'heavy' and takes some time. In addition, when I look at the submit behavior of the standard ServiceNow forms I noticed that they do not require a full reload of the whole page to refresh the list or the form.

Does anyone have an idea how I can achieve the same behavior as in ServiceNow forms and refresh it faster?

Kind regards,

Hendrik

Brad Tilton · ‎09-03-2022

Hi Hendrick,

If you're just looking to refresh the data in the form, instead of reloading the whole page, you can just refresh the Glide Form data resource by using its refresh event handler or calling api.data.glide_form_1.refresh() in your script. Refreshing the data resource should also refresh the data on the page without having to reload the entire page structure.

(your solution is a really creative way to solve that problem, btw. I would never have thought to get around the sandboxing of the page script area by just calling a UI action)

Hendrik6 · ‎09-05-2022

Hello Brad

Thank you for your reply! I tried this approach before as well, but resorted to reload the whole page, since it was not refreshing the form.

I added a new button to refresh the form to the user interface. On click it triggers a script that refreshes the form.

Here is my script, that also includes a reload of the data source, but neither seems to have an effect:

/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    console.log('refresh & reload triggered');
    api.data.glide_form.refresh();
    api.data.glide_form.reload();
}

I checked the console and the comment gets logged whenever I click the button.

I created another script to log information around the emitted events:

/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    console.log('New event emitted:');
    console.log(event.name);
    console.log(event.payload);
}

Then I added this script as an event handler to the following events associated with the form:

Glide Form data broker fetches started (Form)
Glide Form data broker fetches succeeded (Form)
Glide Form data broker fetch status updated (Form)
Screen Status Changed (Form)
Set loading state (FORM)

These events get normally triggered when I reload the page, submit a new record or update an record. However, when I press the refresh button none of them get triggered.

Furthermore, it seems a bit odd, that I can not directly add to the button click event a pre-built event handler that refreshes the form. Available is only the option to reload the form. But the documentation clearly states that both are available.

Rahul Tiwari1 · ‎06-09-2023

Hi @Hendrik6

did you get solution for this.

Community Alums · ‎06-22-2023

Hello Hendrik6,

I attempted what your original post contained and was able to get this to partially work using the following method. Notice glide_form was changed to gform.

function handler({
    api,
    event,
    helpers,
    imports
}) {
    // The script is assigned to the "Screen Status Changed (Form)" event of the Glide Form data resource.
    if (event.payload.status == 'inserted' || event.payload.status == 'updated') {
        // Reload Page
        api.data.gform.executeUiAction({
            actionSysId: '2b2496a71b61d9d0cd4d777d8b4bcbeb'
        });
        // Navigate to page if the parameter redirect contains a value
        if (api.context.props.redirect)
            helpers.navigate.to(api.context.props.redirect);
    }
}

You were on the right path. Calling this script from the 'Screen Status Changed (FORM)' event.
The behavior I'm seeing is that a new chrome_tab opens with the expected page variant, but the initial new record variant stays open. Curious if you've gotten this far with it?