Is is possible to have multiple form components on a single page in the Now Experience UI Builder?

Dana Weiland
Tera Contributor

I have a scenario in which I would like to present two forms for two related records from two separate tables on a single page in UI Builder.  When I add both form components to the page all appears to render correctly in the UI Builder workspace, but upon previewing the page, the second form always presents an error that the component is not configured.  I have tried with different tables, setting it up the same way on a test page, but all with the same results.  Has anyone had success with this scenario or know if this is possibly an undocumented issue?

1 ACCEPTED SOLUTION

Hi Dana,

I have heard of some issues with multiple form data resources on the same page, but don't have a lot of specifics, unfortunately. 

One thing you might look into is viewports, which basically load a sandboxed subpage in a viewport area. This might allow you to bypass the issue of multiple form data resources while still showing two forms at once. You can use page properties and events to pass data from the parent page to the subpage and vice versa.

View solution in original post

9 REPLIES 9

Brad Tilton
ServiceNow Employee
ServiceNow Employee

I haven't validated it yet, but I believe we've added the ability to have multiple form components/controllers on the same page in Xanadu.

Yes, in Xanadu you can have multiple Form Components on a single page. However, passing custom properties determining component visibility does not work.

My use case scenario is show fields from RITM on Task page. RITM fields are to presented on a separate Form Component. The RITM Form Component obtains table and sys_id from task.parent dynamically via data binding. As soon as I set it up this way, UI Builder either ignores and defaults to values from the first Form Component (task) or straight up freezes.

I am on Yokohama, developing inside CSM/FSM Configurable Workspace, and am using the design for "SOW Form Modal V2" (which is in Service Operations Workspace). It's a page that loads in a viewport modal from a Record Page, has a form component which uses the Glide Form data resource. Everything works well except it seems there's no way to differentiate the glide form in the modal from the Form controller in the underlying record page. For example, if a mandatory field validation fails in the modal, the client script adds a field message:

 
            api.data.glide_form_1.showFieldMessage({
                fieldName: emptyMandatoryFields[i],
                message: await helpers.translate("{0} is required", emptyMandatoryFieldsLabel[i]),
                type: 'error'
            });
 
But that somehow also adds the message to the underlying data.record.form.fields object's "messages" array. Can't figure out why when the code above seems to be targeting the specific form on the modal. @Brad Tilton thoughts?

Dana Weiland
Tera Contributor

None of these posts mention any limitations to the number of form components on a page or issues there may be with multiple form components.

Nick43
Tera Contributor

I implemented viewport with a form inside subpage. It works but not well. Below are some of the issues I ran into

 

1. When the modal loads it displays component has not been configured (for brief second) before actually loading component. I tried several ways including trying to load view point at several extension points with no luck.

2. When a user is accessing the modal viewport for the first time the modal displays "Component has not been configured" until they reload the page and it works thereafter. Did not go down the rabbit hole of troubleshooting it. It would be confusing for end users.

3. When trying to access Glide Form transform that is connected to the form from UX Client script, nowRecordFormBlob is {}. However, everything on the form itself loads correctly.

 

Hope this helps someone who is going down the same path of implementing modal > viewport > subpage > GlideForm

 

instance version - San Diego