Building a Webflow
  • PDF

Building a Webflow

  • PDF

Article Overview

This article describes how to add a new business group and process and how to create a new Webflow. The article also details how to add components to a Webflow and how to configure its properties. The article also lists malfunctions that may occur when trying to perform the actions described in this article and their solutions.

NOTE
If you want to skip to our How to Videos section and quickly learn how to use the different components when creating a Webflow, click here.

Add a New Business Group

(See Figure 1 to Figure 3)

To add a new business group, perform the following steps:

  1. On the Process Manager screen (1), click the +New Business Group button (2).

  • Figure 1: + New Business Group Button

Result:
The Business Group window appears:

Graphical user interface, text, application  Description automatically generated

Figure 2: Business Group Window

  1. Enter the name (3) of the new business group.
  2. Click the OK button (4).

Result:
The new business group is added (5):

Figure 3: New Business Group

Add a New Process

(See Figure 4 to Figure 6)

To add a new process, perform the following steps:

  1. Click the desired business group from the list (1).

      • Figure 4: Selected Business Group

Result:

  • The number of processes the business group has appears (2).
  • The + New Process (3) becomes enabled.
  • A request to add the first process appears (4).
NOTE

If the business group already has previous processes, once a business group is selected, its processes will be displayed in a list instead of the request to add a new process.

  1. Click the + New Process (3 or 4).

Result:
The Create a Process window appears:

Graphical user interface, application  Description automatically generated

Figure 5: Create a process Window

NOTE
The Process Name is limited to 100 characters.
  1. Enter the name (5) of the new process.
  2. Click the OK button (6).

Result:

  • The process is added (7).
  • the number of processes in a business group is updated (8).

Figure 6: New process

How to Create a Webflow?

(See Figure 7 to Figure 9)

To create a Web Flow, perform the following steps:

  1. Select a business group (1) and click a desired process from the list (2).
      • Figure 7: Processes

Result:

The following page appears:

Figure 8: New Webflow

  1. Click the + New Webflow button (3).

Result:

The Create a Webflow window appears:

Figure 9: Create a Webflow Window

  1. Enter a Webflow URL (4).
  2. Enter a Webflow Name (5).
  3. Click the Ok button (6).
NOTE
  • The Webflow URL is displayed when the digital process is viewed and it is part of the its link.
  • The Webflow URL must be unique.
  • The Webflow URL can contain only lowercase letters, numbers, and hyphens (‘-’).
  • The Webflow URL must not contain spaces.
  • The Webflow name is only displayed internally.
  • The Webflow URL can be edited using the Process Settings screen (for additional information, see the Webflow Overview article).
  • The Webflow Name is limited to 100 characters.
  • Within a process, a Webflow name must be unique. 

Result:

The Web Flow main screen appears.

Selecting a Theme

(See Figure 10 to Figure 12)

To select a digital process theme, perform the following steps:

Figure 10: Process Settings Icon

  1. Click the Process Settings icon (1).

Result:

The Process Settings screen appears:

Figure 11: Webflow Dropdown

  1. Click the Webflow section (with the desired Webflow name) dropdown (2).

Result:

The Webflow section options appear:

Figure 12: Selecting a Theme

  1. Click Theme dropdown (3) and select the desired theme from the list (4).

Adding Components

(See Figure 13)

To add components to the canvas, perform the following steps:

Figure 13: The Add Section and the Canvas

  1. Drag the desired component from the Add Component section (1) into the canvas (2).
NOTE
  • The first added component must be a page (Main Page or Greeting Page).
  • It is also possible to add components to the canvas by clicking them.
  1. Repeat step 1, as necessary.

Configuring the Properties Section

(See Figure 14 and Figure 15)

To configure the properties of an added component, perform the following steps:

Figure 14: Added Components

  1. Click the desired component from the components added to the canvas (1).

Result:

The Properties section appears:

Figure 15: Example Properties Section

  1. Edit the desired properties.
  2. Connect the component to the Model (for additional information see the Setting Up the Model article).
  3. Repeat steps 1 to for every added component.

