Skip to main content
Skip table of contents

Event Editor

An event can be defined as changing the state or behavior of an object by performing certain actions. Actions can be a button click, cursor movement, keypress through the keyboard, or page scrolling.

Event Overview

Event Lifecycle

There are five ways of managing events in PIES Studio: creating, editing, duplicating, switching, and deleting.

New Event

"New Event" is a feature that allows users to generate new events within the platform.

Events created are visible within the Interfaces section on the Explorer panel. There are four ways to create a new event. Here are the steps to create an event, along with explanations for each step:

  1. Hovering over the Interfaces section or any folder within the Interfaces section, on the Explorer panel reveals a new event icon (image-20240222-105627.png). Clicking on this icon opens a text field in the Interfaces section. Here you need to type the name of the event. After entering the event name, you must hit the “Enter“ key on the Keyboard. The changes can be saved by using the “Save changes” button under File.

image-20240226-055943.png

Fig 1: Create a New Event via Interface

  1. Hovering over any screen reveals a new event icon (image-20240222-105627.png). Clicking on this icon opens a text field in the Interfaces section under selected screen. Here you need to type the name of the event. After entering the event name, you must hit the “Enter“ key on the Keyboard. The changes can be saved by using the “Save changes” button under File.

image-20240227-091418.png

Fig 2: Create a New Event via Screen

  1. Creating an event from the File dropdown on the top left side of the screen. In this dropdown clicking on “New Event“ opens a popup, which asks for the Event name. After entering the event name click on “Create Event“.

image-20240226-060207.png

Fig 3: Create Event via File

image-20240226-060239.png

Fig 4: New Event Popup

  1. Events can be created using the Automate feature as well. You will learn more about this feature in the explorer Overview.

Edit Event Name

Events created using a certain name can also be edited later. To use this feature, click on the event on the explorer panel which reveals an icon (image-20240226-052134.png). Clicking on this icon makes the event name editable, after renaming the event, click on the “Enter“ key on the keyboard. The changes can also be saved by clicking the “Save changes” button under File.

image-20240226-053727.png

Fig 5: Edit Event Icon

image-20240226-053847.png

Fig 6: Enabled Text Field to Edit Event Name

Duplicate Event

"Duplicate Event" is a feature that allows users to create a replica or copy of an existing event within the application. This functionality is useful when you need to create a new event that shares similarities with the existing one. Instead of manually entering all the event details again, you can duplicate the existing event, thereby saving time and effort. To use this feature, click on the Duplicate event icon (image-20240226-054234.png)

image-20240226-053114.png

Fig 7: Duplicate event Icon

image-20240226-053227.png

Fig 8: Duplicated event

After duplicating the event, you can also make changes to the duplicated event details. This includes changing the event's name, description, or any other event properties to suit the new event's requirements.

Delete Event

"Delete Event" is a feature that permits users to remove or eliminate an existing event from the system. When you select "Delete Event," it initiates a process that permanently removes the selected event from your event management system. To use this feature, click on the Delete event icon against the desired event.(image-20240226-054631.png)

image-20240226-054515.png

Fig 9: Click on the Delete event Icon

Deleting an event is typically irreversible. Once an event is deleted, it cannot be recovered, and all associated data and information related to that event will be permanently erased. Therefore, exercise caution when using this feature to avoid accidental deletions. The system will ask for confirmation before proceeding with the deletion. This is an additional precautionary step to prevent accidental deletions.

Switch Events

This feature allows you to seamlessly transition from one event to another, enabling you to efficiently manage multiple events based on your needs. You can easily switch between them by selecting their respective names from the explorer panel.

image-20240226-054959.png

Fig 10: Switching using explorer pane

It is also possible to switch between events using tabs on top of the canvas like in the below screenshots

image-20240227-092101.png

Fig 11: Switching using tab

Saving Changes

This functionality allows you to preserve the current state or progress of an event within the system. When you use the "Save Changes" feature, it records and stores all the data, changes or modifications made to the event up to that point.

image-20240226-055419.png

Fig 12: Save Changes

Event Details

On creating an event, the event workflow will be visible on the right canvas. Clicking anywhere on the canvas will reveal Event Details which will appear on the right side of the screen canvas. Here, you can see the Event Name, Description, and the parameters required.

image-20240529-080651.png

Fig 13: Event Details

