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.

workflow

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.

workflow 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.

separator cells drag&drop

Click the cell to configure its settings.

cell configuration

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

design cell

Buttons

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

buttons

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

add buttons

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

exceptional buttons

Click the button to open its configuration.

button 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.

design button

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

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

on click

1.) Next Screen

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

add screen

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

configure button

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

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.

save screen

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

main menu screen

Click "Select Screen"

select screen

Choose the screen you created and click Add.

add screen

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

replace or delete

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.

view details

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

copy channel link

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

add URL

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.

attach module

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.

input cells

Click the cell to customize its design.

cell configuration

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

design cell

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

add keyboard

And don't forget to save.

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.

output cells

Click the cell to customize its design.

cell configuration

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

design cell

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

add sub label

click Save when you are done.

save

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.

single choice

Click the single-choice button to customize its design.

choice configuration

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

option details

You can also add extra option, or delete unwanted one

add & remove option

Choose your text and action colors

text & action color

Next, you can choose one of these layouts:

  • Card cell
  • Divider
  • Mirrored
choice layouts

You can also select two or all of them

choose all layouts

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

choose icon & color

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

upload icon

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.

multiple choice choice configuration

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.

choice setting

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

button designs

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.

submit

Click the cell to customize its design.

button configuration

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

design submit

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

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.

save

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'

settings

Here, you have two options:

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

you can also replace or delete your image.

replace or delete 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.
add start color
  • 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

add end color