Built something you're proud of? Tell the story. A quick G2 review of App Engine or Build Agent helps other developers see what's possible on ServiceNow. Share your experience.

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

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

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