Page Builder

Page Builder is a UI container that enables Studio Users to design the page layout by adding Components to the Page.

Lumavate offers two versions of Page Builder, version 6 and version 5. Version 6 of Page Builder removes the ability to add custom javascript to apps. To keep custom javascript in an app, only use version 5 of Page Builder. All new apps created will default to using version 6 of Page Builder.

Overview - Set up the basics of the page, including name, color palette, and upload icons.
Layout - Choose the body style and display a Header, Footer, or FAB. Also, decide the number of columns for the page.
Add To Home Screen - Anable a prompt to ask users to save your app to their home screen.
Advanced - Edit the Javascript of your app.
Security - Turns on or off authentication for the page.

How to Design App Pages

Overview

Name - Enter the name of your page.
Page Type - Select if this page is a Home Page or a Normal Page. Home Pages are the first page a user sees when they enter the app. By selecting Home Page you can no link other pages back to this page.
App Manifest- The web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native mobile app (e.g., be installed on the home screen of a device, providing users with quicker access, and a richer experience). Within Lumavate, a web app manifest is configured at the Page level, under Page Settings. Studio Users set the Page Type to Home to reveal the web app manifest properties.
Name - This name will appear in a web browser
Short Name - this name will appear on a mobile device
Background Color - Set the color of the background of the page. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Theme Color - Sets the color of the theme of the page. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Splash Screen Icon- The icon that is seen on the tab of the web browser.
Favicon- The icon that is seen on a mobile device.

Layout

Body Style- This property cannot be changed it is always set to basic.
Background Color - Set the color of the background of the page. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Display Header- Toggles on and off to display the Head, set up in the Branding section.
Display Footer - Toggles on and off to display the Footer, set up in the Branding section.
Display FAB - Toggles on and off to display the FAB, set up in the Branding section.
Display Background Image - Toggles on and off to display a Background Image.
Background Image- Upload a .JPG or .PNG to display an Image. To remove an uploaded Image, click on the Trash Can.
Number Of Columns - Select the number of columns in your app.
Page Padding (px) - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.

Add To Home Screen

Enable Prompt - Toggles on and off to prompt users to add the app to their home screen.
Skip first visit - Toggles on and off to skip the prompt on a user's first visit to the app.
Delay Time - Set the amount of time in sections between the user opens your app and the "Add To Home Screen" message is displayed
Lifespan - Set the amount of time the "Add To Home Screen" message will appear on the screen. Setting this property to 0 will keep the message on screen until it is dismissed by the user;
Display Count - Set the number of days the "Add To Home Screen" message will appear.
Message - Write the message that will populate in the prompt to users.

Advanced

To access the Advanced section of Page Builder and the Javascript Editor Studio Users must be on the 5.1.12 of Page Builder. Learn more about Managing Versions.
The Javascript of your app is housed in this section. By clicking on the JAVASCRIPT button you can open the script and add in your own code where it reads: "Please place your code beneath this comment".

Security

The dropdown allows Studio users to configure a Page's security. There are three options:

<None> - This is the default for all Pages. It allows all app users to see the Page and its content.
All logged in users - This will require app users to login to the app before they can see the Page content. Login must be configured using either SAML SSO or Email Authentication.
Specific user group(s) - This limits access of the Page to a defined set of users based on Email Authentication.
1. No Auth Redirect - Studio Users can set an existing Page or external link where users sign in.
2. Specific Group(s) - Options are pulled from Email List(s) or Email Pattern(s) set up in the Email Authentication Feature.