Introduction: Workflow

The workflow module allows you to insert different types of buttons, input cells, output cells, and submit, which can be used to direct you to the specific actions of your choice. Workflow can be used to organize your app; as you can control the shape and design of buttons and have more than one sub-menu inside the module.

This module is the best to use if you want to build any type of App.

Installation

You can install this module in your app in the following places:

• App's Home Menu ✓
• App's Side Menu ✓

You can find the module in the workflow category. Drag and drop the module into your home to install it.

Configuration

1.) Once you have installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it. Click the "Configure" button to open the settings of the module.

Duplicability

This module can only be installed in your home and side menus.

Main Features

Separator cells

Separator cells are for designing the shape of your workflow. You can use it to separate buttons and add text. Drag and drop a separator cell of your choice into your module to install it.

Click the cell to configure its settings.

Each cell has its own design. You can check each one and pick the ones you want.

Buttons

Drag and drop a button of your choice into your module to install it. And drop it in your home menu.

You can add up to three buttons or cells in each row.

Note that these two buttons can only be inserted on their own.

Click the button to open its configuration.

In the settings tab, You can customize your layout: change the button's image, add background and text color, and add the text and description.

In the On Click tab, you can find the following:

1.) Next Screen
2.) URL.
3.) Attach the module.

1.) Next Screen

This is where you add another screen (submenu) to be represented once you tab on the button.

For example, let's add a screen (submenu) to this button.

First, create your screen (sub menu) and click "Add New Screen".

Design the submenu, and don't forget to click Save. Then, the newly created screen will be displayed on the left App Screens menu.

Now go back to the main menu by clicking on the screen and clicking the button.

Click "Select Screen"

Choose the screen you created and click Add.

You have the option to replace the screen with another one, or you can delete it. Once done, don't forget to save.

Your button now represents this screen (submenu), and when your app user clicks on it, it'll direct the user to the screen you added.

2.) URL

You can add a website's URL or a link to a specific channel, chat group, or event. Note that this feature can only work with channels, chat groups, and events.

From the side admin menu, go to channels and click on the channel 'View Details' button.

and you will find the invitational links. Copy the channel link.

Go back to your workflow, paste the channel link in the URL section, and don't forget to save.

Your button now represents this channel, when your app user clicks on it, it'll direct the user to this channel.

3.) Attach Module

You can simply drag and drop any module of your choice and set up its configuration, then click save.

Input Cells

Drag and drop an Input Cell of your choice into your module to install it. This is where your users provide the required information to be sent to your server. There are three types of cells to choose from.

Click the cell to customize its design.

You can change the text color and add your cell's title.

Choose which type of keyboard you want to use in the cell

And don't forget to save.

Output Cells

Drag and drop an Output Cell of your choice into your module to install it. This is where your users will find the desired information that your server has sent back. There are three types of cells to choose from.

Click the cell to customize its design.

Choose a background color, text color, title, and value (description).

You can add a sub label (description) in the last style.

click Save when you are done.

Single Choice

Drag and drop a single choice button of your choice into your module to install it. This is where your users have to make only one choice from multiple options.

Click the single-choice button to customize its design.

Here is where you add your options to be displayed to your users:

1.) ID section is the ID of the choice button. Note that if you're a developer and you have your own backend system, you can add the ID that you want to use to test your button

2.) This is where you add your option title; for example, if you want to add multiple payment gateway options, that would be your place to create one for Stripe and another one for PayPal.

3.) This is where you add you option description

You can also add extra option, or delete unwanted one

Choose your text and action colors

Next, you can choose one of these layouts:

• Card cell
• Divider
• Mirrored

You can also select two or all of them

The second button choice has the option to select an icon and choose it's color

While the third button choice has the option to upload an icon of your choice.

Multiple Choice

Drag and drop a multiple choice button you want into your module to install it. This is where your users can make multiple selection of your options.

The only difference between the single choice and multiple choice buttons is the ability for users to select more than one option, as they have the same configurations.

And of course, you can choose what button design you want to add.

Submit

Drag and drop a Submit button of your choice into your module to install it. This is where your users submit their actions after inserting the required data, giving an order to the server to receive these data.

Click the cell to customize its design.

Choose an icon for your button, text color, border color and icon color.

Add your label (text), choose your action type, and then click save.

Note that you can use Input/Output Cells and Submit buttons as an on click cell or button where it can open another screen (submenu), or a certain module of your choice, or forward to a specific URL. Don't forget to Save when you are done.

Workflow menu background

After you finish designing a specific menu, you can add a background for this menu that will be viewed behind your buttons and cells added. First, click 'Settings'

Here, you have two options:

• Add an image of your background. Make sure to upload a PNG format image.

you can also replace or delete your image.

• If you don't want to add an image, you can only set colors in the menu screen; Your chosen color is centered in the start color, which fades away as you move down the screen.

• While the end color is the opposite, the end color of your choice is centered at the end of the screen and gradually fades away as you move up the screen.

Note that you choose one color design or choose both