In order to add a Component into an instance just make click over any container > Add > Component:

The component selector will display the available ones:

Each Component has its own variants and customizations, so after selecting the component that you want to add, you will customize it:

For example, the Component selected in the previous image will require the following information:

Control Name: all the components will require a name for the instantiated component in the instance

Card Title, Card color, Value and the checks 'Include description' and 'Include other description' are customizations configured in the Component Definition.

Card Title is a Text, so you can write anything on it.

Card Color is a Combo Box with predefined options.

Value is one of the following options:

• Variable: will create a variable in the Object with the name detailed in the field. It is useful when you want to reuse a Variable from the Web Form and display it in this Component
• Local Variable: will create a variable in the Object with the name <ComponentName>_<ValueName>
• Attribute: will set the Attribute in the instance.

At the bottom of the form, WorkWithPlus will display the variables that will be defined in the Object associated with that Component. Some Components have Event Blocks with code, so to simplify the use of them, and defines an extra Variable that will be displayed here for initializating some Component information.