Troubleshooting

Table 1 describes malfunctions that may occur when trying to create a Webflow, adding components, and editing properties. The table also describes the reason/s for the malfunctions and provides possible solutions.

Table 1: Troubleshooting

Number

Malfunction 

Reason/s

Solution/s

1

Cannot create a Webflow

  • The Webflow Id is empty
  • The Webflow Id contains uppercase letters and/or spaces
  • The Webflow name already exists

Create a new Webflow according to the instructions described in the Building a Webflow section

2

Some Components are missing, or their design is incorrect

The wrong theme is selected

Select the appropriate theme according to the instructions described in the Selecting a Theme section

3

The components in the grid displayed in the wrong direction

The properties of the Grid component are not set correctly

Set the properties of the Grid component. Read the details described in the Containers Components Properties article

4

Problem displaying the Webflow on a mobile device

The direction property of the Grid component is not set correctly

Set the properties of the Grid component. Read the details described in the Containers Components Properties article

5

Cannot add certain components like buttons, Multiple Choice, and other components to the canvas

Must of the components can only be add onto a Main Page, Greeting Page, and Container components

Add components according to the instructions described in the Adding Components section

6

The buttons on the Main Page do not appear

The buttons properties of the Main Page are not set correctly

Set the button properties of the Main Page component. Read the details described in the Page and Sections Components Properties article

7

The Co Browsing button does not appear

The co browsing property of the Main Page are not set correctly

Set the co browsing property of the Main Page component. Read the details described in the Page and Sections Components Properties article

8

The value of the Radio Question options is not returned correctly

The Text and the Value of the Radio Question component options do no match

Set the options of the Radio Question component. Read the details described in the Multiple Choice Components Properties article

9

The image for the Dynamic Image component does not exist

  • The image was not uploaded to the selected theme beforehand
  • The wrong theme is selected
  • Upload the images to the theme (for additional assistant with the theme please contact our support team)
  • Select the appropriate theme according to the instructions described in the Selecting a Theme section

10

The Br Component height is not applied

The height of the Br component is not written correctly

The height of the Br component must contain a number followed by px, for example: 10px. For additional information see the Other Components Properties article

11

Cannot upload files

The file type is not written in the acceptFileTypes property

Write the type of the file in the acceptFileTypes property. For additional information see the Other Components Properties article

12

The text direction of the Text Input component is wrong

The textDirection property of the Input Text component is not set to the appropriate direction

Set the appropriate text direction. For additional information see the Other Components Properties article

13

There is a limit on the number of characters allowed to input into the Text Input component

The maxLength property of the Input Text component is not set to the appropriate direction

Set the appropriate maximum length. For additional information see the Other Components Properties article

14

The numbering of the Progress Bar Steps are wrong

The numbering steps of the Progress Bar component have an offset of +1

Set the first step of the Progress Bar component to zero. For additional information see the Other Components Properties article

15

The Preview component prevents from deploying the Webflow

The Preview component must be connected to a PDF form

Connect the Preview Component to a PDF form. For additional information see the Other Components Properties article

How to Videos

To quickly learn how to use different components to create a Webflow, watch the following videos.

Container Components

To quickly learn how to use Container components watch the following videos.

  • Container Component: 

  • Grid Component:

Labels and Nun Input Components 

To quickly learn how to use Labels and Nun Input components, watch the following videos.

  • Preview:

  • Rich Text:

Multiple Choice Components

To quickly learn how to use Multiple Choice components, watch the following videos:

  • Checkbox Component:

  • Radio Question:

Other Components

To quickly learn how to use Other components, watch the following videos.

  • Text Input:

  • Dynamic Image:

  • Upload Component:

 

  • Signature:

  • Date Input:

Page and Sections Components

To quickly learn how to use Page and Sections components, watch the following videos.

  • Greeting Page:

  • Main Page:

  • Main Section:


Was this article helpful?