Frontend Select decorator guide

Avatar

By Sorin Pavel

updated 2 months ago

The select decorator allows you to select your inputs from a predefined list inside your custom action.

In the following example we will create a custom action that will allow us to calculate the sum of three numbers, two will be selected from a dropdown and a third one will be added manually.

1. First, you will need to handle the minimum requirements  for your project by using the Procesio nuget and editing the project file.

2. The libraries required by this custom action are:

using System;
using System.Threading.Tasks;
using Ringhel.Procesio.Action.Core.Models;
using Ringhel.Procesio.Action.Core;
using Ringhel.Procesio.Action.Core.ActionDecorators;
using Ringhel.Procesio.Action.Core.Utils;
using System.Collections.Generic;

3. Create your custom action in a new class and configure the class decorator.

    [ClassDecorator(Name = "Name of Action", Shape = ActionShape.Square, Description = "Description of the custom action", Classification = Classification.cat1,
        Tooltip = "Tooltip of the action", IsTestable = false)]
    [FEDecorator(Label = "Configure formatting", Type = FeComponentType.Side_pannel, Tab = "Presentation",
Parent = "Side_Panel", RowId = 1)]
    [Permissions(CanDelete = true, CanDuplicate = true, CanAddFromToolbar = true)]

4. Implement the IAction interface.

5. Create the variables that accept inputs from the list.

       [FEDecorator(Label = "First number", Type = FeComponentType.Select, Tab = "Input Tab", Options = "ConfigP1OptionsList", Tooltip = "Tooltip input1", RowId = 1)]
        [BEDecorator(IOProperty = Direction.Input)]
        [Validator(IsRequired = false)]
        public int Input1 { get; set; }

        [FEDecorator(Label = "Second number", Type = FeComponentType.Select, Tab = "Input Tab", Options = "ConfigP1OptionsList", Tooltip = "Tooltip input2", RowId = 2)]
        [BEDecorator(IOProperty = Direction.Input)]
        [Validator(IsRequired = false)]
        public int Input2 { get; set; }

6. We will also create the third variable that will accept the manual input.

        [FEDecorator(Label = "Third number", Type = FeComponentType.Number, Tab = "Input Tab", RowId = 3)]
        [BEDecorator(IOProperty = Direction.Output)]
        [Validator(IsRequired = true)]
        public int Input3 { get; set; }

7. Create the variable that will contain the sum of all three.

        [FEDecorator(Label = "Result", Type = FeComponentType.Number, Tab = "Input Tab", RowId = 4)]
        [BEDecorator(IOProperty = Direction.Output)]
        [Validator(IsRequired = true)]
        public int Result { get; set; }

8. Create a list inside the Custom Action.

        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
            }
        };

Each option is identified by a name and value that contain the value of the option.

9. Inside the execute function we will decide what to do with the variables.

        public async Task Execute()
        {
            Result = Input1 + Input2 + Input3;
        }

10. Generate and upload the nuget.

11. Create the result variable.


12. Drag the custom label on the canvas and link the actions.

13. Select the custom action and enter the values in the Input tab.


14. Click Check instances to view the result.

The code used to create the custom action can be found here.

Did this answer your question?