Designing web app projects

Creating a web app project

Creating a web app project is similar to creating a regular Studio Web project:

1. Go to the Automations page in Studio Web.
2. On the upper-right side of the page, click the arrow next to the New project button.
3. Select New web app project.
   
   
   
   
4. Your new web app project opens. Choose whether to start from a blank page, a template, or from an Autopilot™ in Apps instruction.
   Note: A web app project created in Studio Web automatically starts with an app that is automated through workflows, not through rules.

If you are already familiar with designing apps, the experience of building apps in Studio Web is similar to that described in the Apps guide.

From the Project Explorer button on the upper-left side of the designer, you can:

• Use the Add button to add pages, workflows, folders, actions, and variables to your web app project.
• Use the Search button to find specific project files.
• Manage your project files. Depending on the file type, you can rename, open, add, move, reorder, delete, duplicate, test, or invoke files.

From the Toolbox button, you can add or search for app controls.

Adding automations

After creating and designing your first web app project, you can leverage the power of Studio Web automations integrated directly into your app.

In Studio Web, interactions with your app (also known as events) are controlled using automations, as opposed to rules.

To customize interactions within your app using automations:

1. Select an app element that supports events (for example, Clicked On or Loaded).
2. Open the Properties panel and navigate to the Events tab.
3. Click the Define automation button.

Studio Web automatically creates a workflow triggered by the selected event.

Note: App elements that contain automations feature the icon next to their name in the Project Explorer.

In this workflow, you can add, edit, and delete any activity that is available in Studio Web. The newly-created workflow appears in the Project Explorer and can be tested, renamed, and invoked in other workflows. You can also create other independent workflows from the Project Explorer and invoke them.

Important:

• Web app projects do not have a main workflow.
• You cannot set workflow triggers in a web app project.

Passing values between the app and automations

Variables are used to pass values between your app and workflows.

To use an app variable or control value in a workflow, select See more > Use Variable next to an activity input field.

The Expression Editor offers you more options to use app variables in complex expressions.

You can also use the Set Variable Value activity to retrieve and set values for existing app variables. The activity has a drop-down menu which is automatically populated with the variables defined in the app. In the Value field, you can select any compatible data type variable from Studio Web or write an expression.

You cannot pass an automation value directly to the value of a control in the app. To to this, you need to set a pre-defined variable to the app control and then, from the automation, set the value of the pre-defined variable.