Logo

    Home

    Documentation

    Use Cases

    Training

    Applications

    Release Notes

    Modal with two paths

    Modal with two paths

    icon
    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

    image

    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

    image

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

    Object DesignerObject Designer

    FormsForms

    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.

    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 DesignerObject Designer

    ScreenScreen

    Back to Use CasesUse Cases

    Back to Build.One Help-CenterBuild.One Help-Center Home

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