What Elements and Customization can I expect to have with the 22apps Builder?
See below for ALL Details:
General
● Page to view the app’s screens displayed as thumbnail previews with the names of each screen sorted alphabetically
○ Create a new screen/page and set its name
○ Edit an existing app screen/page
○ Copy & Delete buttons above each existing screen/page
● Upload splash screen image of the exact size
● Upload app icon of the exact size
● Default primary color and secondary color
● Default font
● Set app name
● List app keywords, max 7
● App description
● Web Application screen for changing customer information (that’s able to be changed)
App Builder
General Options for the App
Submenu
● There is one configurable submenu for the whole app, which is in the form of the slideout “app drawer”
● Can choose the app drawer’s side of the screen (left/right)
● Can change the list of links in this menu to go to certain pages of the app
● Elements listed below which can act as links/buttons can be configured to trigger the opening of this submenu
Testing, Saving, and Publishing
● There is a button at the top of the U.I. which, when clicked, saves their work and shows a QR code that the user can scan on their phone to test their app in the “Expo Client” on iPhone or Android.
● Users can save their work by clicking a “save” button – However, this will not publish live until “publish” is clicked
● Users can click “Publish” which saves & publishes their work LIVE to their app
Elements and Aspects of Each App Screen/Page
Configurable Options for Each Screen/Page
● Background color
● Swipe Left On-Screen Action: {From right to left ⬅️)
○ Nothing happens (Default)
○ Linking to another screen
○ Go to the page that the user just clicked ‘Back’ from (within bounds of the navigation technology)
○ Opens the submenu (must be on the right side)
○ Go back to the previous page
● Swipe Right On-Screen Action: {From left to right ➡️)
○ Go back to the previous page (Default)
○ Nothing happens
○ Linking to another screen
○ Opens the submenu (must be on the left side)
● Section manager: lists all sections on that particular app screen/page
○ Can re-order, show/hide, copy/paste, and delete
Section
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below)
○ Upload or select previously uploaded background image (stored on the 3rd party storage service)
○ Set background image to be 100% width, fit in container, repeat or no-repeat
○ The section can be sticky to the top or bottom of the app (one of these sections per screen/page)
○ Set background-color by hex code or from a selection of other colors used on the page, maximum 8 (either this or the background image can be chosen)
○ Padding top, right, bottom, left
○ Margin top, right, bottom, left
○ Border-radius on a scale from 1 to 100
○ Border style, size, and color
○ Animation: timed fade in based on page load, or based on when the user scrolls to it being in view
● Button on the bottom to add a new section below that section
Row
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below)
○ Choose the number of columns in the row (1, 2, 3, 4, or 5)
○ Outer shadow of 0%, 10%, 20%, or 30%
○ Upload or select previously uploaded background image
○ Set background image to be 100% width, fit in container, repeat or no-repeat
○ The section can be sticky to the top or bottom of the app (one of these sections per screen/page)
○ Set background-color by hex code or from a selection of other colors used on the page, maximum 8 (either this or the background image can be chosen)
○ Padding top, right, bottom, left
○ Margin top, right, bottom, left
○ Border-radius on a scale from 1 to 100
○ Border style, size, and color
○ Animation: timed fade in based on page load, or based on when the user scrolls to it being in view
● Button on the bottom to add a new row below that row
Popup
● Every page is allowed to have one configurable popup modal
● The popup modal can have sections and rows created within it, although there may be a limit to the number of these due to the restricted nature of popup sizes
● Most elements can be added to the popup just like they can on the regular screen
Header Element
● Displays text the user enters
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below):
○ Font color and size (default font size will be bigger than the default font size for the ‘text’ element)
○ Text can be inputted in the box that shows up within the visual app builder, and a popup bar of basic WYSIWYG (“what you see is what you get”; like a simplified Word interface) controls will appear as they start typing in the visual element’s box. Styling options in the WYSIWYG are:
■ Font weight can be set by highlighting (bold, italic, underline, strikethrough)
■ Text alignment (left, right, center)
■ Text can be highlighted and a link set, which can link to one of the following
● Triggering the one modal on that screen
● Linking to another screen
● Linking to an external website which opens the phone’s browser (External browser)
● Go back to the previous page
● Opens the submenu
○ Background color
○ Border style, size, and color
○ Padding top, right, bottom, left
○ Margin top, right, bottom, left
○ Opacity
○ Line height
○ Letter spacing
○ Text transform (uppercase, lowercase, capitalize, normal)
○ Animation: timed fade in based on page load, or based on when the user scrolls to it being in view
Text Element
● Displays text the user enters
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below):
○ Font color and size (default font size will be smaller than the default font size for the ‘header’ element)
○ Text can be inputted in the box that shows up within the visual app builder, and a popup bar of basic WYSIWYG (“what you see is what you get”; like a simplified Word interface) controls will appear as they start typing in the visual element’s box. Styling options in the WYSIWYG are:
■ Font weight can be set by highlighting (bold, italic, underline, strikethrough)
■ Text alignment (left, right, center)
■ Text can be highlighted and a link set, which can link to one of the following
● Triggering the one modal on that screen
● Linking to another screen
● Linking to an external website which opens the phone’s browser
● Go back to the previous page
● Opens the submenu
○ Background color
○ Border style, size, and color
○ Padding top, right, bottom, left
○ Margin top, right, bottom, left
○ Opacity
○ Line height
○ Letter spacing
○ Text transform (uppercase, lowercase, capitalize, normal)
○ Animation: timed fade in based on page load, or based on when the user scrolls to it being in view
Bullet Point List Element
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below):
○ Choose between icon bullets or numbered bullets
○ If icon bullets were chosen, an icon picker lets them choose the icon used for the whole list
○ A single text field will be shown for the first element of the list to be added, and a button below that says “add item” so that another list element can be added
○ Vertical spacing between bullet items
○ Space between bullets and text
○ Font color and size
○ Icon/number color
○ Padding top, right, bottom, left
○ Margin top, right, bottom, left
○ Animation: timed fade in based on page load, or based on when user scrolls to it being in view
Image Element
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below):
○ User can upload an image from their computer, which is stored on the 3rd party storage service
○ Image width
○ Image height
○ A dropdown that lets the user choose between these link options for when the image element is tapped:
■ No link (default)
■ Triggering the one modal on that screen
■ Linking to another screen
■ Linking to an external website which opens the phone’s browser
■ Go back to the previous page
■ Opens the submenu
○ Align left, center, or right
○ Border-radius on a scale from 1 to 100
○ Border: white border or dark border
○ Margin top, right, bottom, left
○ Opacity
○ Animation: timed fade in based on page load, or based on when the user scrolls to it being in view
Button Element
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below):
○ Action can be selected from one of the following:
■ Triggering the one modal on that screen
■ Linking to another screen
■ Linking to an external website which opens the phone’s browser
■ Go back to the previous page
■ Opens the submenu
○ Button text
○ Subtext
○ Font
○ Font size
○ Subtext font size
○ Text color
○ Button color
○ Button width (slider 0-100%)
○ Button Height
○ Padding top, right, bottom, left
○ Margin top, right, bottom, left
○ Border style, size, and color
○ Border-radius on scale from 1 to 100
○ Letter spacing
○ Text transform (uppercase, lowercase, capitalize, normal)
○ Animation: timed fade in based on page load, or based on when the user scrolls to it being in view
Video Element
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below):
○ Accepts YouTube or Vimeo or Wistia embed URL (note that Wistia’s code-based embedding process may be problematic based on initial research, but best-effort will be made to include that type of embed allowance)
○ Align left, right, center
○ Video width (slider 0-100%)
○ Border style, size, and color
○ Margin top, right, bottom, left
○ Animation: timed fade in based on page load, or based on when the user scrolls to it being in view
Audio Element
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below):
○ Accepts URL of audio file
○ Toggle controls shown or whole element hidden
○ Align left, right, center
○ Margin top, right, bottom, left
○ Animation: timed fade in based on page load, or based on when the user scrolls to it being in view
Icon Element
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below):
○ User can choose an icon in an icon picker
○ Icon width
○ Icon height
○ Dropdown that lets the user choose between these link options for when the icon element is tapped:
■ No link (default)
■ Triggering the one modal on that screen
■ Linking to another screen
■ Linking to an external website which opens the phone’s browser
■ Go back to the previous page
■ Opens the submenu
○ Align left, center, or right
○ Border-radius on a scale from 1 to 100
○ Border style, size, and color
○ Padding top, right, bottom, left
○ Margin top, right, bottom, left
○ Opacity
○ Animation: timed fade in based on page load, or based on when a user scrolls to it being in view
Divider Element
● Three buttons on the top in the visual app builder: duplicate, delete, settings (settings listed below):
○ Width
○ Align (left/right/center)
○ Style, thickness, and color (like border)
○ Padding top, right, bottom, left
○ Margin top, right, bottom, left
○ Outer shadow of 0%, 10%, 20%, or 30%
○ Animation: timed fade in based on page load, or based on when a user scrolls to it being in view
If you have any questions about this article, feel free to reach out to our support team! We're happy to help.