Use a layout template to create layouts that cannot be achieved using the out-of-the-box layout templates provided by App Studio.

Layout template components provide layouts for Constellation views.

In standard web development, layouts are created using CSS primitives, such as, CSS Grid and CSS Flexbox. In the Constellation Design System these CSS primitives have a React wrapper applied and the components are called Grid and Flex respectively. These Constellation Design System primitives are the basis of all layout templates.

The Grid organizes the layout of an application in a grid format containing columns and rows. The intersection between a column and row creates a container and each container includes an item. The relationship between the containers and items defines the structure of the layout.

The Flex component organizes the layout of an application in a uni-directional format of either columns or rows. A container will contain either a row or a column of items. A container can wrap items, and items can also be containers. The relationship between the containers and items builds the structure of the layout.

View model

Using App Studio, views are configured with layout templates that have been either predefined or selected by the author. The view model is a JSON data structure that describes the view metadata and is organized as shown in the following image.

A screenshot that contains information on view models and a visual depiction of a sample view model.

View model
All Constellation DX component layout templates provide slots called Regions. When configuring views at design time, App Studio authors add components, such as, fields, field groups, views, insights, and widgets into Regions. The layout template code determines how the components slotted into Regions are displayed at run time. Most layouts have been designed and are available through the Constellation design system, such as, the Case Page layout, which cannot be extended. Some of the Constellation design system templates are available for use in your Constellation DX component layout templates.

The DX API preview of a sample form and its fields.

DX API preview

When presentational templates are used in your Constellation DX component templates, the layout and responsiveness of a View will be optimized to provide a seamless user experience. Depending on the type and location of your View, the available Constellation DX component templates and their behavior might vary.

The behavior of the templates, including breakpoints, white space management, and wrapping, is designed to facilitate compliance with the latest accessibility standards and requirements.

You can create three types of Constellation DX component layout templates using the Constellation DX Component Builder:
  • Details
  • Form
  • Page

Note: The three types of Constellation DX component layout templates use the Constellation Design System layout resources, either directly or indirectly.

Details layout template

The Details layout template controls the layout of the Details tab, which is available in both in the Case View and the Data type. Applying the Details template renders the child components referenced in the Regions as read-only.

The following video shows an example of a Details layout template in the Case View. In this video, the Edit view window of a Details template is opened. A customized Details layout template called Extension Details Layout Template has been created. To change the type of the Details template to the customized template, Edit is clicked, Extension Details Layout Template is selected, and Submit is clicked. The Preview now refreshes and displays the new Details layout template. The video now proceeds to show how highlighted fields can be enabled and added to the details layout template. The Enable highlighted fields checkbox is selected and within the Highlighted fields section, + Add is clicked. The Commit DateTime field is selected and Add is clicked. The Commit DateTime field is displayed in the Highlighted fields section and the preview refreshes to display the Commit DateTime field at the top and the remaining fields at their regular positions.

Partial Views

Partial Views use Details templates to cluster UI components into a convenient module that you can reuse in different contexts throughout your application. For more information on partial Views, see Configuring partial Views.

You can use partial Views in read-only scenarios, for example, as tabs on the full View page. Partial Views have prescriptive layouts to improve accessibility and readability when Views using the template are displayed to the user. For more information on the prescriptive layouts applied to partial Views, see Details template.

You can create your own Details layout templates using the following template samples:
  • Details: provides highlighted data and a single region example
  • Details Region: provides highlighted data with two regions example

These templates can be used as the basis for your own templates that can contain more than two regions, or remove the ability to set highlighted data.

Details templates are added to partial Views. This will render the content read-only by default. Partial Views can be included in Form Views, which enables creating read-only areas on a form, where the read-only data is not submitted when the form is submitted.

Form layout template

Forms are designed to efficiently collect data from the users of your application. All forms can be edited, and the default form template is designed to ensure optimal responsiveness, consistency, and accessibility.

For more information on form layout templates, see Default form template.

The following video shows an example of a form layout template in the Case View. In this video, the Edit view window of a form template is opened. A customized form layout template called Extension Form Layout Template has been created. To change the type of the form template to the customized template, Edit is clicked, Extension Form Layout Template is selected, and Submit is clicked. The Preview now refreshes and displays the new form layout template.

You can create your own form templates using the following template samples:
  • Form – single column form layout
  • Form Region – two column form layout

Similar to the Details template, you can change form templates to have more columns or a completely different layout. By default, the components rendered in form templates are not read-only (apart from embedded partial Views) and any fields including those in embedded form views will be submitted when the form is submitted. Also, by default, form templates cannot contain widgets.

Page layout template

Page layout templates control the layout of landing pages. For more information on landing pages, see Landing pages.

The following video shows an example of a page layout template in the Portal View. In this video, the Edit landing page window of a page template is opened. A customized page layout template called Extension Page Layout Template has been created. To change the type of the page template to the customized template, Edit is clicked, Extension Page Layout Template is selected, and Submit is clicked. The Preview now refreshes and displays the new page layout template.

You can build your own page layout templates using the Page template sample. This template lets you provide App Studio authors with a configurable page (portal) layout template. This template also demonstrates how to enable the Get Next Work functionality and the ability to use an inline layout for insights.