Event Name and Description can be changed from the text fields provided. After the changes are made it is mandatory to save the changes made.

Parameters are inputs that are required for the event. These parameters can be used in the Event Steps on the canvas. To add a new parameter, click on the “+” icon. This opens a popup with fields to enter the name of the parameter and its type. After providing the necessary details, click on “Save” to add the parameter to the event.

image-20240226-062020.png

Fig 14: Add Parameter Popup

Settings - This feature allows users to temporarily deactivate an event within PIES studio. All the events will be enabled by default and you can disable the event if required. When you disable an event, that particular event will not be considered during application build or while deploying your application. This functionality is valuable when you want to pause or temporarily halt an event for various reasons. For instance, if you want to debug the created event, you can try disabling events one after the other to conclude on the event that’s causing issues in development. Unlike deleting an event, disabling does not result in permanent data loss. Event details and settings will be retained, making it easy to reactivate the event, when necessary, without re-entering all the information.

For your application to run as expected, you need to make sure all necessary events are enabled. Enable & Disable is an auto save feature. Whenever you turn on or turn off the toggle switch, changes will be saved automatically.

 

image-20240529-080217.png

Settings Section

Event Steps

Below are the different types of events in PIES studio:

  1. Call Actions

  2. Control Action

  3. Element Actions

  4. Screen Actions

  5. Retrieve Actions

Call Actions

The "Call Actions" section in the event editor allows you to trigger a frontend event within another frontend event or call backend functions when an event is triggered. These backend functions are created in the "Function Editor" and perform server-side processing, including database operations such as saving, updating, and deleting data. The goal is to link user-initiated actions in the front end with another user-initiated event or backend function.

Let's break down the steps and components involved in "Call Actions" in detail:

Sub Event

The "Sub Event" step is used to call or execute an event within another event. This allows you to create modular and reusable workflows by breaking them into smaller, more manageable events. The "Sub Event" step can be configured to call a specific event and can also capture the output from that event to use in the current workflow.

PROPERTIES

When you drag this element to the canvas, you will get the properties list to select the event name. The following items are available in the properties panel:

  • Event: A dropdown menu that allows you to select an appropriate event. You can choose from the list of events that were already created under the “Interfaces” section of the Explorer pane.

  • Parameters: If the selected event in the dropdown has any defined input parameters, an input field called ‘Value’ will appear for each parameter. This field allows you to provide necessary input values. The parameter used in the selected event will also be visible just above the “Value” field to verify before providing input. If the selected event has no parameters, you will see a message indicating "The selected event has no parameters associated with it." and no input field will appear.

  • Output: This option allows you to save the output of the sub-event step to a variable, which can be used in the succeeding steps of the event flow. Output variables are used to capture and store the results, data, or values generated by an event during its execution. They provide a way for an event to capture & communicate its output to the calling code or other parts of the application.

USAGE

Let us say you have a workflow for a website that displays the standings of clubs in a table, and you have an event called "Update Standings" that updates the record and then reloads the screen. You want to call this sub-event within your main workflow. In the "Event” field of Sub Event properties, you can choose "Update Standings" as the event to be executed.

image-20240227-093428.png

Fig 15: Sub Event

Call Function

The "Call Function" step in the event editor enables developers to invoke backend functions that are defined in the "Function Editor." These functions are typically backend processing functions that do not have visual outputs. The purpose is to link frontend events triggered by users with backend processing and database operations.

PROPERTIES

When you drop the "Call Function" step to the event editor canvas, a properties panel appears on the right side of the event editor to configure the step. The following fields are available in the Properties panel:

  • Function: A dropdown menu that allows you to select an appropriate backend function for the event. You can choose from the list of functions that have been created under the “Functions” section of the Explorer pane.

  • Parameters: If the selected function in the dropdown has any defined input parameters, an input field called ‘Value’ will appear for each parameter. This field allows you to provide necessary input values. The parameter used in the selected function will also be visible just above the “Value” field to verify before providing input. If the selected function has no parameters, you will see a message indicating "The selected function has no parameters associated with it." and no input field will appear.

  • Output: This option allows you to save the output of the call function step to a variable, which can be used in the succeeding steps of event flow. Output variables are used to capture and store the results, data, or values generated by an event during its execution. They provide a way for an event to capture & communicate its output to the calling code or other parts of the application.

