Work with Buttons

Buttons are added from the left-side panel tab 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 or app data form by dragging the button from the left-side panel tab "Data Templates" to the template.

  1. Access the entity form or a Form Driven Flow or an App Data Form, 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 panel with the following configuration 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. Check the Form Actionssection or Defining App Data Form Actions in order to get more details on how to define 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, an entity view or an app data form.

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 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 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 Add, the form step's After Events section opens 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.