What Elements and Customization does the 22apps builder have?


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.