NOTE: You can add multiple inputs to the event by clicking the “+” icon. If necessary, you can also delete an added input using the delete icon against the desired input.

In summary, the “Call Function” feature facilitates the connection between frontend UI events and backend functions, enabling you to perform server-side processing and database operations in response to user actions. It enhances the modularity, data processing capabilities, and flexibility of your application.

USAGE

Let us say you have a workflow where you need to call the “Update Standings“ function at the click of a button. In such a work flow add the Call Function step as in the below screenshot and call the required function from the Function dropdown. If the function takes in any parameter passed it in the Value field. To save the output on a variable add a variable name in the Output field.

 

image-20240227-094222.png

Fig 16: Call Function

Control Actions

Control actions involve the use of conditional statements like "if" and "else" to determine how the software should respond to a particular user interaction or event.

Let’s explore the steps involved in this section below,

If

The "If" step allows you to define a logical condition that determines the flow of your application. The flow of your application will be determined based on the condition of the if step. When linking an “If” step to your workflow, there are two outcomes to it. Based on the “Condition Expression” of your “If” step either the upper link will be executed or the lower link. Steps that are connected to the upper link will be executed if the condition returns True. The lower link will be executed when the condition returns False.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel to configure. The following item will be available in the properties panel:

  • Condition Expression: In the “Condition Expression” field, you can provide the logical condition that the system will evaluate. This condition is typically written as an expression that results in a Boolean (true or false) value. If the condition expression evaluates to True, the first link will be executed. On the contrary, if the condition expression evaluates to False the second link will be executed.

USAGE

Let's say while building an application, you want to display a pop-up alert when a certain condition is met. Specifically, you want to show the alert when a variable named "newAlert" has a value of True. Here's how you would use the "If" step to achieve this:

  1. You create an "If" step as part of your workflow.

  2. In the "Condition Expression" field, you specify the condition: $newAlert == True. This condition checks whether the value of the "newAlert" variable is equal to true. If it is, the condition evaluates to true and the workflow of your application will be connected through the first link.

  3. However, if the $newAlert == False, the workflow of your application will be connected through the second link.

image-20240223-070035.png

Fig 17: If

End If

Before an "End If" step, there is typically an "If" step where a condition is evaluated. The condition is based on data or variables within the workflow. The "End If" step serves to cleanly terminate a conditional branch within a workflow, ensuring that only the appropriate steps are executed based on the condition's outcome. There is no configuration required for this step.

USAGE

Let's say while building an application, you want to display a pop-up alert when a certain condition is met. Specifically, you want to show the alert when a variable named "newAlert" has a value of true. Here's how you would use the "End If" step to achieve this:

  1. You create an "If" step as part of your workflow.

  2. In the "Condition Expression" field, you specify the condition: $newAlert == true. This condition checks whether the value of the "newAlert" variable is equal to true. If it is, the condition evaluates to true; otherwise, it evaluates as false.

  3. After the evaluation of the “If” step we need to use the “End If “step to stop the execution of the “If” step.

 

image-20240223-070213.png

Fig 18: End If

Loop

This event step is used to execute a particular set of actions within 'Loop' and 'End Loop' actions for the defined number of times. The user should specify the input for executing the loop and input can be a constant, a variable, or an expression. Looping will stop after the specified number of iterations.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel to configure. The following items will be available in the properties panel:

  • ·Input: This field is used to provide a condition for the loop step to be executed. The loop will continue to run until the end case is met.

  • ·Loop Variable: This variable is used to reference the current iteration in the list during loop action.  

USAGE

Let's say while building an application, you want to display a numbering system from 1 to 10:

  1. You create a "Loop" step as part of your workflow.

  2. In the "Input" field, you specify the condition: $standings. This will cause the loop to run as per the number of $standings.

  3. The loop variable refers to a single iteration of the loop. Suppose, you are passing a variable $standings. You can name the loop variable as $standing referring to each standing within the loop. For every loop call function step will be called. After the iteration over each $standing the loop will end. We can place the end loop step after the call function.

image-20240227-100104.png

Fig 19: Loop

While

Use the while loop to execute a particular set of actions till a certain condition is met. Loops can be used to execute a particular set of actions within the 'While' and 'End Loop' actions. The user should specify the input for executing the loop. The input can be a boolean constant, a variable, or an expression. The loop exits after completing the specified number of iterations.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel to configure. The following items will be available in the properties panel:

  • ·Loop Condition: In this field, you can provide a condition for loop execution. The loop will execute until the condition returns True and it will stop as soon as the condition returns False.

USAGE

Suppose, you have a workflow to run a loop to print a particular line on every step. The while loop step can be used in this case as below:

  1. Drag and drop a while step from the palette to the canvas.

  2. The properties panel will open on the right side of the screen canvas.

  3. In the loop condition input field, you can provide a desired condition. Based on the set condition, the loop's execution will be decided. For example: Let’s say the condition is $numbers <= 10. If the value of $numbers on the first iteration is Zero, the loop will be executed. However, the loop execution will stop if the values of $numbers reach 11, as it is not smaller or equal to 10.

image-20240227-100210.png

Fig 20: While

End Loop

As the name suggests the end loop event step stops the loop execution. To make use of this event you should drag and drop this step on the canvas right after a while or loop event. There is no configuration required for this step.

USAGE

To make use of this event step, simply place it after the loop or while step in the workflow. This will stop the execution of the loop.

image-20240227-100247.png

Fig 21: End Loop

Set Variable

The “Set Variable” is used to define a new variable and can be used in loop constructs. These variables serve as containers to store data, values, or information that you can use later in your workflow.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel to configure. The following items will be available in the properties panel:

  • Type: In this Type dropdown section, you need to select the data type of variable you would like to create. For example: string, numeric, date, Boolean, etc. This ensures that the variable holds the correct type of data.

  • Name: In this field, you can provide a name for the variable you are creating. For example: $myname, $myAge, $newEntry, etc.

  • Value: In this field, you can provide a value to your variable. For example: If the type of your variable is string, you can enter “Anthony”. For numeric, it could be “12”.

USAGE

This step can be used to create a variable, which can be later used in the following steps. As in the below example we are creating a variable $number and assigning a value to it. This variable is used in the following steps to loop a certain number of times and perform a certain operation.

image-20240228-090707.png

Fig 22: Set Variable

Return Data

The "Return Data" step allows you to send specific information or values from one part of your workflow to another.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel to configure. The following items will be available in the properties panel:

  • Data: In this section, you specify what data or values you want to send from the previous step as a variable e.g., “$result”. So, here is where you define what information is being transferred.

USAGE

  1. Let's say you have a workflow for an e-commerce website and you want to calculate the cart total which is stored in variable called $cartTotal. In such a workflow you can call a function that calculates the cart total by taking the necessary parameters.

  2. Now, you want to send this "$cartTotal" value to another part of your workflow. Data: In this section, you specify what data or values you want to send. In this case, you want to send the cart total, so you set it as "$cartTotal".

image-20240227-101303.png

 

Fig 23: Return Data

Sleep

This event step allows you to disable the desired activity of your application and put it in sleep mode.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel to configure. The following items will be available in the properties panel:

  • Type: In this input field you will be able to choose the time format. For example: Milliseconds, Seconds, Minutes, and Hours.

  • Duration: In this field, you can provide an integer value. This will be the duration during which your application will be in sleep mode.

USAGE

Let's say while building an application, you want to put the application to sleep after updating a record.

  1. You create the desired function & event workflow for updating records.

  2. In the event workflow, you can drop the sleep event step after the update workflow.

  3. As in the below screenshot, the application will be put into sleep mode for 10 seconds after the call function step.

image-20240227-103225.png

Fig 24: Sleep

Element Actions

Set Element Data

This is used to add data to an element of the screen. It allows you to dynamically populate elements, such as text fields, labels, or any other data-displaying components, with relevant information.

PROPERTIES

When you drag this element to the canvas, you will get the properties list to select the function name. The following item is available in the properties panel:

  • Screen: In this dropdown list, you can select the appropriate screen within your application to which you want to add data. This step will affect the chosen screen, and the available options for the "Element" dropdown will be based on the selected screen.

  • Element The "Element" dropdown lists all the elements or components present on the selected screen. You can choose the specific element to which you want to add data. This dropdown will be enabled once you've selected a screen from the "Screen" dropdown.

  • Data: In this field, you can specify the variable that you want to add to the selected element. Depending on the element type (e.g., text field, label, object), the data value can be text, a number, a variable, or any other relevant data.

Note: Element dropdown will display “No Results Found” if the screen is not selected or the screen has no elements.

USAGE

