Service Catalog forms in Service Portal
Summarize
Summary of Service Catalog forms in Service Portal
Service Catalog forms in Service Portal are rendered within widgets using a two-column layout. However, complex forms with multiple containers, variable sets, or nested layouts may not display as expected. This guide provides practical recommendations and explains how forms are converted for optimal display in Service Portal, helping you design scalable and user-friendly forms.
Show less
Key Recommendations
- Keep forms simple: Use fewer containers, variable sets, and client scripts to avoid display and debugging issues in Service Portal.
- Design with mobile in mind: Catalog Client Scripts and Catalog UI Policies behave as they do in mobile, so consider mobile compatibility when scripting.
Form Rendering Rules in Service Portal
- Only top-level container settings are honored; nested containers and splits are flattened into a single column.
- A maximum of two columns is supported; forms with more columns are reorganized into two columns.
- Variable sets are treated like containers and follow the same rendering rules.
- Default variable sizes are not supported in Service Portal.
- For non-catalog forms, Service Portal Table form views determine the layout.
Common Layout Conversions
- Single-column forms: Render as expected with a straightforward layout.
- Two-column forms with subcontainers: Subcontainers’ two-column layouts are ignored and rendered as single columns.
- Forms with variable sets: Two-column layouts inside variable sets are ignored if nested within containers.
- Nested containers and variable sets: Complex nesting is flattened and rendered as a single column.
Handling Complex Forms
Because complex forms often do not display correctly, you can temporarily render catalog items, record producers, and order guides in an iFrame within Service Portal. This workaround allows your portal to function while you simplify the form structure.
Limitations When Using iFrames
- Attachment icons on catalog items and record producers are not visible; users cannot attach files unless you add an attachment button to your form.
- Hover-over icon click-throughs are not available.
- Forms rendered via iFrame are not optimized for mobile devices.
Best Practices
Test all changes in a development or test environment before deploying updates to your production instance to avoid disruptions.
Service Catalog forms are rendered within Service Portal widgets in a two-column layout. Complex forms may not display as expected.
Recommendations when creating Service Catalog forms
Use the following recommendations as a guide to building scalable forms that can be used in both applications:
- Keep forms simple. Because forms with multiple containers, variable sets, and client scripts do not always display as expected in Service Portal, keep forms short to eliminate conversion and debugging issues.
- Think in mobile. Any support for Catalog Client Scripts or Catalog UI Policies is the same as in mobile. Review the following resource: Mobile client GlideForm (g form) scripting and migration.
Form rendering in Service Portal
Containers and variable sets within Service Catalog forms are translated into a two-column layout when implemented in Service Portal. Service Catalog forms are rendered in Service Portal using the following rules:
- Only the top-level container settings are honored. If there are other containers within the top-level container, they are rendered as a single column. If there are container splits or nested containers within these additional containers, they are rendered as a single column. A top-level container is not a child of any other container.
- There can be a maximum of two columns in Service Portal. If your implementation includes forms with more than two columns, the fields are reorganized into two-columns in Service Portal.
- Variable sets are treated as containers. All previously listed rules apply to variable sets as well as any containers within them.
- Default variable size is not supported in Service Portal.
For other forms in the platform, the view determines how the form displays in Service Portal. For base system tables, the form opens in the Service Portal using the Service Portal Table form views.
Example layout conversions
The following examples demonstrate how Service Catalog forms display in Service Portal.
- Single-column form
A Service Catalog form with:
- Two containers.
- A single-column layout.
Figure 1. Service Catalog form In Service Portal, the single-column layout renders as expected.
Figure 2. Service Portal result - Two-column layout with subcontainers
A Service Catalog form with:
- A container with a two-column layout.
- A subcontainer with a single-column layout.
- A subcontainer with a two-column layout.
Figure 3. Service Catalog form In Service Portal, the two-column layout setting of the subcontainer is ignored. The subcontainer renders as a single column.
Figure 4. Service Portal result - Two-column layout with variable sets and subcontainers
A Service Catalog form with:
- Containers with single-column and two-column layouts.
- Variable sets with a two-column layout within containers.
Figure 5. Service Catalog form In Service Portal, the two-column layout settings of the variable sets are ignored when inside a container column.
Figure 6. Service Portal result - Containers within variable sets
A Service Catalog form with:
- Variable sets with single-column layouts.
- A container with a single-column layout with a container split within a single-column variable set.
- A container with a two-column layout within a single-column variable set.
Figure 7. Service Catalog form In Service Portal, the container split and two-column container settings are ignored when inside a single-column variable set.
Figure 8. Service Portal result - Nested containers
A Service Catalog form with:
- Containers that contain variable sets.
- Variable sets that contain nested containers.
Figure 9. Service Catalog form In Service Portal, nested container formatting is ignored and displays as a single-column.
Figure 10. Service Portal result
Render a complex form in Service Portal using an iFrame
Because complex forms do not display as expected in Service Portal, you can render catalog items, record producers, and order guides in Service Portal using an iFrame. This workaround is a temporary solution to enable your Service Portal to function as expected while you simplify any complex Service Catalog forms.
When rendering items in an iFrame in Service Portal, the following limitations apply:
- On catalog items and record producers, the attachment icon is not visible. As a result, users cannot attach any files during the submission. As a workaround, you can add the attachment button to your form.
- Click-through for the hover-over icon is not available.
- Forms are not optimized for a mobile environment.
For more information, see the Service Catalog on Service Portal post in the ServiceNow Community.