Designing Your App

The power of Qreli comes from the simplicity of assembling whatever solution comes to mind.

On the Name tab, write your plan or a little summary of what your app will do.

On your Data tab, click on the Available tab and add whatever API or File sources you may wish to use. If what you are looking for is not in the Available list, be sure to add them first to your account by clicking on the Sources (red square in the image below)

Create the Flow of your app. You will start with the First group and the First step:

Structure your app in logical GROUPs, and add STEPs in each group. Do this first and don't be afraid here - you can name and move groups and steps around so they make sense for what you are looking to build.

Groups are run left to right, and steps are run top to bottom.

The first step in the left-most group runs first (with no custom transitions).

The last step in the right-most group runs last (with no custom transitions).

For example, the Showcase app is structured as follows:

You can choose a suitable icon for your group. Depending on your Syle settings, these may show up to your audience, or not:

Once you have the outline your app structure, it's time to add in the details. Where appropriate, we suggest you move the group you are working on as the first group (e.g. in a deep app, during testing you won't have to spend time getting to the section you wish to modify). Once satisfied, move the section back to its correct location within your app. Clicking on a step, you will be shown with the details of that step, e.g.

You can name your step whatever you wish - e.g. above edit "Options" to something else. While the default name for the Next button is defined in your chosen Style, you may rename this button for each step as desired. You will see the available interactive controls on the left, which you could drag and drop on the main area in the center. Once a control is selected, you can see its properties on the right. Dragging the vertical separators allows to set up the environment to suit your needs best:

Once you are done with the details of a STEP, click on the TRANSITION tab to decide what your app should do next. You can learn more about transition logic at the bottom of the page.

Certain apps may be set up as workflows that are designed to complete/end at some point. To mark a step as terminal, slide the End control to mark it so. This step will no longer show a Next/Submit button and your application will be considered complete once this step has been reached.

If you would like to implement certain algorithms, you could mark a step as Compute only. In this case, the interactive STEP will be removed, and the BEFORE and AFTER sections will collapse into a COMPUTE section. See below how to use this capability.

To translate your thoughts into solutions fast, remember this order:

BEFORE —> STEP —> AFTER —> TRANSITION

—- A Tip —-

When adding images using the Media control, you should set a fixed vertical height for them (width will be auto-adjusted). This is important, because if your app is embedded on a website, the browser will automatically scale the viewport for your Qreli app to show the entire image.
If you set the image size to 100%, the viewport size will not be set accordingly, and you may have to scroll vertically if the image is larger than your viewport.
This does not matter if the app is not embedded on a site - e.g. accessed directly on its URL.