Render Sections as Tabs with UI Builder

Greg26
Tera Contributor

Is there a way to render sections as tabs without explicitly using the tabs component when using a form component?

SCR-20230626-okwn.png

 

 

SCR-20230626-olia.png

  

1 ACCEPTED SOLUTION

Alisa Tipisova
ServiceNow Employee
ServiceNow Employee

The only way to do it now is with tabs component.

If you open your record in UI Builder, you can add a repeater tab and pass record sections to data array.

Screenshot 2023-06-27 at 16.40.21 (2).pngScreenshot 2023-06-27 at 16.40.26 (2).png

 

Then you need to add Form component to this tab and configure fields you're passing there. Just use record form preset and modify sections field with script like that:

Screenshot 2023-06-27 at 16.46.53 (2).png

View solution in original post

4 REPLIES 4

Alisa Tipisova
ServiceNow Employee
ServiceNow Employee

The only way to do it now is with tabs component.

If you open your record in UI Builder, you can add a repeater tab and pass record sections to data array.

Screenshot 2023-06-27 at 16.40.21 (2).pngScreenshot 2023-06-27 at 16.40.26 (2).png

 

Then you need to add Form component to this tab and configure fields you're passing there. Just use record form preset and modify sections field with script like that:

Screenshot 2023-06-27 at 16.46.53 (2).png

Greg26
Tera Contributor

Super helpful thanks!

davidpridemore1
Tera Contributor

I am able to get the form sections to repeat, and in the preview, I see the fields appear below. However when I go to the experience URL, I don't see the fields. It's just empty tabs with no options to collapse or uncollapse or anything of that nature.

adding a container to hold the form was my issue. I didn't have one previously

 

structure must be:

  • Tabs
    • Repeating Tabs
      • Column Layout
        • Column 1
          • Form