Making Data Bindable and adding Actions using Designer

The Designer can be used to design some amazing controls customized to your UI guidelines and branding. You also have features to add functionalities like data binding and action events. These features would give you complete control over the functioning of the respective control that you build.

Let us now see how you can make data binding possible in the Control Designer.

To Open Designer, Go to Extensions > Control Designer.

designer

Let us take an example to use the employee record to call or send an email.

On the landing page, add the control. Enter the details for the Control’s unique name( we recommend keeping it long and unique), Display name, search tag, group name, and icon. Add the different design blocks and make the necessary configurations to provide a look and feel of the control using the different properties and settings under Style Manager.

On the right-hand side of the screen, you would find the Wheel Icon which is for the Block Configuration. Note that you have two properties Bindable and Action which would be used for making the block bindable and for adding the actions respectively.

Block Configurations - Bindable

Now when you are creating your own control using the designer you need to provide dynamic data capabilities for your customized apps. In such cases, you have the Block Configuration feature that allows you to make the control bindable when creating it in the Designer.

bind data

Here we are designing control for the employee details including the name, department, employee ID, email address, and phone number. Now say if you have added a Text block and image block to your control you are creating for employee details. In that case, you may want to customize the image block for the employee’s photograph and the text blocks for the name, department, employee id, email address, and phone number.

So, in this case, to make the block bindable there are three simple properties, namely, Data Source, Field Name and Data type.

  • Data source: The source for this block can be static data or data fetched using a custom formula. The Static data source would be typically used where you do not want to allow data to be fetched using a custom formula or a LOOKUP formula. The Formula source would enable you to add a custom formula to bind data to the control. It is often necessary to enable Both methods defining the data source. In such cases, you would assign the property as Both.

  • Field Name: Is the name of each block as it would appear in your App builder with the specific data sources listed out as per the Data source property set earlier.

  • Data type: Can be either String or number. Even for the image, you would have it as String type.

Block Configurations - Actions

Now that you have been able to make the control bindable, you also can enable your user to add custom events or actions in the Control designer. Typically you may provide functionalities or actions like sending an email or calling a specific phone number.

action block

Any of the block items can have actions assigned to them. For the sake of this example let us add a block to the image for sending an email, which would then be designed to enable further action. Here you would need to make provision for the user to have an Event for sending EMail. So under Blocks Configuration, you simply enable the Action block and provide it a self-explanatory event or action name. The event name should be unique and the same would be visible when the control is dropped in Studio App Builder. The actions would be defined in the Action flow by you depending upon the event specified. For example, if it is sending an email the action block for configuring emails would be added by you / user.

Using Control in the App Builder

Typically you can directly access or use the control within your apps in the same channels. Optionally, if you want to use the control in a different channel you would need to save and publish the control. It has to be installed by the user from the Marketplace to be able to use it on the App Builder.

Now when the control is added to the form in the App Builder, the properties that were designed earlier as Bindable and Action would be available under Data and Action respectively.

Bindable Data

Actions

The users can then bind data to the respective sources as required and design the action flows using the different action blocks available in App Builder.

Thus you can design your controls using the Control Designer and provide the necessary properties for binding data and providing action events.