How do I build user interfaces?

A bezl is only as useful as it's user interface. Since Bezlio is built with Angular technology, it is quick and easy to build responsive forms that automatically update with data from your backend systems.

Bezlio allows you to read and interact with data in real time from on-premise and cloud data sources on a wide array of devices from smartphones, tablets, and web browsers. But data is only useful if users can see it, so at some point we need to write our user interface.

Bezlio technology is based on Angular 7 for creating the user interfaces. To explore creating an interface, we are going to go into the Custom Builder, available in https://portal.bezl.io which you can get to from the Create menu, Visit Builders, and selecting the Custom Builder.

2019-10-02 14_36_20-Window

We will be focusing on user interface design in this article, so I am going to create a data subscription, there will be other articles focusing on creating data subscriptions. Here I am getting contacts.

2019-10-02 14_41_16-Window

Any CSS we want to add to style our bezl can be added to the CSS tab in the editor. Those styles will only apply to that bezl.

The next tab is where we build our interface using Angular HTML. We have some libraries included to make this easier. You can use Angular Materials to help make attracting bezls more quickly. You can check them out at: Angular Material

I am going to start by creating a list of my contacts, and put a button to email them. I will be using Angular Material to help style them, so first we create our list.

2019-10-02 14_54_28-Window

So this creates a list, and we use Angular binding, to iterate through our data subscription called datasub0. The result is a list of all of our contact names from our query.

2019-10-02 14_55_26-Window

Now we will add a button to click which calls the email client. Note I am using an href with the Angular binding style [href] so I can use a variables. You can also use (click) binding on the button and execute Bezlio functions.

2019-10-02 14_57_43-Window

The result isn’t pretty (that is where the CSS comes in) but it is pulling a contact list from the ERP with a link to email contacts stored in the ERP. This could be published to any device capable of running Bezlio.

2019-10-02 14_59_15-Window