Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column

makes it easy to select layouts and styling for your applications, spaces and forms/flows. The designer can pick from four different layouts and four global styles where you can specify colors, font name and other properties. You cannot customize layouts but you can create custom styles.

This Expense Report uses the Compact Layout and Aqua Style.

See the CSS Class property  for more form/flow styling options.

Column
width400px

On This Page:

Table of Contents

Let's say you want to change the background color of your forms/flows so they will blend in nicely with your existing Web site. You can choose one of the provided global styles or create a new custom style. Once you create a custom style you can use it in as many forms/flows as you like. 

Custom fonts for Message Control text styling can also be added to .

Layouts

provides three layouts that can be applied to forms/flows. The Layout dropdown on the Form Properties Style tab displays the choices. They are described below:

...

  • The top section of the page provides a field for the Style name, a description and the default colors (hex values) for controls explained in the table below.
  • The bottom section of the page provides the ability to set colors for a specific control types. The overrides in this section are helpful if you want your applications/forms/flows to match a Style Guide used by your company.

The tenant admin or any designer user can create a new Style.  

 Follow these steps:

Info

If you are logged in as a tenant admin you must first click the Home link in order to see the Styles Tab.

...

An empty Required control is considered invalid and will display the color values specified for Invalid Control Top and Invalid Control Bot fields in a  style. If you want to change the background color for required fields that do not have data entered into them, see the example below. 

Let's say you set the Input Focus control color to green and the Invalid Control Top and Invalid Control Bot colors to red in your style. 

...

Code Block
http://<your server>:<your port>/frevvo/web/tn/doctenant/user/designer/app/_KOSm0eEAEeOF6Nc8pkcCvQ/formtype/_LMyVkO0YEeOyf-kI5QXetA/popupform?_styleId=Orange

Adding Custom Fonts to Live Forms

If your organization requires custom fonts for styling text in Message Controls, you can write custom JavaScript to make them available to . Once the fonts are loaded, designers can access the fonts via HTML markup  OR you can add them to the Fonts dropdown in the Rich Text Editor of the Message Control. Click the links for the details.