Imagine you're working on a mobile application, and you have a Home page having count cards. On this Home page, you want to display data from an event parameter with a variable named "$number". Here's how you would use the "Set Element Data" step:

  1. You create a "Set Element Data" step.

  2. In the "Screen" dropdown, you choose the page "Home Page" because that's where count is present.

  3. In the "Element" dropdown, you select "countcard" i.e. the element ID, as you want to populate the countcard with data.

  4. In the "Data" input field, you specify that you want to set the value “0“.

image-20240228-065451.png

Fig 25: Set Element Data

Set Element Visibility

The "Set Element Visibility" step is used to control the visibility of elements on a screen within an application. It allows you to show or hide specific elements based on certain conditions or actions, providing a dynamic user interface.

PROPERTIES

When you drag this element to the canvas, you will get the properties list to select the function name. The following item is available in the properties panel:

  • Screen: This dropdown list allows you to select the screen to which the element belongs. You need to choose the appropriate screen where the element whose visibility you want to control is located.

  • Element: In this dropdown, you can see a list of elements present on the selected screen. You should choose the specific element whose visibility you want to control.

  • Action: This dropdown has two options, Show or Hide. Here, you specify whether you want to show or hide the selected element based on your workflow's logic. Choose "Show" to make the element visible and "Hide" to make it invisible.

USAGE

Imagine you have a mobile application with count cards and some count cards should only be visible if the user selects a specific option. You can use the "Set Element Visibility" step to achieve this:

  1. Select the screen containing the count card as in this case, it’s Home Page.

  2. Choose the element you want to control, like a count card.

  3. In the third step set its Action, whether to Hide it or Show it.

image-20240228-091608.png

Fig 26: Set Element Visibility

Enable/Disable Element Data

The "Enable/Disable Element Data" step is used to control the interactivity of elements on a screen within an application. It allows you to enable or disable specific elements based on certain conditions or actions, ensuring that users can or cannot interact with them.

PROPERTIES

When you drag this element to the canvas, you will get the properties list to select the function name. The following item is available in the properties panel:

  • Screen: This dropdown list allows you to select the screen to which the element belongs. You need to choose the appropriate screen where the element you want to control is located.

  • Element: In this dropdown, you can see a list of elements present on the selected screen. You should choose the specific element you want to enable or disable.

  • Action: Here, you specify whether you want to enable or disable the selected element based on your workflow's logic. Choose "Enable" to allow user interaction with the element, and choose "Disable" to restrict user interaction.

USAGE

Suppose you have a web application with a form, and you want to disable certain form fields until the user selects a specific option. You can use the "Enable/Disable Element" step to achieve this:

  1. Select the screen containing the form, from the Screen dropdown.

  2. The second step is to select the element you want to disable or enable.

  3. Select whether to enable or disable the element from the third step from the Actions dropdown.

image-20240227-105208.png

Fig 27: Enable/Disable

Set Element Focus

The "Set Element Focus" step is used to set the focus on a specific element within a screen in your application. This can be helpful for user interactions and navigation within your application.

PROPERTIES

When you drag this element to the canvas, you will get the properties list to select the function name. The following item is available in the properties panel:

  • Screen: Choose the screen where the element you want to set focus to is located.

  • Element: Select the specific element on the chosen screen to which you want to set the focus.

  • When you specify the screen and element using these properties, the workflow will direct the user's attention or input focus to the selected element on the specified screen. This can be useful for forms, input fields, or interactive elements that you want the user to start typing or interacting with immediately.

USAGE

Suppose you have a login screen where users need to enter their username and password. In such cases, it is easier for the user if the username or password text field is already in focus so that they can directly start typing without using the cursor to select the text field. In the below screenshot, we are setting the focus for the text field.

image-20240228-091159.png

Fig 28: Set Element Focus

Set Element Style

The "Set Element Style" step allows you to dynamically change the style properties of an element on a screen. Here's how you can use it:

PROPERTIES

When you drag this element to the canvas, you will get the properties list to select the function name. The following item is available in the properties panel:

  • Screen: Choose the screen that contains the element you want to style.

  • Element: Select the specific element on the chosen screen that you want to style.

  • Styles: Here you will find a “+” icon. On clicking this icon a pop-up will open. Here you will find a style dropdown from which you can choose the style and in the below value field, you will have to provide the style value. Clicking the save button will save the changes to the selected element.

