STEP 4. Working with Buttons

Button are added from the left side of the screen named ''Components'' by clicking and dragging the button itself to the row where the button is to be placed in a row container.

Chart

Pre-existing charts can be added to a form driven flow by dragging the button from the left-side of the panel called Data Templates to the template.

  1. Access the entity form or a Form Driven Flow, in the UI section, select UI Designer.
  2. In Data Templates, under the Components collapse, select the button named Charts with an indicative icon.
  3. Drag and drop the Charts button in the middle section of the screen, the chart placeholder appears.
  4. Click the placeholder to open the right section with a dropdown list with all the existing charts in the database.
  5. Select the desired chart and click ''Apply'', then ''Update template''. The placeholder has the name of the selected chart.

The right side of the screen the panel with the following configurations opens:

Field Description

Select button type

Select one of the options:

  • custom
  • call custom processor
  • call form action.

Fill in the button text

Write the words to be displayed on the button for the user to read.

Fill in button ID Unique name used to identify the button internally.

Appearance

Select the button color

Select one of the available colours.

Style

Tick one of the options:

  • Filled
  • Block
  • Round
  • Simple.

Select the size

Select one of the options:

  • large
  • medium
  • small
  • extra small.
Select the icon The text that will be shown on the button in the user interface.

Depending on the chosen type of button new fields will open.

Form Actions Buttons

These buttons allow you to trigger one or more form actions defined in the form. For details, see Defining Form Actions.

Field Description

Select button type

Select one of the options:

  • custom
  • call custom processor
  • call form action.

Fill in the button text

Write the words to be displayed on the button for the user to read.

Fill in button ID Unique name used to identify the button internally.

Select the Form action

Select the form action configured before.

Navigate to next step

If the action is triggered, and the result is true, tick the navigation to the next step.
Fill in the Form Actions Message

Once the action is triggered, display this message.

Appearance

Select the button color

Select one of the available colours.

Style

Tick one of the options:

  • Filled
  • Block
  • Round
  • Simple.

Select the size

Select one of the options:

  • large
  • medium
  • small
  • extra small.
Select the icon The text that will be shown on the button in the user interface.

Call Custom processor button

Fill in the following fields, to add a customer processor triggering button in the UI of a digital journey or an entity view.

Field Description

Select button type

Select one of the options:

  • custom
  • call custom processor
  • call form action.

Fill in the button text

Write the words to be displayed on the button for the user to read.

Fill in button ID Unique name used to identify the button internally.

Select the Custom processor

Select the custom processor configured before.

Appearance

Select the button color

Select one of the available colors.

Style

Tick one of the options:

  • Filled
  • Block
  • Round
  • Simple.

Select the size

Select one of the options:

  • large
  • medium
  • small
  • extra small.
Select the icon The text that will be shown on the button in the user interface.

Endpoint Buttons

These buttons allow you to call a predefined endpoint. For details, see Creating Endpoints.

Field Description
ID Unique name used to identify the button internally.
Label The text that will be shown on the button in the user interface.
Endpoint The name of the endpoint you wish to call.

MAP INPUT PARAMETERS

Select the input parameter an attribute where to mat the data.

MAP OUTPUT STRUCTURE

Select the output parameter an attribute where to mat the data.

HINT  
The endpoint can be added to a Digital Journey using the Defining Form Actions

Custom Buttons

These buttons do not have any predefined behavior and must be configured using HTML elements or DevExtreme widgets.

Once you click the Add button, the form step's After Events section is opened automatically allowing you to configure the button's behavior. The section is pre-populated with a placeholder on-click event code.

Copy 
/* Click event for the test button */
$('#test').on('click', function (event) {
    console.log("The button test was clicked");
});

You can modify the existing code or replace it completely with custom code, for instance using DevExtreme widgets:

Copy 
eventHandler $("#test").dxButton({
    text: "Click me",
    onClick: function()
        {
            alert("Button clicked");
        }
});
NOTE  

When removing a button from the template, the corresponding on-click event in the After Events tab will not be removed, as it might be useful in case you accidentally delete the button.