UX Properties


UX properties include:

Layout type

Specify the way in which the HTML is generated

Control flow direction

Specify if the controls on the UX flow from left-to-right or right-to-left (select rtl for Hebrew and Arabic)

Class map

Specify how the abstract CSS class names used in this component map to physical CSS class names in your style sheets.

Resolve abstract CSS class names

Replace abstract CSS class names with physical CSS class names. This should only be un-checked if you are in development mode and you want to determine what abstract CSS class name is for a particular element in the component.

Style name

Click the button to select a new style, or edit the existing style. You can also use <ProjectStyle> or <Session:varname>

Customize style colors and fonts

Customize the style colors and fonts. This provides a simpler way to customize colors than editing the style. IMPORTANT: Changes you make here will apply to ALL components in this project that use this style.

Color palette

Defines the color palette to use for the UX Component. Applies only to this UX Component -- does not affect other components.

Use compact theme

The style you selected supports a 'compact' view. The standard view is more appropriate for mobile applications. The 'compact' view is often used in desktop browser applications.

Edit style in Style Builder

Allows you to create your own styles using a copy of an existing system style.

Font Size

Specifies if the fonts in the UX Component should be scaled to make them larger or smaller. Doing this will also scale the size of many controls in the component. Select 'Medium' for no scaling, i.e. the fonts shown will match those defined in the style sheet.

Local sub-theme definitions - Javascript

Define the Javascript for any locally defined sub-themes. Sub-themes are used to create custom appearance of certain control types such as windows, buttons, tabs, accordions, sliders. switches, etc.

Local sub-theme definitions - CSS

Define the CSS for any locally defined sub-themes. Sub-themes are used to create a custom appearance for certain types such as windows, buttons, tabs, accordions, sliders, switches, etc.

Control Behavior Overrides

This property is used with mobile devices.

Label width

If a control's label is set to display to the left or right of the control, specify the default width of the label. Use CSS syntax, e.g. '3in'. All controls that have their label width set to '{Global.LabelWidth}' will inherit this value.

Center component on page

Specify if the component should be centered horizontally on the page. Does not apply if the component uses Panels).

Use drag scrolling

Specify when drag scrolling should be used. 'Auto' - use drag scrolling when the device support touch. 'Never', never use drag scrolling for use on devices that support both mouse and touch. 'Always', always use drag scrolling even on non-touch devices, where a mouse can be used to initiate the drag event.

Page title

Specify the page title for the .a5w page that renders this component.

Font scaling option

Specify which CSS classes should be scaled. If you choose 'All', then the fonts in these classes will be scaled in addition to the fonts in the CSS classes specific to the Style that you selected: BODY, TABLE, TH, TR, TD, UL, OL, LI, P, A, BLOCKQUOTE.

Style sub-theme and CSS 'tweaks'

Define style 'tweaks' new style sub-theme, or CSS classes to augment or override definitions in the style.