Modifying Presentation of Components

To modify presentation properties of a form component, such as, its size, position, alignment, or possibly properties of a custom form component, use presentation hints. In the Application User Interface, hints translate into classes of the element.

You can use the hints defined in the Standard Library or you can define your custom hints.

Important: Any hint assigned to a component is inherited by its child components. Note that some hints are defined implicitly and are not visible in the Form editor; for example, layout components have their width set to 100% by default and their children therefore have the width set to 100% as well. To ignore inherited hint values, override the hint value on the child component with another value or the null value if you want to erase the value.

Standard Library Hints

The ui module comes with a set of default presentation hints stored in the in the ui::ui.hints file in the Standard Library.

Assigning Hints From the Standard Library

To assign a form component a hint from the Standard Library, do the following:

1. In Form editor, select the form component.
2. In its Properties view, select the Presentation Hints tab.
3. Display the Hint Table tab.
4. Click the Add button to create a new hint or select an existing hint in the table and click Edit.
5. In the Edit dialog window, define the hint properties:
   1. In the Hint name text field, select a predefined hint in the drop-down menu. You can also enter a hint name manually.
   2. Either select a predefined hint value in the Predefined option drop-down or define its value in the Expression text area.

Editing a presentation hint

Custom Hints

Hints can be defined either directly on a form component or in a hints definition file. The hints defined in a hints definition file are available in the entire parent module.

Make sure that the component implementation accepts and processes the hint. Otherwise, the hint is ignored.

To define hints that can be used by all forms in the module, do the following:

1. Create a hint definition file (go to File New Hint Definition, and select the parent module and provide the definition file name).
2. In the GO-BPMN Explorer, double-click the hint definition file.
3. In the Hint Editor, click the Add button.
4. On the right, define the hint properties:
   • Name: hint name displayed in the Hint name drop-down menu.
   • Component: comma-separated list of form components that can use the hint
   • Hint options: value options available for the hint in the Predefined option (the label holds the displayed name of the option and the expression holds the value it is translated to when rendered)

Hints editor with a hint definition

Assigning Custom Hints

To assign a form component a custom hint or a standard-library hint, do the following:

1. In the form editor, select the form component.
2. In its Properties view, select the Presentation Hints tab.
3. On the Additional Hints tab click Edit.
4. Define the hint name and values as a map of a String and Object (for example, ["myhint" -> "My Hint Value" + varString]).

Using Hints

Aligning Form Components

To define alignment of child components in the Vertical, Horizontal, and Grid Layout, and table Column, use the align hint. Note that the top, middle, and bottom align settings are simply ignored.

On a table Column, the alignment is applied also on the column header. If necessary, you can override the setting with the header-align hint.

Resizing Form Components

Component size is defined by the height and width component hints. Where applicable, the size hints are defined implicitly. However, you can be override them with an explicit hint definition.

Hint values can be defined in the following units:

• font-relative units: size definition relative to the font size
  • em: size in factors of the letter m size
  • ex: size in factors of the letter x size
• absolute size: component size in pixels (px), picas (pc), points (pt), mm, cm, or inches (in)

• relative size to the parent: component size in relation to the size of the immediate parent

  You can use the predefined values:

  • fillparent: identical to 100%,
  • wrapcontent: component size is set to the sum of sizes of children components
• expand: Sets the expand ratio for a component. If there is only one component with an expand ratio, the component will be expanded to the maximum possible size within its parent. This hint can only be applied to a table Column or the direct child of a Vertical or Horizontal Layout. Form Layout is unsupported.

Default Size Hint Values

Form components define implicitly presentation hints with default values. These values are applied unless you define another value for the hint.

Note that the default values might be in conflict. As a result, the rendered form might not meet your requirements or render at all. For example, consider a table in a vertical layout:

• Vertical layout has the default width hint defined to wrapcontent so it checks the size of its child components and sets its width to the maximum child width.
• A table has the default width hint value defined as fillparent so it uses the parents' width.

