- Add the latest version of UI-Kit to your
application stack.UI-Kit provides you with design templates, CSS helper classes, and core icons.
- Make the application skin inherit from the pyEndUser
skin.UI Kit includes pyEndUser as the default skin for applications. When you create an application, the skin automatically inherits styles and formats from pyEndUser. In this way you can also use the CSS helper classes that are part of the UI-Kit.
- On pages, use screen layouts instead of containers.Screen layouts support responsive behavior, and you can set responsive breakpoints that enable the layout to adjust itself with the screen size.
- In screen layouts, use AJAX containers.AJAX containers are not tied to any specific panel in a layout. Therefore, you can display work items in areas of the screen independently of the layout.
- Use layout groups instead of tabs and accordions.The content of a layout group can be set to display as tabs, accordions, as stacked, or in menu layouts.
- Use dynamic layouts, column layouts, and flexbox helper classes to position user interface elements within layouts.
- Use repeating dynamic layouts instead of tables.Consider the following information about repeating dynamic layouts:
- Repeating dynamic layouts for worklists, which support opening of assignments, also support actions. Actions support is also available for adding and removing rows.
- When you use the Add or Remove action on a repeating dynamic layout, you do not need to use a Run script action.
- You can configure master-detail interaction and views for offline-enabled cases.
- You can create and remove pages with the ClientCache API methods.
- You must handle creation and deletion of the row context page.
- You must configure the Delete action button within the repeating dynamic layout row.
- You must use page lists as the source of repeating dynamic layouts.
- You must configure the local action used to populate the row page with the Use data page option.
- Configure refresh when rules on the user interface elements, such as dynamic layouts, instead of refreshing entire sections.
- Optional: To let users take action on work items while data page-sourced user interface
elements load, configure the defer load settings.For more information about defer load settings, see Configuration options for layouts.
- When you add and configure UI elements, for example, buttons, links, icons, and menu items, use only offline-supported features.
- When you use AJAX containers, use actions that are supported in AJAX containers
for offline-enabled apps:
- Use validate rules to test property input values and page input values against
the conditions that are part of validate rules.For more information, see Validate rules in offline mode.
Ensure UI consistency:
Create a flexible user interface:
Ensure UI operability:
Enhance the user experience: