Mobile App: Interface and fields

Contents

User interface

The mobile App consists of three menu bars. First the topMenuBar (used for the help, logout and reload functionalities), the topMenuBar consist merely of icons. Second the tabsMenu is displayed right under the topMenuBar, this tabsMenu is for all the main functionalities and consists of an icon and a label. Under the tabsMenu the mainContent is displayed and finally completely on the bottom of the App the footer is displayed, in this footer there is space for buttons. These buttons in the footer are specific for the page open in the main Content. These buttons only consists of a text and no icon.

PageSections.png

Field types:

  1. Heading
  2. TopPanel / ToolbarButton
  3. MenuPanel / MenuButton
  4. MainPanel (Pages)
  5. BottomPanel / ActionButton


The TopPanel has the following ToolbarButtons:

  • Reload - this icon will spin when the page is loading, when the icon is clicked the page will reload.
  • Help - clicking on this icon will open the help menu.
  • Logout (only visible when logged in) - clicking on this icon will logout the user.
  • Settings (only visible when logged out) - clicking on this icon will take the user to the settings page.


The MenuPanel has the following MenuButtons

  • Accounts - here the user can find his balance and transactions overview for his accounts.
  • Payment - here the user can pay other users.
  • Contacts - here the user can view his contacts and add new contacts.

Page and field types

1. List page

Contacts.png

Field types:

  1. UserRow - RowImage
  2. UserRow
  3. DataList


Other list page field types:

  1. AccountRow (occurs in the account details page).
  2. AccountRow - Heading
  3. AccountRow - SubHeading
  4. AccountRow - Value
  5. UserRow - Heading
  6. UserRow - SubHeading

2. Form page

Payment.png

Field types:

  1. LabelField
  2. IconButton
  3. TextField
  4. SquarePanel


Other form page field types:

  1. PasswordField (password input)
  2. NumberField (number input)
  3. SelectionField
  4. AmountField
  5. TextAreaField


CustomValueField (custom fields):

  1. DateField (date)
  2. Numberfield (number)
  3. BooleanField (checkbox)
  4. RadioButtonGroupField (radio buttons)
  5. SelectionField (drop down menu)
  6. TextAreaField (large texts)
  7. TextField (texts and urls)

3. Details page

PaymentDetails.png

Field types:

  1. LabelField
  2. FormField


Other details page field types:

  1. HTMLField (almost the same as a LabelField, but with some more extra html markup)


Other fields types that may appear:

  • LoadingPopup
  • PromptDialog (logout dialog and popups)
  • NotificationDisplay (notification messages)


Technical overview (previous) Operations (next)