Updated 7 months ago by Mobsted Support L


Let's take a look at one of the three elements of Mobsted PWA Platform is based on - the Constructor. The other two are the Objects and the Backend.

The Constructor is your starting point of the App creation process. This step would involve just your drag-and-drop skills as well as our guide on the elements to understand the complete functionality of each one of them. The Constructor would help you to build the interphase of your App by providing you with the basic components that are used in the Apps, like buttons, texts and input fields. You would be able to interact between the elements as well as customize them in the way needed.


The Constructor would be accessed by mouse overing the Actions button of the App, or Constructor would appear as the third step of the App creation process if you start building the App from scratch.


The Constructor screen is divided into four logical parts, each representing the mandatory component in the App building process, let's take a closer detailed look at those.

  1. Elements: the Elements part contains all the elements pre-created for the user and are ready to be used in the future App. You can use the basic ones like Text Element, Button Element or Checkboxes Element as well as more advance ones, like the Payment System Element. The complete list of the Elements is available down the paragraph.
  2. Device emulator: is placed to add more clarity on your future App look and feel. This would not be exactly identical on what you would see on the screen of your device, but the approximate estimate could be made. Emulates iPhone 5 screen.
  3. Properties and Actions: each Element from the Elements panel has it's Properties - the parameters of the element; and the Actions - the action that should be performed on the element. The Backend Name is appearing for all of the elements of the constructor. Take a look at the next section to understand the Backend.
  4. Screens Menu: You can navigate between the screens of your app, customize it's settings and view
  5. View Menu: You can preview the App, which would open up the new tab with the smartphone emulator launched, also you can change the view of the device emulator in the Constructor itself. IOS and Android options are available. All HTML elements would appear in the default view for the corresponding OS.


This property is widely used in many parts of the system. It is important for all elements which user can act upon because it names user’s Actions for input elements stored in Events in the Backend, and names Events for submitting elements. Goals of the Backend name are:

  • Identify user’s actions/events with a name in all backend operations. When user presses a button with a backend name “Submit a complaint” you will see Event “Submit a complaint” in your backend filled with Actions data from the screen, like text inputs and check boxes. When there are two input elements on the screen named “One time fee” and “Subscription select” and user selects an amount in the “Subscription select” and then presses button named Payment you will know what was chosen and see the Event “Payment” with Action “Subscription select” in your backend.
  • Serve as a foundation for filters and triggers. User actions within your mobile service are a logical first step in creating smart filters in backend. For example, you can create a following smart filter – Find all objects who have not done “Payment” for more than 3 month and trigger notification of halting a service until payment. To do this you need the button backend named “Payment”, which will be looked for in backend Events to perform filter.

Please make sure you:

  • Do name all actions you need to refer to later on. Deleted backend name makes actions invisible in the backend. Automatic naming with element’s names is provided (you will see a yellow background), however please check if auto name is suitable.
  • Do use short meaningful backend names, which are easy to discern later on.


Was it useful?