HowTo use the web UI Builder

Ready to build the front end for your app? We’ll show you how in this article so that you can use the WYSIWYG to set up a basic web page with content.Hard? Nope. Simplicity is key in our UI Builder.

If you don't know how to make a web page yet, this link can help you with that. If you don't know how to keep your pages organized, we recommend to read this article first.

In the screenshot shown above, we created a webpage with the pre-made login template. As you can see there are multiple elements on this page like buttons, images, input fields etc. To make or adjust a page like this, you will need to know the basics. The UI-uilder consists of two major parts. On the left side we have the "Palette" and on the right, we have the "Canvas".The "Palette" holds all the building blocks for a webpage, you can drag and drop the building blocks onto the "Canvas" to create a component. Form and style the components like a true artist to create a stunning web page!Read on for more information about every aspect of the "Palette" and the "Canvas".

The Palette

Design tab

Components - In the design tab, you have all the puzzle pieces you need to create a webpage. When you open this tab for the first time it automatically shows all the components. To learn all about each component you can check out our component reference.

Prefabs - The second tab is called prefabs, which are easy to implement building blocks that can contain multiple components. Implement a prefab on a page and adjust it so it perfectly fits that page. This way you can create multiple pages with similar content with only a few clicks!

Partial - A partial is a part of a page that can be adjusted on the fly and will apply the changes to the partial on all pages. Very useful for when you want something like a date when a sign up period ends. If the date has to be changed because a new period has begun, you won't have to change the date on each page individually but can just change the one partial. More about partials.

With these buttons, you can change the preview mode for different screen sizes. This way you can optimize your app for every mobile device or even a 4k monitor. Simply click the device you want to preview or use the shortkeys 1 through 6. More about shortkeys.

Made the wrong choice? You can undo and redo your actions with these buttons up to 10 times. Ever wondered how the page would look like if you used a different layout? You can switch the layout too with the switch layout button.

Variable tab

The variables tab manages all the available variables on the page. You can also add new variables here. Variables are divided into three categories, as seen in the image to the right. ‘Variables’ are the variables you've created on this page. They’re only available on the current page. Input variables are variables which can be given as input to the page when it's loaded. These can be given a value using a query or by using a variable in the page's path. Global variables are variables which can be used throughout the whole UI Builder. No matter where you are, you can use them on your web page.More information about using variables for web pages.

Page settings tab

Page online - Toggle between the live status of your webpage. Instead of deleting the page you can also just take it offline with this switch.

Open action - Here you can build an action that will run when your page loads not to be confused with model actions in the backoffice. We advise to use these actions for short processes as these actions will always run in the foreground. If you want to run more complex processes we advise to call a model action with an action event. More about actions.

Url - This is the web address to your page. You can click on this link or the big play button while holding down the CTRL/COMMAND key on your keyboard to go to the page.

Path - Here you can adjust the part of the url that defines the page you are working on.

Description - Descriptions are to be used if a page requires some explanation. This information is also shown in the web pages overview, which is extremely helpful when you don't know what is on the webpage.

Enable page caching - Enable page caching lets you define whether the page can be cached locally on the visitor's device. Caching a page means faster loading times when a user revisits the page. When a page is cached the browser asks the website if there's a newer version than the cached version available. If so, the page is loaded from the hosting server. If not, the page is loaded from the user's local cache memory. This can speed up loading times but has no effect if your page changes regularly.

Enable debug logging - If you activate debug logging on your page, a log record will be created every time the page is visited. You also can turn on the debug logging for a page's action in page settings (open the action and click edit) in order to see exactly what the action does. The debug logging in the page settings is only for the page, not for its action. More about logging.

(Inherit) authentication profile - Use this todefine what authentication profile you use for your web page. You can also choose to inherit the settings from the group that the page is in. What are groups?

Layout - The page template defines the template used for the page. Every app has a bootstrap_layout which has all the needed framework links. You can also add new frameworks or plugins to the bootstrap_layout. (Tools -> Templates).More about templates.

The following options are visible depending on what you have selected.When you select a component you will see multiple options depending on the type of component. For example: If a component can have child components you will see an extra option to create child components. If not, you won't see it.

Remove component - This will take the selected component and child elements off the canvas. (shortkey "Backspace")

Convert to partial - If you want to reuse your hard work on another page you can choose to create a partial from the selected component. Partials? (shortkey "H")

Save as UI Prefab - UI prefabs can be multiple components saved similar like a partial. This way you can choose afterward to save multiple components as a prefab and reuse your beautifully created content on other web pages. (shortkey "G")

Add child component - When you have a selected component that can hold multiple child elements, this option will pop up. You can add a new child component by pressing this button or press "A" on the keyboard.

When you select a component and head over to the settings tab (shortkey "S") you will see the following options.

Delete page - A bit obvious, but only use this button when you are absolutely sure. If you are not sure you can also just take the page offline with the toggle button.

Convert to HTML - This will convert the whole page to HTML. But- and this is an important one- keep in mind this is a one-way action: You can convert pages to HTML, but you can't convert the page back to a UI builder page.

If you don't have a template selected you will also see these options:

Save as layout template - Want to use the same layout on a different page? Save it here and select it on another page to use the same layout as a template.

Save as page template - Nearly the same as the save as layout template, but now you can save the whole page as a template.

Object tree tab

The object tree gives you a tree view of the entire page. In the tree view, you can click the specific component you want to open or change the order of components. You also can see which components have a child or are the parent of other components. When you've unlocked the layout, you'll also see the components of the layout. This can be done by clicking the lock icon when selecting an element that is part of the layout.

Canvas

Last but not least, (and this is where the magic happens) drag and drop the components onto the page. If you're not happy with the place they appear on the page, click the component and drag it again. All the components are based on Bootstrap v3.3.7, which means that you can make use of all the Bootstrap classes available. Read here for more information about the canvas and the components.