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
