This Use Case describe how to implement two possible paths based on the button clicked.

• 1. Summary
• 2. Result
• 3. Step by Step Guide
• 3.1 Create the Screen and Form
• 3.2 Set the EventClick of the button
• 3.3 Define the logic
• Documentation

1. Summary

Modal windows allow the developers to define two possible options for the user so they can perform two different actions depending of the option selected. The way to define this is trough client logic

2. Result

During this Use Case we will implement a dialog that will perform different logic depending of the option selected by the user

3. Step by Step Guide

3.1 Create the Screen and Form

We start by creating a new Screen and a new Form where we will place our button to execute the modal window with the two possible options

For more info of how to create the screen, the form and add elements inside you can check the following articles

Object Designer

Forms

3.2 Set the EventClick of the button

We define the function that will be executed on the click event of the button, to do this we set in the attribute EventClick the name of the function that has the two paths handling. In the case of the example the value of the example is the next one.

$ #.TwoWayCommunication(eventSource);

3.3 Define the logic

In the ProCode file of the function we define the logic to execute the modal and perform two different actions depending of the option selected by the user. In the case of the example the logic file will have the next code.

class TwoWayCommunicationParameter {
  Message: string;
  Type: string;
  akUiControl: any;
}

export function TwoWayCommunication(eventSource: akioma.swat.FormFieldObject): void {
  const form: akioma.swat.Form = eventSource.form;

  const parameter: TwoWayCommunicationParameter = new TwoWayCommunicationParameter();
  parameter.Type = form.getField('QuestionsType').controller.getValue();

  akioma.swat.App.invokeServerTask({
    name: 'Akioma.Swat.Samples.TwoWayCommunication.TwoWayCommunicationBT',
    methodName: 'TwoWayCommunication',
    paramObj: { plcParameter: parameter }
  }).then(({ plcParameter }: {plcParameter: TwoWayCommunicationParameter}) => {
    if (plcParameter.Message)
      akioma.swat.Message.message(plcParameter.Message);
  });
}

This code will open the two way modal and show two different messages depending of the option selected.

Documentation

To find more information, you can check the following documentation.

Object Designer

Screen

Back to Use Cases

Back to Build.One Help-Center Home