Service Catalog forms in Service Portal
Summarize
Summary of Service Catalog forms in Service Portal
Service Catalog forms in Service Portal are displayed within widgets in a two-column layout. However, complex forms may not render correctly. To ensure optimal performance and user experience, it's vital to follow specific guidelines when creating these forms.
Show less
Key Features
- Simplicity: Keep forms simple and concise to avoid rendering issues caused by multiple containers, variable sets, and client scripts.
- Mobile Optimization: Design forms with mobile usability in mind, as client scripts and UI policies behave similarly to mobile applications.
- Rendering Rules: Only top-level container settings are utilized, with nested containers rendering in a single column. A maximum of two columns is allowed in Service Portal.
- Variable Sets: Treated as containers, they follow the same rendering rules as other containers.
Key Outcomes
To handle complex forms that do not display correctly, consider using an iFrame for rendering catalog items, record producers, or order guides. Note that this workaround has limitations, such as the absence of an attachment icon and optimization for mobile use.
Always test changes in a development environment before deploying them to production to ensure a smooth user experience in the Service Portal.
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.