Uiflow Quickstart
This page describes Uiflow Studio's workflow and user interface functionalities:
As a web application accessed through your browser, Uiflow Studio (Uiflow) is best experienced with the following setup:
- A minimum screen resolution of 1920x1080 though a higher resolution such as QHD (2560x1440) is preferred.
- A dual-monitor setup to optimize your experience and reduce tab switching.
- Uiflow Studio works best on Google Chrome.
Note: If you are with an enterprise and would like to schedule a demo, please reach out to [email protected].
To create a new project in Uiflow, decide if you want to:
To create a blank project from scratch:
- 1.Log into Uiflow.
- 2.On the Dashboard, click New Project at the top-right corner.
- 3.Select Blank Starter.
- 4.When prompted, enter a unique app name and click Create. The workspace opens in the Design view, where you can start building your application's user interface.
Note: You can create a duplicate application or project with the same name as an existing one. However, each project will have its own unique URL.
If your app has a common use case, consider starting from one of Uiflow's templates. The current collection of web app templates can accommodate a wide range of projects, from business landing pages to food delivery apps.
To create a new project using a template:
- 1.Log into Uiflow.
- 2.On the Dashboard, click Templates in the left navigation menu.
- 3.Select a template from the list.
- 4.
Uiflow's Design view is where you design your app's user interface. This view enables you to add and configure Design components to your application.
When creating an app from scratch, start by dragging components from the Libraries panel on the left to the Preview panel in the middle.
This example shows where to find the Text and Text Input components and how they appear once added to the Preview panel.
If you created an app from a template, the Preview panel comes populated with pre-configured template components. You can rearrange, remove, and add components as needed.
To configure components in your application, select them to open the Inspector panel on the right. This panel enables you to configure component:
In the Connect view, create connections to enable your project to communicate with external sources (e.g. databases) via APIs. These connections appear as components, which you can integrate into your application logic.
To add a connection:
- 1.Click the Connect tab at the top of the screen and click Add a new data connection.
- 2.Locate the type of connection you want to add and click Add connection.
- 3.Populate the Configuration fields to create the connection.Note: The required information depends on the type of connection you create.
- 4.Click Publish to Logic at the bottom right of the screen to save the connection. This publishes your connection as a component that you can integrate into your web projects.
- 5.To edit or reconfigure existing connections, click the Connect tab and select the connection you want to adjust.
With your user interface designed, you're ready to set up your application logic. In Uiflow, this involves visually defining the flow of events across your application components.
Application logic is divided into individual logic flows that determine functionality for pieces of your application.
To create a logic flow:
- 1.
- 2.
- 3.In the Logic Flows section, click the Add logic flow icon. This adds a new logic flow to your application, which you can access in the Logic Flows section.
To add interactivity to your application, connect components and Design References in a logic flow to transfer data or invoke calls.
To build a flow:
- 1.
- 2.Select the logic flow where you want to start building logic.
- 3.Drag-and-drop Logic components and Design References into the logic panel.
- 4.Connect the interface nodes as required. In this example, the app's onPageLoad event invokes the REST API. Upon a successful response, the REST API component activates the Product Price Input component.
After you configure your application's UI and logic, use one of the following methods to preview and test your project in a new browser tab:
- Click the Play button on the right side of the top menu bar.
- Click Publish on the right side of the top menu bar and select the open icon in the upper right corner of the drop-down menu.
When you're ready to publish your app, Uiflow's one-click publishing process makes it easy for you to publish your app to a development environment (for testing) and/or a production domain.
To publish your app:
- 1.Click Publish at the top right. Uiflow displays options for publishing to Development/main and Production environments.
- 2.Enable the environment(s) where you want to publish your app.
If you selected Production, follow the steps below to configure your domain:- 1.Click Add Custom Domain.
- 2.Define your domain and click Add Domain.
- 3.Test and verify your custom domain in the Connect a Domain pop-up.
- 3.Click Publish to Selected Environments.
