Frontend decorator

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 the options parameter points to the list used inside the dropdown \[fedecorator(label = "first number to add", type = fecomponenttype select, tab = "input tab", options = "configp1optionslist", tooltip ="tooltip input1")] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = false)] public int input1 { get; set; } private ienumerable\<optionmodel> configp1optionslist { get; } = new list\<optionmodel>() { new optionmodel() { name = "value 1", value = 1 }, new optionmodel(){ name = "value 2", value = 2 }, new optionmodel(){ name = "value 3", value = 3 }, new optionmodel(){ name = "value 4", value = 4 }, new optionmodel(){ name = "value 5", value = 5 } }; 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 \[fedecorator(label = "radio", type = fecomponenttype radio, options = "configp1optionslist")] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public string radio { get; set; } private ienumerable\<optionmodel> configp1optionslist { get; } = new list\<optionmodel>() { new optionmodel() { name = "value 1", value = 1 }, new optionmodel(){ name = "value 2", value = 2 }, new optionmodel(){ name = "value 3", value = 3 }, new optionmodel(){ name = "value 4", value = 4 }, new optionmodel(){ name = "value 5", value = 5 } }; 3 check box \[fedecorator(label = "approved", type = fecomponenttype check box)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public string str { get; set; } 4 number \[fedecorator(label = "your number", type = fecomponenttype number)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public int num { get; set; } 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 \[classdecorator(name = "name of action", shape = actionshape square, description = "description of the custom action", classification = classification cat1, tooltip = "tooltip of the action", istestable = false, parent = "side panel parent")] \[fedecorator(label = "configure formatting", type = fecomponenttype modal, tab = "presentation")] public class myaction iaction 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 \[fedecorator(label = "side panel", type = fecomponenttype side pannel, parent = "side panel parent")] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = false)] public string str { get; set; } 7 text allows users to add strings and numbers that can be used inside your flow \[fedecorator(label = "second number to add", type = fecomponenttype number, tab = "input tab", defaultvalue = 0)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = false)] public string str { get; set; } 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 \[fedecorator(label = "long text", type = fecomponenttype text area)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public string textarea { get; set; } 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 \[fedecorator(label = "api endpoint", type = fecomponenttype api endpoint)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public string apiendpoint { get; set; } 10\ code editor the decorator allows the use of code editor inside a custom action \[fedecorator(label = "code editor", type = fecomponenttype code editor)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public string requestparameters { get; set; } 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 \[fedecorator(label = "file", type = fecomponenttype file)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public filemodel f1 { get; set; } \[fedecorator(label = "data", type = fecomponenttype datatype)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public jarray data { get; set; } \[fedecorator(label = "mapping", type = fecomponenttype column definition)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public object case1 { get; set; } 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 \[fedecorator(label = "decicional", type = fecomponenttype column definition)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public object case1 { get; set; } 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 \[fedecorator(label = "verb", type = fecomponenttype verb)] \[bedecorator(ioproperty = direction input)] \[validator(isrequired = true)] public string verb { get; set; } 14 credentials rest allows you to add a rest api connection inside your custom action