Constructor elements to build your app

Updated 5 days ago by Mobsted Support L

ALL ELEMENTS PROPERTIES
  • Backend Name: is used to reference this Element from the other parts of the App. The value stored in Backend Name can be shown on screen, used in calculations or in logical conditions via hashtag
  • Visibility: is shown by default. Hide / Show condition could be set using AND / OR parameters.
  • Loop: repeat the element based on the Smart Filter or API Call.

TEXT INPUT AND TEXT AREA

Use Text Input and Text Area to allow users input single line text values. Each Input data is available all across the platform via hashtag link mechanism.

TEXT

Use Text element to display a text on the app screen. The element can contain static text as well as dynamic, which is loaded from the other elements of the Platform or API calls using hashtag.

Functionality

  • Content can be shown/changed dynamically via hashtag reference:  #Backendname:txtMyText:value#, where txtMyText is a text Backendname
  • Can be placed multiple times in cycle using Loop

BUTTON

Use Button to perform the following actions:

  • navigating between screens
  • saving user data
  • making API requests

Element specific Properties

  • Text: the string entered to this field would be displayed to the AppUser.
Text is changed and accessed dynamically via hashtag data link #Backendname:btnMyButton:text#, where btnMyButton is a button Backendname
RADIO BUTTON

Allow user to select one out of multiple options:

After selection was done, user can change selection, but can not unselect selected option

Element specific Properties

  • Label - the text the AppUser would see on the screen for this particular option.
  • Value: Is used in case you want to store the value different from the Label of the option in the BackendFor example: the Option Label might say "I like it", and in the Value you might store "LIKE". Can contain Hashtags
  • Selected - specify which pair Label / Value you would like to select by default
CHECKBOX

Allows to check / uncheck one or more options simultaneously at user discretion:

Element specific Properties

  • Label - the text the AppUser would see on the screen for this particular option.
  • Value: Is used in case you want to store the value different from the Label of the option in the BackendFor example: the Option Label might say "I like it", and in the Value you might store "LIKE".
  • Selected - specify which pair Label / Value you would like to select by default
SELECT

Allows to check / uncheck one or more options from dropdown list simultaneously at user discretion:

Element specific Properties

  • Label - the text the AppUser would see on the screen for this particular option.
  • Value: Is used in case you want to store the value different from the Label of the option in the BackendFor example: the Option Label might say "I like it", and in the Value you might store "LIKE".
  • Selected - specify which pair Label / Value you would like to select by default
DIVIDER

Use it to visually separate parts of the same screen.

Use single divider to make a slight separation and double or more dividers to make group of elements to look like a plank.

Use links to allow user to make transition to other screens and websites. Link can initiate actions for:

  • navigating between screens
  • saving user data
  • making API requests

IMAGE

Place images to an app screen. Image can initiate actions for:

  • navigating between screens
  • saving user data
  • making API requests

Element specific Properties

  • Image Alternative Text - <alt>... </alt> alternative text to be display instead of image
  • Image Source (URL) - image source URL
HTML / JAVASCRIPT ELEMENT

Functions within a screen. Can render data from any hashtags. Can override style settings. Can display html code stored in Object’s column when that column is hashtaged in HTML filed of this Element. Can be used to create a fully custom experience on top of basic Mobsted infrastructure.

You can access elements on the screen by Backend Name, where Month is the element Backendname:

var x = document.getElementsByName("Month");

Or using the hashtags:

<h1>#BackendName:name#</h1>

Paste HTML or / and JavaScript code into the Default Value of the element.

YOUTUBE

Embedding widget to place YouTube videos on the app screen:

FILE UPLOAD BUTTON

Preload on or multiple files to the platform and save with action to the platform:

Element specific Properties

  • Caption Button - specify the button caption
  • Type Button - one of tree predefined button looks
  • List header - title of the files already preloaded to an app
  • Allowed file extensions - list of file extension allowed to be uploaded
  • Minimal allowed file size (Kbytes)
  • Maximal allowed file size (Kbytes)
  • Allow multiple files check - whether or not user can preload multiple files before submit

Images specific Properties

  • Auto-compress large files check - applicable to images only
  • Maximal width of compressed image - applicable to images only
  • Maximal height of compressed image - applicable to images only
  • Compression quality, 0-no, 1-max - applicable to images only
  • Convert large PNG to JPG starting from (Kbytes) - applicable to images only

ROW

Use Row element to place several elements in a row.

Example:

Using rows in water delivery App to select the size.

How it was set up:

We had two sets of rows with the pairs of buttons in each column. We made them visible / hidden using Variables.

TOOLBAR, BOTTOM TOOLBAR

Toolbar and Bottom toolbar allow to stick elements row to a top or a bottom edge of an app screen

Element specific Properties

  • COLUMNS - allow you to add, remove and style columns of a row
ALL ELEMENTS STYLING OPTIONS
  • Margin
  • Padding
  • Borders
  • Corners
MENTIONED ARTICLES


Was it useful?