Building Screens

Create Your App's Interfaces Effortlessly

This article emphasizes building a screen from scratch, although you have multiple options for constructing your app's interfaces.

Build Screens from Scratch

To create a screen,

Expand the desired layout in the Navigation Explorer, go to Screens, and clickto create a new screen.
Give the screen a name and open it on the canvas.
Go to the Toolbox, find the required tools, and drag them onto the canvas, one by one. Here are a few tips and tricks that will help you build screens effortlessly.

If you need to clone a component or a section, you can quickly do so by selecting it on the canvas and clickingin the canvas toolbar.
As this is a responsive grid, arrange your sections and elements thoughtfully to ensure an organized layout. For more assistance, .
If you prefer using the canvas grid, you can switch to grid view by clickingin the canvas toolbar.
For apps with login screens, dashboards, or contact-us forms, consider using pre-built screens. Later, customize them to fit your app's requirements. This saves you time building them from scratch.

After designing the screen, bind the components with data and configure their properties to define their behavior and appearance.

If a component on your screen is used multiple times, you can use global CSS settings to configure it once and apply the settings to all instances. This simplifies your work. For more details on how to do it, .

When you finish, save it by clicking. Then, clickto preview it to see how it looks across different devices.

By following these steps, you can efficiently create a screen tailored to your app's needs, ensuring a seamless user experience across devices.

Built-in Code

When you begin building a screen, Reasy creates code in both HTML and JavaScript using its built-in code generator. To view, switch to the Code tab. Furthermore, if you are a coding expert, you may make the necessary changes to the code.

Best Practices

As everything in an app is data-driven, try structuring your data first and then building screens. It enables you to bind your screen elements to the appropriate attributes (data tables). Another advantage of doing so is that you can simply drag the attribute or entity onto the canvas to construct a screen element depending on the attribute's datatype, assuming it's an input element like a textbox.
Before designing a screen, give it a name so you can readily identify it.
Ensure that your screens display properly on mobile and tablet devices before you launch your app.
Although you can decide whether to display or hide the layout while building a screen, it's always a good idea to have it visible so you can preview your screen with the layout.

Explore Through Video Learning

PreviousBuilding App Layout NextCreating Pop-up Screens

Last updated 1 year ago

Was this helpful?

Best Practices

As everything in an app is data-driven, try structuring your data first and then building screens. It enables you to bind your screen elements to the appropriate attributes (data tables). Another advantage of doing so is that you can simply drag the attribute or entity onto the canvas to construct a screen element depending on the attribute's datatype, assuming it's an input element like a textbox.

Before designing a screen, give it a name so you can readily identify it.

Ensure that your screens display properly on mobile and tablet devices before you launch your app.

Although you can decide whether to display or hide the layout while building a screen, it's always a good idea to have it visible so you can preview your screen with the layout.