Creating a custom user interface

Elements for creating user input forms

For access through the standard portal, reusable harnesses are used for work items. The following rule types support the presentation of work items:

• Sections define the contents, appearance, and behavior of portions of harness forms. They are referenced by flow actions.
• Fragments contain reusable HTML text elements not dependent on a class.
• Text File rules, which can define static aspects of your user interface such as Cascading Style Sheets or JavaScripts.
• Binary File rules, which identify images such as JPG or GIF files.

The HTML text that you enter into HTML rules is known as source HTML. Source HTML contains ordinary HTML code plus JSP tags or directives — server-side instructions that are evaluated at run time to compose the final HTML it sends to the HTTP server (and ultimately to a user's browser session). Known as stream processing, this evaluation accesses the clipboard for text values to insert into the output HTML, incorporates the text of other HTML rules, provides conditional if-then-else testing, and looping through arrays.

Harness forms use the pega:include JSP tag to incorporate multiple sections, which in turn use standard styles and fragments to present properties, labels, and images. For your application, you can copy and tailor parts of these forms as necessary, while inheriting the standard parts.

Design templates

A design template is a section that contains predefined layouts and regions. You can think of it as a blueprint. Use design templates to save development time, increase the reusability of UI elements, and make your application's look and feel more consistent.

For more information, see the article Designing sections by using design templates.

Skins

Use skins to specify the presentation of your content. Separating the content that is defined in sections and harnesses from its presentation ensures greater consistency and promotes reuse of elements.

CSS helper classes

You can use standard Cascading Style Sheet (CSS) helper classes to make small adjustments to cells and layouts, rather than copying and editing a format in the skin. For example, you can use a CSS helper class to center an element or to double a standard margin for an element. By using CSS helper classes, you not only save development time and ensure consistency, you also improve application loading time because you avoid creating unnecessary static content for your application.

HTML forms

Standard facilities are provided for those workers and managers who use applications throughout the workday. These facilities support:

• Entry of new cases
• System-maintained worklists of assignments sorted by decreasing urgency
• Finding, reviewing, updating, and performing assignments

Tools

These tools support your evolution of the user interface of your applications:

• Harnesses preview and the Application Explorer — Allow you to interactively revise the content and the layout of a user form or flow action form
• UI Gallery — Presents working examples of controls and user interface features
• Live UI — View, edit, and interact with the hierarchy of page artifacts in a developer environment or in an application at run time
• Image Library landing page tab — Helps you find and identify the name of images that are available as binary file references
• Clipboard tool — Shows the current property values in internal format

When a user submits an HTML form, the values that they enter in input fields are recorded as property values on the clipboard. The values that users enter may not be in the format required by the property definition, or might not pass validation tests.

UI Kit

The UI Kit is a framework of components (modules of HTML, CSS, and JS, such as a form input with a label and validation) and reusable formats and templates.

For more information, see UI Kit rule set.

Guardrail compliance

For information about best practices for designing user interfaces, see the article Top Ten Usability Guardrails.