Before reading this article, make sure you are familiar with "How to Use a Master Layout".

When designing an App, one of the first things you should do is decide what your Master Layout is going to look like. 

A “master layout” is a design that is applied to every step in the App.  Any widgets added to the Master Layout are present by default in all subsequent steps.

You can access the Master Layout in the top left of the App Builder.

Note: If Triggers are added to the Master Layout, the Trigger will be applicable on all the steps in the App.  However, they cannot be accessed from any step other than the Master Layout.

Since the Master Layout is the template for the rest of the steps in your App, it makes sense to lay out master widgets on the periphery of the step. 

The steps below outline the creation of a sample Master Layout and give you an idea about how to design your own.

1. Decide which widgets you will need on every step (or almost every step).

Some reasonable examples are buttons to go to the next or previous step, a company logo and a timer to track how long an operator spends on each step.

2. Decide where these master widgets should be placed. 

A good starting point is to create one a header and/or footer for your App. Below, you can see a visual layout for a header and a footer constructed by using a rectangles, buttons, text and an uploaded image.

3. Leave plenty of room for new content on every step

Widgets on the master layout should ideally be arranged to allow for maximum visual area in the center of the step. 

4. Note which widgets you want or need to unlock from the Master Layout

When you design a Master Layout, it is important to note which widgets you will need to unlock in specific steps. Try to keep those widgets visually separated from other aspects of the master layout in order to create less drastic transitions.

5. Consider extensibility of the Master Layout design

The last thing to consider when designing a master layout is the extensibility of the design. In the example App above, the “Menu” Button could take up the majority of the width of the footer. However, this would leave you with a lot of redesigning work if you decide to add another widget. By leaving space for additional widgets, you reduce reshuffling in the future.

Did this answer your question?