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.

Still need help? Contact Us Contact Us