Web App Workflow

In the AppMaster Web Designer, you can configure business logic for web applications on the Frontend side in addition to Backend logic. This powerful feature allows you to create sophisticated, dynamic web applications tailored to specific business needs.

In a web application context, business processes might include user authentication, data processing, online transactions, content management, customer service operations, and customizing UI elements depending on conditions.

Three Levels of Business Logic in AppMaster Web Designer:

• Application Triggers: These are high-level triggers that respond to application-wide events or states, setting off specific business processes.
• Generic Business Processes: These are predefined sets of operations that can be applied across various parts of the application, automating tasks, and streamlining workflows.
• Element Triggers: More granular than application triggers, these are linked to specific UI elements, activating business processes based on interactions with these elements.

By leveraging these levels of business logic, AppMaster Web Designer empowers you to craft web applications that are not only visually appealing but also intelligent and responsive to user needs and behaviors.

🔔 It is important to reload the running preview after adding any new business logic to launch the BP.

Application Triggers

Application Triggers in AppMaster Web Designer are high-level triggers that respond to application-wide events or states run execution off specific business processes to enhance functionality and user experience.

AppMaster offers a variety of Application Triggers, each designed for specific scenarios:

• On App Launch: Activated when the application starts up, ideal for initial setup procedures.
• On App Navigate: Fires during navigation between different parts of the application.
• On App Blur: Triggered when the application loses focus, useful for pause or save actions.
• On App Focus: Executes when the application regains focus, great for resuming or updating content.
• On App Hidden: Activated when the application is minimized or not visible on the screen.
• On App Visible: Fires when the application becomes visible again, useful for refreshing content.
• On App Destroy: Executes during the application's shutdown process.
• On App Online: Triggered when the application detects an online status, perfect for syncing data.
• On App Offline: Fires when the application goes offline, enabling offline functionalities.
• On App Auth Required: Activates upon receiving a "401 (Unauthorized)" response, prompting user re-authentication.
• On App Forbidden: Triggers on a "403 (Forbidden)" response, typically used for access control and permissions.

The exact list of Application triggers can be expanded by creating WebSocket Endpoints at the Backend level of your application.

These triggers can be employed to manage user authorization at launch, verify access rights, configure redirection upon authorization changes, handle errors, and much more, making them indispensable in crafting a responsive and secure web application.

Generic Business Processes

Generic Business Processes in AppMaster Web Designer are specifically designed to encapsulate repetitive operations and redundant logic into distinct flows. Once created, these business processes can be seamlessly integrated as distinct blocks into any level of your web application's business processes.

Key Features:

• Efficient Workflow Management: By moving common tasks into Generic Business Processes, you significantly reduce duplication and streamline your application's workflow.
• Frontend Functionality: While mirroring the functionality of Backend business processes, Generic Business Processes are uniquely executed on the Frontend. This allows for quicker interactions and immediate feedback within the user interface.

Ease of Reuse:

To use a Generic Business Process while building logic, simply drag the desired block from the User-Created BPs group onto your canvas.

🔔 Performance Consideration: It’s important to note that for complex and resource-intensive tasks, we recommend executing these processes on the server side (Backend). This approach ensures better performance and efficiency, especially for operations that are computationally demanding or require secure handling of sensitive data.

Element Triggers

Component Triggers in AppMaster Web Designer are essential for adding interactivity to your web applications. These triggers are tied to specific UI elements, activating predefined business processes in response to user interactions. Each component in your application has a set of triggers that can be customized to create a dynamic and engaging user experience:

• Common Triggers: Components share a set of standard triggers such as onCreate, onDestroy, onShow, and onHide, which respond to the component's lifecycle and visibility changes.
• Specific Triggers: In addition to common triggers, components have unique triggers tailored to their functionality. For example, a Button might have an onClick trigger, a Table might respond to onUpdateData, and a Tabs may have an onTabSelect trigger.

Despite the variety, the underlying principle remains consistent: an event triggers a corresponding business process. By effectively using Component Triggers, you can craft an interactive and responsive web application that reacts to user inputs in realtime, enhancing the overall user experience and making your application more intuitive and user-friendly.

Accessing Triggers

To view and configure a component's triggers, select the component on canvas and navigate to the 'Workflow' tab in the right sidebar. Here, you'll find a list of available triggers. Clicking on one allows you to attach your desired business process to it. Triggers with attached logic are highlighted in blue for easy identification.

Creating Business Processes

Setting up a business process for a component trigger follows a similar approach to backend business process creation, as seen in Module 4. You'll use a common canvas where blocks representing different actions are added. The connections between these blocks define the sequence of actions, allowing you to build complex workflows intuitively.

Building Application Workflow

Let's create such a business process for the Calculate button. First, decide what do we need to do when the button is clicked:

• Find out the X and Y values. Get them from the corresponding input fields.
• Launch an endpoint for calculations and pass X and Y parameters to it.
• Make the result container visible.
• Put the calculation result in the required Label fields. 

Select our Calc Button element in the canvas and click on the onClick Trigger.

