Edit an app

Drag-and-drop components

After you select your app, the Canvas area of App Studio is opened. You can start by dragging-and-dropping any component from the Layout and the Components left panels. Here are some tips for the best design experience:

It is recommended that to structure your screen layout, you start by adding a Layout component. Then, use Container components with the appropriate Column settings to align and space the screen elements horizontally and vertically as needed.
In the Layout components menu you find the components best suited to help you with your app's basic layout.

For example, in the image below a Panel is used to create a standard screen layout. A Container with two columns is added to provide a 30%-70% horizontal division, and another Container is added to the 70% column to hold three columns with Dropdown components.

Example editing app

Note: See the Components section for more details on how to configure the various components.

Save or preview your app

When you finish or want to test your design, preview and/or save your changes using the Save draft and Preview buttons in the Main toolbar. If there are any errors, a Toast message is displayed to warn you that the app cannot be saved until they are fixed. Go to the Notification panel to see the errors.

Example menu options

Note: If the preview does not open in a new tab after a few seconds, you might have the block pop-ups feature turned on in your browser. Allow pop-ups to fix the issue.

Recover unsaved changes

If your session expires or an unexpected shutdown of App Studio occurs, you can recover unsaved changes. When you open your app again a modal offers you the option to recover your changes as shown below.

Recoverable changes modal

Recover unsaved changes button, your last changes are recovered and you then must save the app to keep them.
Use last saved button, your unsaved changes are discarded and the last saved changes are used.
Return to dashboard button, the unsaved changes are maintained in the browser storage and the Recovery of unsaved changes modal appears again the next time you open the app.