Button

Button

In Brixxbox buttons can be used to validate the business logic. For this purpose, you will most likely add a click event to specify the action.

Documentation

Brixxbox app configurations allows you to add different controls in your app. Check box is the easiest control. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

  • Control Type

- For using button control, "Button" control type should be selected 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. For button, normally we do not want to store its value in database.

  • Label

- It is the display value for control. For buttons, it makes sense to label them via action that will be performed on pressing them. For Example, on login page we see "login" or "sign up" buttons. If user is a new one then he has to sign himself up in the system by clicking on the "sign up" button and then following the default procedure. On the other hand if user is existing one, to log in he will click on "login" button.

  • 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.

  • Shortcut

- A user can assign a shortcut command to button. For example, [Ctrl]-[Alt]-D. When ever this command is executed, button will be pressed

Size

In Brixxbox, the screen is divided into 12 logical columns horizontally. For each control you can select explicitly how large it should be according to your application needs. Size properties defines how control will be displayed in Brixxbox App.

  • Label on Top of Control

- If this option is selected then the label of a control and actual control will be in two different horizontal lines and control's label will be present on the top line. It does not make sense in button scenario. Button label should be displayed inside the control. It is insignificant for button but plays an important roles for other controls like textbox etc. For other controls, if this option is not selected then 12 column's will be shared between label and control itself. For example, label can be 4/12 column's long and control can be 8/12 columns long.

The display layout is divided into four different categories depending upon the pixels. For each category, Brixxbox also allows you to customize the width of control.

  • Phone (and up)

- This category includes devices which have screen pixels less than 768 pixels. For examples: Smart phones. This will be by default selected category in Brixxbox. In this category, each control will be assigned to 12/12 by default. It means that in extra small screens, each control takes up the whole horizontal line and next control will take up whole next horizontal line and soon

  • Tablets (and up)

- This category includes devices which have screen pixels less than 992 pixels. For example: Tablets. By switching this settings on, they will come into play for particular app.

  • Medium Devices (Laptops)

- This category includes devices which have screen pixels less than 1200 pixels. For example: Laptops. In Medium devices, an input control will be set to 4/12 per control by default with option to customize the size of controls.

  • Large Devices (Big Monitors)

- This category includes devices which have screen pixels greater than 1200 pixels. For example: Big monitor displays.

  • Custom Label class

- This is only relevant if the control is in a From Group, and so the Label is left or right of the control instead of above it. It uses the same rules as the Width properties as above.

Styling

These properties defines how control looks like in Brixxbox.

  • Enabled

- It allows two options: yes, no. If yes is selected, the control will be enabled. In button's case, it will be clickable. On the other hand, if no is selected, it will be disabled.

  • Disabled in edit mode

- There are two modes available in Brixxbox for each app: edit mode, create mode. In edit mode: user is allowed to add new controls and functionality while in create mode, on the basis of app controls, user is allowed to add a new record, edit an existing record, or list all the records. In order to edit a record, user has to list all the records using app settings and then select a specific record to edit. "Disabled in edit mode" is a checkbox field. If this option is selected then the button will not be functional in edit mode but it will be functional in create mode of Brixxbox.

  • Visibility

- It will specify the visibility options available in Brixxbox. There are four options available: visible, hidden, hidden in grids, and hidden in forms.

  • Text Color

- Brixxbox allows user to specify, text colors of controls. There are seven different options available in Brixxbox.

  • Button Style

- This option gives color to control's background This is important option for button. It gives a hint for what to expect when clicking the button. For example, a cancel button should be of red background. This gives a hint to user that in case of pressing you will lose some information.

  • Squared

- This option will create a squared button. For example, if we have selected a button of 4/12 size and this option is also selected then a button of size 484 will be created.

  • Icon

- Brixxbox is very dynamic and allows a lot of configurability. Many icons are present in Brixxbox and user can choose according to their needs. If user select this option then the Icon will be placed next to the button label.

  • Tooltip

- Enter a text for a tool tip. This will be translated.

  • Help Text

- Brixxbox with the property allows users to add some help text. This text will be displayed below the control (in this case button). The purpose of this option is to encourage the right behavior of customer while using a specific control.

For further information please have a look at Bootstrap Grid System

Tutorial

This tutorial assumes that a user has an existing app and they want to add a new control of type "Button". In this app, we have two textboxes "first name", "last name" and we want to add a "save" button. We want to validate the inputs and save them when button is pressed. First of all, select "Button" from list of controls. After that you need to give an id to your button. After this save your application. Your application should look like this:

We can see a button named "Save" with white back ground. This does not give look promising. Now we can add different background colors. For doing this, go to button edit control and select "styling" tab. Here choose "Success" from Button sytle property. Now save your app. It will now look like this

We want to save the employee first name and last name when the button "Save" is pressed. Firstly, we need to add "onClick" event to our button and then we need to add code to our button "onClick" event. When our button is pressed, firstly we need to validate the input and display error if not. Add "nonEmpty" control validator on both "First Name" and "Last Name". Secondly, add "app.saveCurrentRecord();" code to "onClick" of our save button. Now if you try to save the empty record. It will give error. The error is shown below:

PreviousBadgeNextCamera

Last updated