USAGE

Suppose you have a workflow where you want to set the color of a count card when a certain action is performed. In such cases, a Set Element Style step can be used in the workflow. Here in the below example, we have selected “Hope Page“ as the screen and “CountCard“ as the Element. We are then setting the count card background color as blue and the font color as black by configuring styles.

image-20240228-091354.png

Fig 29: Set Element Style

Screen Actions

Screen Actions will allow you to route or navigate from one screen to another or reload an existing screen. Below are the steps under page events:

Reload Page

This event allows you to refresh/ reload the screen added by the developer before this step in the event flow. This event is typically integrated into the event flow by developers to provide users with the ability to update the displayed content without leaving the current page.

  • "Reload Page" ensures that users have access to the most up-to-date information, which is especially important in dynamic web applications or when dealing with real-time data.

  • It can be a handy tool for troubleshooting issues on a webpage. Reloading the page can help resolve minor glitches or errors.  

USAGE

Suppose you have a workflow where you want to delete a player from the existing list. After deleting you want to show the updated list of players. In such cases “Reload Page“ event step can be of use. Placing this event after the Call Function will ensure that the current page reloads and shows the updated list of players.

image-20240228-041735.png

Fig 30: Reload Page

Navigate to Screen

"Navigate to Screen" is a step used in PIES Studio to transition or move from a current screen or page to another screen or page. This event is particularly valuable in user interfaces where there are multiple screens or sections.

  • The event is typically triggered by user interaction with a step on the current screen, such as a button, link, menu item, or any interactive component. For instance, clicking a "Go to Profile" button might trigger a navigation event that takes the user from the homepage to their profile page.

  • It provides a structured and organized way for users to move through an application, making it more user-friendly.

  • It facilitates seamless screen transitions, promotes a logical and intuitive user journey, and allows for the customization of destination screens based on context-specific data passed through route parameters.

PROPERTIES

When you drag this step to the canvas, you will get a properties panel on the right side.

The following fields are available in the properties panel:

  • Screen –This dropdown menu allows you to choose a destination screen to which you want to navigate the users when an associated event is triggered. You would typically select a target screen from the list of available screens within your application. This determines where the user will be taken when the navigation event is triggered.

  • Route Parameter -  In this text field you can enter the route parameter. Route parameters are additional data that can be passed to the destination screen.

Note: To know more about Route Param refer Reserved Variable section.

  • Query Param - It consists of Key and Value.

Key: This is where you enter the name of the query parameter. It identifies the type of data you're passing.

Value: Here, you enter the value associated with the query parameter. It represents the actual data that's being sent.

Save: Clicking this button adds the specified key-value pair to the query parameters list.

USAGE

  • Let's say you have a button on your current screen labeled "Check Player Details." When a user clicks this button, you want to navigate to the "Player Details" screen and pass specific information about the player being viewed.

  • You would use the "Screen" dropdown to choose the "Players List" screen as the destination.

  • You add a "Route Parameter" if you want to pass additional data to the screen.

  • You then specify a query parameter, such as "PlayerID" as the Key and the unique player identifier as the Value.

  • Clicking "+" opens a dialog to add query parameters to the list.

  • In the "Players List" screen, you can access the "PlayerID" query parameter to display the details of the selected player.

In summary, these steps and options in the properties panel allow you to configure the "Navigate to Screen" event with specific destination screens and associated route parameters. This level of customization is valuable in creating dynamic and interactive user interfaces.

image-20240228-091851.png

Fig 31: Navigate To Screen

Navigate to URL

The “Navigate to URL" step allows users to open a web page by specifying a URL (Uniform Resource Locator) that’s outside of the application.

  • The primary purpose of the "Navigate to URL" step is to enable users to open external web pages or websites directly from the application. This is especially useful for linking to online resources, external content, or any web-based information.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel on the right side.

  • URL: In the properties section, you will find a text box labeled "Enter URL." This is where you input a specific web address or URL that you want the end users to navigate to. Enter the complete URL, including "http://" or "https://" prefix.

USAGE

  • Imagine you are using a web-based email application, and you have a button labeled "Visit Our Website" within the interface. You can create an event with the "Navigate to URL" step and the created event will be triggered when a user clicks this button.

  • In the "Enter URL" textbox in the properties panel, you would specify the URL of your organization's website, such as "https://www.arsenal.com/men/players ."

  • After confirming the URL, in the deployed app, clicking the “Visit Our Website” button executes the event, and the web browser opens the specified URL, taking them to the organization’s external website.