Hence there is no setting for the table or the layout and you need to explicitly set to one of the widths to a required value.

Default Widths and Heights

Component	Default Width	Default Height
Container Components	fillparent	wrapcontent
Grid Layout	fillparent	wrapcontent
Form Layout	fillparent	wrapcontent
Text Box	wrapcontent	wrapcontent
Text Area	wrapcontent	wrapcontent
Check Box	wrapcontent	wrapcontent
Combo Box	wrapcontent	wrapcontent
Lazy-Loading Combo Box	wrapcontent	wrapcontent
Form Layout	fillparent	wrapcontent
Single-Select List	wrapcontent	wrapcontent
Multi-Select List	wrapcontent	wrapcontent
Check-Box List	wrapcontent	wrapcontent
Radio-Button List	wrapcontent	wrapcontent
File Upload	wrapcontent	wrapcontent
Output Text	fillparent	wrapcontent
Table	wrapcontent	wrapcontent
Calendar	fillparent	fillparent
Action Button	wrapcontent	wrapcontent
Browser Frame	fillparent	wrapcontent
Button	wrapcontent	wrapcontent
Cartesian Chart	fillparent	400px
Gauge Chart	fillparent	400px
Pie Chart	fillparent	400px
Polar Chart	fillparent	400px
Conditional	fillparent	wrapcontent
Dashboard	fillparent	fillparent
Dashboard Widget	0, 0, 200, 300	overrides DashBoard
File Download	wrapcontent	wrapcontent
Geolocator	invisible	invisible
Horizontal Layout	wrapcontent	wrapcontent
Image	wrapcontent	wrapcontent
Lazy Table	wrapcontent	wrapcontent
Tree Table	wrapcontent	wrapcontent
Map Display	fillparent	400px
Message	fillparent	wrapcontent
Navigation Link	wrapcontent	wrapcontent
Panel	fillparent	wrapcontent
Popup	fillparent	wrapcontent
Repeater	wrapcontent	wrapcontent
Tabbed Layout	fillparent	wrapcontent
Table Column	counted by the table	counted by the table
Tree	wrapcontent	wrapcontent
Vertical Layout	fillparent	wrapcontent
View Model	fillparent	wrapcontent

Defining Common Presentation Properties

With the html-class hint, you can define the presentation of a component, such as, border rendering, highlighting, emphasis, overflow, disabling of text, etc. Refer to the hints documentation in the Standard Library documentation.

Adding a CSS Class to a Form Component

To add a class attribute to the rendered component, use the html-class hint.

Note that the class must be defined in the Application User Interface. For instructions on how to add new style sheets, refer to Custom Application User Interface Guide.

Adding a Font Icon to a Form Component

To add an icon from the Awesome font to your component class, assign the icon presentation hint to your component and insert the name of the icon as its value.

Setting the Maximum Text Size on a TextBox and a TextArea

The TextBox and TextArea components can define the max-text-size hint, which defines the maximum length of the text the user can enter. If the component is bound to a shared record field, the size must take into account the size of the underlying database column, that is the column to which the field is mapped.

You can hence generate the hint for TextBox and TextArea components that are bound to shared record fields. Note that the hint generation is applied on all open GO-BPMN projects of your workspace. Close any projects you want to exclude.

To generate or adjust the max-size-hint for all TextBox and TextArea components in all open GO-BPMN projects, do the following:

1. Go to Project > Update max-text-size hint.
2. In the Update max-text-size hints dialog, select the applicable choices:
   • Add missing max-text-size hint to generate the hint on any TextBox and TextArea components bound to a shared record field if the hint is missing
   • Update existing max-text-size hints to overwrite any defined values of the hint with the database column sizes

     Important: If a max-text-size hint contains a non-integer value, the hint is invalid.

   • Ignore if value of max-text-size hint is smaller than DB length to prevent overwriting of the field length that are smaller than the length of the underlying database column size.