Frontend decorator

11min

Custom actions offer you the ability to create and control functionalities specific to your needs. An important part of your action is the ability to interact with it, fortunately this can be done with the aid of the visual components presented in this article.

Before reading this guide we recommend you go through our Custom action guides to help you create your environment.

To have a better understanding of the visuals used inside your custom actions we have provided a list of simple examples on how to add them inside of your custom actions.

The component used is chosen inside the frontend attribute by the Type parameter FeComponentType.

The Parent parameter is used to group elements (sidepanel or modal) in a parent-child structure similar to how a div is treated in HTML. RowId allows you to choose the display order of each component inside the custom action. The Tab frontend parameter can be used if you wish to display the component on a different  tab.

1. Select - allows the use of dropdowns inside your custom actions, dropdowns that will allow you to choose a value from a predefined list.

Document image


The Options parameter points to the list used inside the dropdown.

C#


For more a more in depth explanation click here.

2. Radio - allows the use of radio buttons inside your custom actions, the radio buttons are added from a predefined list.

Document image

C#




3. Check_box

Document image

C#




4. Number

Document image

C#




5. Modal - This frontend decorator is intended to be used at the class level. In order to have a modal implemented you will need to use the parameter Type as follows Type = FeComponentType.Modal to have all your content inside the modal. The modal will appear when you click on the Configure formatting button. The Configure formatting button is used to open the modal from inside the action.

Document image

C#




6. Side_pannel - side panels give you the ability to add and structure visual components on different panels. You will also need to use the Parent parameter to show the main container that the side panel is included in.

Document image

C#




7. Text - allows users to add strings and numbers that can be used inside your flow.

Document image

C#




8. Text_Area - allows users to add strings and numbers that can be used inside your flow. As you can see, the look is almost identical to the Text parameter however when using Text_Area you can add more text.

Document image

C#




9.   Api_EndPoint - allows you to add the endpoint that accesses the resource that will be used on your api call. It is used in conjunction with the Credentials_Rest and Verb decorators.

Document image

C#




10. Code_editor - the decorator allows the use of code editor inside  a custom action.

Document image

C#


11. File - allows the upload and processing of files. You will need to use a input variable of type file. This will need to used in conjunction with the DataType and Column_Definition parameters.

Document image

C#


12. Column_Definition - is used in conjunction with the DataType and File in order to map the data from the imported file on the data model

Document image

C#


13. Verb - allows you to select the verb that will be used on your api call. It is used in conjunction with the Credentials_Rest and Api_EndPoint  decorators.

Document image

C#


14. Credentials_Rest - allows you to add a Rest API connection inside your custom action.

Document image