Badge

Badge

A badge control is designed to be added as a child to button controls. It is used to show notifications over buttons. For example, total number of orders can be shown over an order button via badge.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

---

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "Badge" control type from drop down list.

• Control Id

- For each Brixxbox app, this id should be unique. For Example: "_abcdef". Brixxbox allows you to change its value only once. You can change this id to any value but it should be meaningful. Recommended way is to start with mandatory prefix(set in app). It can contain numbers, underscores, uppercase and lowercase letters.

• Label

- It is the display value for control.

• Data

- This property specifies from where this control gets data. To set it, specify the controlId of data source. By default "Not in Database" option is selected.

• Refers to Config

- You need to set this option if this is a field, that other fields refer to, to get data from another config.

• Default Value

- Normally this is the value which is assigned to a control when the app is opened or a new record is created, the brixxApi calls setFieldValue on this control and set the control's value with the default value. In badge, this can be the only value to get assigned to it. As it not interactable, we do not need to change its value.

Tutorial

In this tutorial, we will be using "customerOrderList" app. It is a simple app which consists of a grid and a button with a badge. The grid lists all available customer orders. The button "Number of Orders" has a badge over it which displays all the customer orders present in our system. Our app looks like this

Here we can see there are only three customer orders are available. These customer orders are uniquely identified by "internal Id". For very less number of customer orders, it is easy to count them but if we have a huge amount of orders and we want their count. This count can daily, monthly, yearly or all time based. This is one scenario where we can use badge over a button. It acts like a notification over button. To add a badge we need to select a badge from top down list of controls in our app.

Another important point to note here is that we have placed badge as a child of the button control. You can do this by dragging the badge control towards right under button control. Our control hierarchy is shown in above figure. We care still not able to see the badge. The reason is we still need to provide data source for our badge. Lets add a data source. Click on "edit data source" button. Select "Sql" as a data source type because we want to count the total number of orders. Now we need to add a sql query which will count the number of total orders present in our system. We will use this query "SELECT count(id) from customerOrder". We are counting on the basis of "internal ids" because they are unique. Data source selection window should look like this

We see now a badge showing over our button and it is showing the count of total customer orders. For now we have only three customer orders in our app.