1. Home
  2. Docs
  3. Login & Menu
  4. Pagetypes

Pagetypes

Different pagetypes

There are a lot of different pagetypes possible. Each of them is build for a specific purpose. It is up to the developer of the iAPI to decide which pagetypes will be used for each menu item.

For each pagetype you can decide if it must be opened in a new tabpage as below, or if it must be opened in a modal popup. The advantage of the tabpages is that you can switch from one to another, without closing or losing your work. The advantage of a modal popup screen is that the user can’t proceed without closing the popup. You can force the user to do something. before proceding.


Items opened in different tabpages of BOA.
With tabpages you can switch from one to another without closing.

A modalgrid forces the user to complete this before proceding.

For all the modal popup screens you need to define the size of the popup. BOA uses the bootstrap rules which has three sizes. As an extra we added a fourth one.

  • sm: small
  • md: medium
  • lg: large
  • xl: extra large (BOA specific)

With Bootstrap a screen is divided in a grid with 12 columns. When you resize the screen, it will resize these columns. This is important when defining forms. That will be explained in the section of the forms.

Combinations of grids and forms:

Tab grids & Forms: will be opened in a separate tabpage of the application. You can open as much tabpages as you want.

  • Tabgrid + Tabform: grid – form
  • Tabform: form
  • Tabgrid + Modalform: grid – modalform

Modal grids & Forms: will be opened in a modal. You need to close a modal before you can continu.

  • Modal grid + Form: modalgrid – form
  • Modalform: modalform
  • Modal grid + Modal Form: modalgrid – modalfor

Forms with tabs: to use if a form has multiple tabpages.

  • TabGrid + multitabform: tabgrid – tabform
  • Multitabform with tabs: tabform
  • Modal multitabform: modaltabform
  • Modal tabgrid + modal multitabform: modaltabgrid – modaltabform
  • Modal tabgrid + multitabform: modaltabgrid – tabform

You can find a sample of the above combinations in the topmenu of the demo.

Articles

How can we help?