Configuring views
When users interact with your application, the interface they see is composed of views. Views hold UI components, such as fields, widgets, and other views, and organize them by using out-of-the-box layouts that match common interface scenarios. By configuring a view, you decide which template to use, and what kind of content to display in your view.
Whenever you configure your view, the basic setup of your workspace is similar. The
following figure presents a sample representation:
While your workspace setup does change depending on the type of view you are editing, it generally includes the following elements:
- 1: Add view button
- Use to create new views.
- 2: Views list
- When you access views through the User Interface tab of your case type, this list displays all views related to the specific case, divided by type.
- 3: Template options
- Use to select a template for your view. Depending on the type of your view, the available templates might vary. For example, landing pages use different templates than forms.
- 4: Label and heading
- Help you identify your view. The label is used internally in your application, for example on view lists, while the header is displayed above your view at run time.
- 5: Additional settings
- Other settings for adjusting the look and behavior of your view. Depending on the type of your view, the available choices might vary. For example, additional settings in a table include options for defining the data source for the table.
- 6: Fields
- Display and collect information in your application. You can use the icons next to the field name to remove the field or access extra configuration settings. The configuration settings for fields include common settings, such as visibility or helper text, and field-specific settings. For example, currency fields have options for defining a currency symbol.
- 7: Views
- Embedded views. The link in the view name opens the configuration options for that view.
- 8: Add button
- Allows you to populate the view with another existing UI component, such as a field or a view. In some views, for example landing pages, you can also use this button to add insights and widgets.
- 9: Preview
- Shows an example of what your view looks like. The preview reflects changes you make to the configuration in real time.
- Configuring a full view
Give cases and data objects a visual representation to help users access the data that they need to successfully process work. When you create a case type or data object, the application automatically adds a view that represents the visual framework for processing related information.
- Configuring case and object views
Cluster UI components into a convenient module that you can reuse in different contexts throughout your application by using case and object views. You can use case views for case types and object views for data objects in read-only scenarios, for example, as tabs on the full view page.
- Configuring list views
Help users access and compare data with lists. Use tables, timelines, and tile galleries in your applications as a flexible basis for users to process large amounts of information. For example, tables in a price comparison application can help users efficiently identify the best offer.
- Configuring forms
Help users complete their work efficiently by configuring intuitive form views. For example, in a loan application, you can create a view with fields for collecting data about a secondary applicant and, when needed, reuse that view in different contexts throughout the application. By default, the system creates one form view for each step in the workflow.
Previous topic Creating views in Cosmos React Next topic Configuring a full view