Bezlio Mobile ERP Platform: Multi-Page Bezls

If you are making a Bezl that has any degree of complexity, you will likely want to consider using the multi-page feature of Bezlio to break up your content into more easily digestible pieces. For example, let’s say we have a Bezl designed to allow users to create new quotes or approve previously created quotes. Our desired flow might be something like this:

Creating A New Quote

View fullsize

Main Menu

View fullsize

Search For The Customer

View fullsize

Add All Of The Items

View fullsize

Screen Where You Would Search For Items After Tapping Add Item

View fullsize

Finalize Screen

Loading / Approving An Existing Quote

View fullsize

Starts Off With A Search Screen

View fullsize

Then Jumps Directly To The Lines Tab For Selected Quote

So how does one accomplish a flow like this? You do so using Bezl Pages. Currently, these are only available within the custom designer, but they are pretty easy to use. Encase your various screens with ‘bzl-page’ tags:

<!-- Menu Page -->

<bzl-page [config]="{ version: 1, active: true }" id="Menu">

  <!-- New Quote -->

  <bezl-launch-button [config]="bezl.components.newQuoteButton" [parent]="bezl" (onClick)="bezl.functions.newQuote();bezl.pages.open('Quote')"></bezl-launch-button> 

  <!-- Lookup Quote -->

  <bezl-launch-button [config]="bezl.components.lookupQuoteButton" [parent]="bezl" (onClick)="bezl.pages.open('Lookup Quote');bezl.functions.searchQuotes()"></bezl-launch-button>

</bzl-page>

<!-- END: Menu Page -->

And note that the [config] for this component is really simple:

• ‘version’: This will just always be 1.

• ‘active’: This is a true / false depending on whether you want this page to be active initially. Only one page can be active at a time so if you have more than one with this value the first will simply be shown.

You will also want to give the tag an id that will be meaningful to the end user. Spaces are OK. So in the flow above in addition to this menu page, we have every other screen spelled out exactly the same. For example, the ‘Lookup Quotes’ pages looks like this:

<!--Lookup Quote Page -->

<bzl-page [config]="{ version: 1, active: false }" id="Lookup Quote">

  <label class="pull-right" [hidden]="!bezl.vars['loading']">Loading... <i class="fa fa-spinner fa-spin" style="font-size:24px"></i></label>

  <mat-radio-group aria-label="Select an option"  [(ngModel)]="bezl.vars.quoteVisibility">

    <mat-radio-button [value]="1" (click)="bezl.functions.updateQuoteVisibility()">My Quotes</mat-radio-button>

    <mat-radio-button [value]="2" (click)="bezl.functions.updateQuoteVisibility()">All Quotes</mat-radio-button>

  </mat-radio-group>

  <div style="margin-top: 10px">

  	<bezl-table-selector [config]="bezl.components['openQuotes']" [parent]="bezl" (onClick)="bezl.functions.selectQuote($event)"></bezl-table-selector>

  </div>

</bzl-page>

<!-- END: Lookup Quote Page -->

And you may have noticed it in the main menu snippet, but loading up pages is as simple as calling this line code (on click events or whatever):

bezl.pages.open('Lookup Quote')

Where ‘Lookup Quote’ is the id of the page you want to load up. If you ever want to go back a page the user can simply use the universal back button in the Bezl:'

View fullsize

Universal back button will always take you back one screen

Or you can use this function:

bezl.pages.back()

I hope this helps you with your Bezlio adventures. If you are unfamiliar with Bezlio, head over to their webpage here. You can use it to create just about any mobile interface you can imagine that connects directly to your ERP system. And if you would like to have an interface like this created for you, please reach out as GingerHelp has extensive experience building solutions in Bezlio. Please leave a comment below if this helped you out or you get stuck.