The business process editor will be open. Here we will build our business process for button.

Get Values from Inputs

The first step is to get values entered by the user. For it, AppMaster provides the Input Float Get Data block, which features an 'Element Key' as its input parameter and outputs the 'Value', essentially reading the current values from the specified component.

Because we have two separate fields (representing X and Y values), so you will need to utilize two 'Input Float Get Data' blocks - one for each input field.

To set it up:

• Drag two Input Float Get Data Blocks onto your canvas for each input field.
• Set the Element Key for each block to correspond with the respective Float Inputs. This links the block to the correct UI element, ensuring it reads the right data.

If you previously renamed your elements in the UI Designer while creating the interface, locating and selecting the necessary component for each block becomes straightforward.

☝️ Renaming elements during the design phase aids in easily identifying them later during the business logic configuration.

Launch the Endpoint

Following the retrieval of user inputs, the subsequent phase in your web application's workflow is to initiate the Endpoint. This critical step establishes the connection between the Frontend (the user interface) and the Backend (server-side processes) of your web application, and the command for calculations is transmitted from the browser to the server.

Endpoints in AppMaster are represented as distinct business process blocks within the application. To use our endpoints, simply choose the appropriate one from the business process blocks list and drag it into your canvas.

In module 5, we configured an endpoint with a GET method and assigned it the base URL "module4-basic". You should find it listed as - Server request GET /module4-basic/ and drag it to canvas.

Unlike components, AppMaster endpoints do not require their ID's setting, as it is predefined. This feature streamlines the process of integrating endpoints into your business logic.

The final step is to input the X and Y values you obtained from the previous step into the Endpoint. This allows the backend to receive and process these inputs, performing the necessary calculations.

State of UI Elements

The following step in your web application workflow is managing the visibility of containers - specifically, showing the container that displays results and hiding the container that contains a hint.

Here’s how to achieve this:

1. Begin by dragging two Flex Update Properties blocks onto your canvas.
2. For each Flex Update Properties block, assign the Element Key parameter corresponding to the respective containers – one for the results container and the other for the hint container.
3. Configure the visibility parameter within these blocks. Set the Visible parameter to True for the results container, ensuring it becomes visible post-calculation. Conversely, set this parameter to False for the hint container to hide it upon calculation completion.

By implementing these steps, you create a dynamic response in your application interface. Following a user's action, such as clicking a button to perform calculations, the application automatically hides the hint container and displays the results container.

This not only enhances the user experience but also keeps your application interface clean and focused on relevant information at each stage of interaction.

Realtime Preview

To assess the progress of your business process, you can easily preview the intermediate results:

1. First, click on the Save & Exit button within the business process editor. This action will save your current workflow and close the business process editor.
2. Run a realtime preview of your web application to check the interaction with the application as if it were live.
3. Test the functionality by clicking the Calculate button.

If your business process has been set up correctly, you will see the dynamic response: the container with the hint will become hidden, and simultaneously, the container displaying the results will be revealed.

This method of testing offers a practical and immediate way to ensure that your business processes are functioning as intended, allowing you to make any necessary adjustments before finalizing your application.

Data Rendering

Once you have successfully tested the logic of your application, it's time to further refine your business logic.

The final step involves displaying the calculated results within your web application's interface. We will map the output data of our backend business process to the relevant UI elements of your web application.

Given that the results from the backend are returned in a predetermined order, your task is to align each piece of data (array element) with the correct Text Block element in your UI.

For data handling, we will use the following blocks:

• Array Element: use these to access individual elements within the result array. You will need a block for each index, ranging from 0 to 4.
• To Text: since your data is in Float format, use this block to convert these Float values into a text format suitable for display.
• Text Block Update Data: this block is essential for populating the text blocks in your UI with the converted text data.

These blocks will extract data from the results array, convert the data into a text format, and then update the corresponding text blocks in your UI.

Here's how to set it up:

1. Place these blocks on the canvas.
2. In the Array Element block, input the array received from your endpoint (start from 0).
3. Set the Index to target the appropriate element within the array.
4. Connect the output Value of the Array Element to the To Text block.
5. Specify the Element Key in the Text Block Update Data to your UI element where you want the data to be displayed.
6. Connect the blocks sequentially.

Duplicate this sequence of blocks for each element in the array you wish to display. Adjust the index in each 'Array Element' block to correspond to the different elements of the array.

Ensure these blocks are also connected in a sequence.

Final Result

This completes the creation of the business process.

Save your business process and check the final result in the preview. Run an Application Preview on that deploy plan where you published your еndpoint in Module 5.

🎉 Congratulations on the fantastic achievement!

You've successfully developed a fully functional web application with business logic and an interactive user interface. If everything operates as intended, you're now ready to take the next final step of publishing your application and sharing it with users.

But the journey doesn't stop here. There's ample opportunity to refine your application further! You can enhance the visual appeal and user experience by customizing the appearance of your UI elements or expanding your web application logic. For example, you can make the fields required and add a button to reset the fields without manually clearing each input.