DesignStyle a Button

You can style a button using the options in the Home tab. However, if you have several buttons in Loftware Enterprise SP and you want to quickly apply the same style to multiple buttons, you can define the button style using a business rule and then apply those styles to a button using the Style Data Ref property.

Note: Styles defined by a Style Data Ref override those configured in the Properties pane.

Styles can be defined using the following locations in the data map.

Property Type Location in Data Map

Example

Button

/{Style Data Ref}/{Key}

/MyStyles/borderColor

Wrapper

/{Style Data Ref}/{Key}

/MyStyles/width

Button styles can be defined using the following property keys and values.

Button Properties

Property Description Accepted Values Key

Button Label

Text displayed on a button.

String

labelText

Text Color

The color of characters in the field. You can select a color or enter a hexadecimal RGB color value.

Note: Color printing is possible only if supported by the device and device driver.

#000000 to #FFFFFF

(Default: F1F1F1)

color

Fill Color

The background color of the button. You can select a color or enter a hexadecimal RGB color value.

#000000 to #FFFFFF

fillColor

Fill Color 1

 For a gradient background, the background color of half of the button. You can select a color or enter a hexadecimal RGB color value.

#000000 to #FFFFFF

(Default: ADB4D8)

gradient1Color

Fill Color 2

 For a gradient background, the background color of the other half of the button. You can select a color or enter a hexadecimal RGB color value.

#000000 to #FFFFFF

(Default: 5B5F7B)

gradient2Color

Border Color

The color of the line that forms the button. You can select a color or enter a hexadecimal RGB color value.

#000000 to #FFFFFF

(Default: 555974)

borderColor

Border

The thickness of the line that forms the button.

0 to 10

(Default: 1)

borderWeight
Corner Radius The radius of each corner of the button.

0 to 100

(Default: 4)

cornerRadius

Wrapper Properties

Property Description Key

Center X

The distance from the middle of the field to the left edge of the label. The value is dependent on the unit of measure for the label template.

x

Center Y

The distance from the middle of the field to the top of the label. The value is dependent on the unit of measure for the label template.

y

Width

The distance from the left edge of the field to the right edge of the field. The value is dependent on the unit of measure for the label template.

width

Height

The distance from the top edge of the field to the bottom edge of the field. The value is dependent on the unit of measure for the label template.

height

To style a button using a business rule, perform the following steps:

  1. In Application Design , create and save a new business rule that adds the applicable values (or "styles") to the appropriate data map entries (or "properties"). For more information, see Create a Business Rule in Configurator.
  2. Open the form with the button and select the button.
  3. In the Properties pane, for the Style data ref property, enter the location in the data map from which the button obtains styling data as defined in your business rule.

    Example

    /MyStyles

  4. Add a rule to the form to run the new styling business rule with the onLoad trigger event. For more information, see Add an Action or Rule.
  5. Open or create an application and add the form to the application.
  6. View the styled button on the application in Applications .