In summary, the "Navigate to URL" step is a vital feature that allows users to access external web content without leaving the application. It's commonly used for linking to websites, documents, online resources, or any web-based information, and it offers a convenient way to integrate external content into the user experience.

image-20240228-042730.png

Fig 32: Navigate To URL

Navigate to Previous Screen

The "Navigate to Previous Page" step allows users to return to the previous page they were on within an application or website. This step is commonly used to provide users with a way to navigate backward in their browsing or interaction history. No configuration is needed for this step.

  • The primary purpose of the "Go to Previous Page" step is to enable users to navigate backward through their interaction history within the application. It allows them to return to the page they were on before their current location.

USAGE

  • Imagine in an application that you have created, end users want to navigate back to the previous screen after adding a player to the database or list. In such cases, we can place the “Navigate to Previous Page“ event step to navigate to the previous screen after adding the specific player.

In summary, the "Go to Previous Page" step provides a straightforward way for users to navigate backward within an application or website, improving the overall user experience by offering an easy method to return to the previous screen.

image-20240228-071449.png

Fig 33: Navigate To Previous Screen

Show Confirmation

The "Show Confirmation" step is used in application development to confirm users after they've acted. It typically displays a message to inform the end user that a specific action has been completed or to seek their confirmation for an action.

  • The primary purpose of the "Show Confirmation" step is to provide feedback to users about an action they've taken in the application. It's used to communicate the outcome of the action or to seek user confirmation for certain critical actions.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel on the right side.

Message: In the properties section of this step, you will find a text box labeled "Message." This is where you enter the confirmation message that you want to display to the end user.

USAGE

  • Suppose you are building an application that shows the players of all the teams in a league. In every transfer window, new players come into the team, or some leave. In a scenario, where the user wants to add a player a message can be shown that “Player added successfully“. This gives the user a confirmation of whether the operation of adding the players is carried out or not.

  • In such a scenario, the “Show Confirmation“ step can be used by adding a suitable message in the Message Input field.

In summary, the "Show Confirmation" step is a key component in user interface design and application development. It's used to communicate the results of user actions and to reassure users that their interactions with the application have been successfully executed. This helps improve user satisfaction and overall user experience.

image-20240228-043656.png

Fig 34: Show Confirmation

Show Popup

The "Show Popup" step is used to display a pop-up window or modal dialog to the user. This window typically contains additional information, options, or actions that are relevant to the user's current context.

  • The primary purpose of the "Show Popup" step is to provide users with additional information, options, or actions without navigating away from the current screen. It's often used for tasks like displaying detailed information, confirming an action, or presenting a form.

PROPERTIES

  • In your player list application. Imagine after adding a certain player to the database you want to show a confirmation message on the screen before navigating to the previous screen.

  • In such a case “Show Confirmation“ step can be used like in the below step. The Show Popup Event step asks for a few details such as width, height, screen, and data.

USAGE

  • Suppose you are building an application that shows the players of all the teams in a league. In every transfer window, new players come into the team or leave. In such a scenario, where the user wants to add a player, a popup with a message can be shown stating “Player added successfully“ as a confirmation message.

  • You need to specify certain properties for the popup such as its width, height, screen, and Data.

  • The width and height refer to the size of the popup.

  • The screen dropdown refers to the screen on which the popup will be shown.

  • Clicking the “+“ icon on the Data opens a popup that asks for “Key“ and “Value“. As a key, you can pass “Success“ or any desired key of your choice. In value, you can pass the message that you to show in the popup.

In summary, the "Show Popup" step is a versatile feature used to enhance user interfaces by presenting contextual information or actions in a non-disruptive manner. It allows for customization, providing users with relevant content and options within a pop-up window or modal dialog.

image-20240228-065936.png

Fig 35: Show Pop-Up

Retrieve Actions

Retrieve Events are used to gather system details when the application is running. These details are typically critical parameters that may be required for various purposes such as generating an audit trail or complying with statutory or local regulations. Below are the event steps that fall under the retrieve events section.

IP Address

The "IP Address" step is designed to track and capture the IP address of the user’s device. This information can be valuable for various purposes including security, monitoring, and auditing.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel on the right side.

  • ·Output Variable: In this field, you can specify the name of a variable. This variable will capture the IP address of the user’s device and store the information. This information can be used for security, monitoring, and auditing.

