Style Value Business Object

Introduction

The Style Value Business Object allows you to perform a comprehensive styling of components and solutions removing the need to use custom CSS.

Types of Style Value Business Objects

When you create a new Style Value, you can choose between two Type options:

  • Unit: allows you set a fixed size for items such as icons, texts, and so on.
  • Color: allows you set a fixed color for items such as links, button statuses, labels, and so on.

Style Value Business Objects are specially designed to manage size and color properties. This allows you to quickly adapt your design system to changes. For example, you can change your brand color by simply editing the associated Style Value Business Object.

Upgrade Information

Several predefined Style Value Business Objects are provided with your FNZ Studio installation. These can be used directly or can be edited to meet the customer’s requirements. Moreover, new Business Objects can be created to adapt to one’s needs.

Following are some examples of Unit and Color predefined categories:

  • Unit (S, M, L, and so on):
    • Size: objects designed to manage spacing.
    • IconSize: objects designed to manage icon sizes.
    • TextSize: objects designed to manage text sizes.
    • LineHeightSize: objects designed to manage line heights.
  • Color:
    • Disabled: colors designed for inactive items (fields, buttons, and so on).
    • Link: colors designed for hyperlinks (default or visited).

Basic Information and Working

The Style Value Business Object allows the user to define a value to be reused by properties that store values for styling. For example, you can define a Style Value Business Object called Color - Link-default and assign a color to it. This way, you can reuse this small-scale element in multiple Style Business Objects, thus avoiding inconsistencies.

Style Value Business Objects are stored in the Base Package. By selecting a Style Value Business Object from the list, you can view the Style properties in the panel on the right:

  • ID
  • Name
  • Description
  • Type: indicates whether it is Color or Unit Style Value Business Object.
  • Color/Value: indicates the color code for a Color Style Value, or the absolute or percent size for the Unit Style Value.

StyleValueBOPanel.png

Case 1: Using a Style Value Business Object to edit a Style Business Object

  1. Open the Style Business Object you want to edit, for example a Button.
  2. The fields where you can apply a Style Value Business Object are marked with an S icon. When the icon is blue, it means that a Style Value is active (Figure below). Click on the Business Object selector to open a list of possible Style Value Business Objects. For example, if you are editing the Inner Spacing property, the system displays a list of Style Value Business Objects of type Unit.
  3. Select the desired item to apply the associated styling properties. AStyleValueBO_Usage.png

Case 2: Using a Style Value Business Object to edit Screen Components

  1. Open a screen editor and drag in a Layout Container component.
  2. Open the Layout tab. As in the Style Business Object, the fields where you can apply a Style Value Business Object are marked with an S icon (Figure below). Click on the Business Object selector to open a list of possible Style Value Business Objects. For example, if you are editing the Height property, the system displays a list of Style Value Business Objects of type Unit.
  3. Select the desired item to apply the associated styling properties. BStyleValueBO_Layout.png