USAGE

  • Imagine you have a web application where users log in to access their accounts. After a user successfully logs in, you may want to capture their device’s IP address for security and auditing purposes.

  • In this scenario, you can create an event with an IP address step in it to retrieve the user's IP address

  • You can also choose to set an output variable with a variable name like "deviceIPaddress" to store this information for future reference in the event flow.

image-20240228-071759.png

Fig 36: IP Address

Current Date

The "Current Date" step allows you to fetch the current date from the host server. This step is used for various purposes such as time-stamping events, displaying the current date to users, or performing date-based calculations.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel on the right side.

  • Output Variable: In this field, you can specify the name of a variable. This variable will capture the current time on the user’s device and store the information. This information can be used for security, monitoring, and auditing.

USAGE

  • Imagine you are developing when you have an event to add players to the list of existing players of a club. When users create a new player, you want to automatically timestamp it with the current date and time.

  • In this scenario, you can create an event with the "Current Date" step to retrieve the current date and time from the host server.

  • You can also choose to set an output variable with a variable name like "PlayerCreationDate" to store the date information for every newly created Player.

image-20240228-065215.png

Fig 37: Current Date

Current Time

The "Current Time" step allows you to fetch the current time from the host server. This step is used for various purposes such as timestamp events or performing time-based calculations.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel on the right side.

  • Output variable: In this field, you can specify the name of a variable. This variable will store the current time from your user’s device and store the information. You can use this variable for further use in your application workflow.

USAGE

  • Imagine you are developing a public transportation application that provides real-time information about bus arrivals. When users use this application, let's say they want to see the current time to know how long it’s going to take for a bus to arrive.

  • In this scenario, you can create an event with the "Current Time" step to retrieve the current time from the host server.

  • You can also choose to set an output variable with a name like "BusArrivalTime" to store this timestamp information and display it to users.

image-20240228-052221.png

Fig 38: Current Time

Get current URL

The "Get current URL" step allows you to fetch the current browser URL from the deployed application at run time.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel on the right side.

Output variable: In this field, you can specify the name of a variable. This variable will capture the current browser URL from the deployed application and store the information. This information can be used for security, monitoring, and auditing.

USAGE

  • Imagine you are developing an application for Managers and you want the information of the current URL they on on when the Home Page loads.

  • In such a scenario “Get Current URL“ step can be used.

  • As an output variable, we have passed “$CurrentURL“which will capture the information of the current URL the user is in.

image-20240228-052645.png

Fig 39: Get Current URL

Device Details

The "Device Details" step allows you to fetch information about the device in which the created application is running. This information can include various hardware and software details about the device being used by the user such as Android or IOS, device info like device ID, model, etc.

  • The primary purpose of fetching device details is to gather information about the user's device, such as the device type, operating system, display size, or other relevant hardware and software characteristics. This information can be used for various purposes including optimizing the user experience, debugging, or enabling customization based on device-specific characteristics.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel on the right side.

  • Output Variable: In this field, you can specify the name of a variable. This step will retrieve the width and height of the application viewport in pixels and store the information. This can be later used for your application workflow.

USAGE

  • Imagine you are developing a mobile application for a League. You want to provide users with a customized user experience based on their device type and display size.

  • In this scenario, you would use the "Device Details" functionality to retrieve information about the user's device.

  • You may choose to set an output variable with a name like "UserDeviceDetails" to store this information. Then, you can use this data to adjust the user interface or content for an optimal experience.

image-20240228-053106.png

Fig 40: Device Details URL

Screen Specs

The "Screen Specs" step allows you to fetch information about the screen in which the created application is running. This information can include height and width of the application viewport in pixels.

PROPERTIES

When you drag this step to the canvas, you will get the properties panel on the right side.

  • Output Variable: In this field, you can specify the name of a variable. This step will retrieve the width and height of the application viewport in pixels and store the information. This can be later used for your application workflow.

USAGE

Imagine user has 2 screens and depending on the screen size he wants to navigate to screen A or screen B . So user can fetch the screen specs and using If condition he can either navigate to screen A or Screen B.

eg- For Web he wants Screen A and for mobile devices he wants to navigate to screen B. In such case we can use Screen Specs.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.