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


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


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


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:


CheckBox

CheckBox

A checkbox that can be checked (value: 1) or not (value: 0). For example, if you have an items application. You can use checkbox to show its availability.

Demo

{% embed url="https://youtu.be/Z72Ao2Pge5c" %}

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 Check box control, "Check Box" 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. Brixxbox saves checkbox value in one bit.

Label

It is the display value for control. For checkboxes, it makes sense to label them like "isAvailable" in the form of Yes/ No questions

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

This value is set when an application is opened or a new record is created.

Tutorial

This tutorial assumes that a user has an existing app and they want to add a new control of type "Check Box". First of all, select "Check Box" from list of controls. After that you need to give an id to your check box and create column in database. We also added two buttons "Set" and "Reset". For this tutorial we will follow the structure of demo given above.


We need to add code to our button "onClick" events. "Set" button will set the value of checkbox and "Reset" button will unselect it. Brixxbox accepts input for setting/resetting checkboxes in following formats: as an integer (0,1), as a string "0 or 1", as a Boolean (true or false). The code snippet of Set button is given here

When set button is pressed, it sets the checkbox. Similar is the case when the reset button is clicked it will uncheck the checkbox. After clicking set button our app will look like this

In the last, there is one point you need to care about whenever you want to use true and false to set or reset the checkbox do it in these three ways 0, "0" or false. Do not use true or false as string values like "false" while setting the value of checkbox. It will result in unexpected behavior.


TabControl

TabControl

When an application has many controls or in other words, a lot of information to store. Adding more controls on one screen, in such manner that they become congested, is not sensible. Instead of doing so, it becomes appropriate to add different pages to your application. Brixxbox provides users with two types of pages: Tabs, and Accordions. In Brixxbox, if we want to add pages to our application we will need a control to manage these pages. This is done by "TabControl".

Documentation

Brixxbox app configurations allows you to add different controls in your app. "TabControl" acts as an host element for TabPages or Accordions. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

Control Type

For using this control, "TabControl" 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.

Label

It is the display value for control.

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.

Size

In Brixxbox, the screen is divided into 12 logical columns horizontally. For each control you can select explicitly how big 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. If this option is not selected then 12 column's will be shared between label and control itself and both of them will be present on same line in side by side formation. For example, label can be 4/12 column's long and control can be 8/12 columns long over same horizontal line.

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

Phone (and up)


Phone (and up)

This category includes devices which have screen pixels less than 768 pixels. For example: 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's input will be enabled. In "TabControl" case, it will have no effect because "TabControl" is not expecting any kind of input.

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 control will not be functional while editing a previously saved record but it will be functional while creating a new record. In "tabControl" case, it will have no effect because "TabControl" is not expecting any kind of input.

Visibility


Visibility

It will specify the visibility options available in Brixxbox. There are four options available: visible, hidden, hidden in grids, and hidden in forms. For example, if hidden option is selected then we will not be able to different tab pages in a tab control.

Text Color

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

Tooltip

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

Help Text

Brixxbox with the property allow users to add some help text. This text will be displayed below the control. 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. In this app, we have two textboxes "first name", "last name". In this tutorial, we want to put them in a tab page and ultimately add this tab page in a "Tab Control". Tab pages are the control containers which can be placed inside "Tab Control". If you want to know more about "Tab Page" have a look at its documentation. Lets get started.

Our app looks like this at start:

Now first add a "Tab Page" control and label it with "Personal Details". In next step, add both textboxes "First Name", "Last Name" as child's to the tab page. Both text boxes have become siblings now. In the last step, add new "Tab Control" and make our tab page a child of "Tab Control"

We have successfully created a tab page and placed it inside the "Tab Control".


ComboBox

ComboBox

Comboboxes are often used to refer to header records (an order line record will most likely have a combobox with its order record).

Demo

{% embed url="https://youtu.be/KhrooXGYBQ4" %}

Documentation

In Brixxbox app configurations you can add different controls. One of them is ComboBox. Each control has four types of settings

General Properties

Size

Style

Translation

General Properties

These are main behavioral properties of any control. These are responsible for control's functionality.

Control Type

For using combobox control, combobox control type should be selected from drop down list.

Control Id

For each Brixxbox app, this id should be unique. By default Brixxbox assigns a random id which starts with underscore and followed by a string. For Example: "_abcdef". Brixxbox allows you to change its value only once. You can change this id to any value. Recommended way is to start with mandatory prefix(set in app). It can contain numbers, underscores, uppercase and lowercase letters. Each control is always accessed with its Control Id. For Example, you can get and set control value by using its ControlId. If you want to store value of this control in database, use the database button to create a column. You will be able to select column datatype, max length, can be null, options.

Label

It is the display value for control.

Data

This property specifies from where this control gets data. If no option is specified then by default "Not in Database" option is chosen. If you want to set it then you have to specify the controlId of data source.

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.

Combobox Key Field

This is the field value from the sub data source. It also becomes the value of our combo box. When we have to get the value of our combo box using "getfieldvalue" function. It will return the corresponding id of selected combobox entry.

Combobox Value Field


Combobox Value Field

This option defines how each entry of your combobox will be displayed. It can be a single or multiple columns from sub data source. For single column just name the column. For Example, "adrName". If you want to choose multiple columns, then use curly brackets. You can choose any place holders between them. For example, {id} - {adrName}. "-" is a place holder while id, adrName are column names.

Min Search Length

This option specifies the minimum search length of string to trigger search function. If you do not want any search function then specify "-1". In case you want to specify after how many characters Brixxbox should trigger the search and get actual records from the sub data source, specify it here as positive integer. For Example, if value 3 is specified then Brixxbox will trigger actual search only after 3 characters are entered in search field.

Multiselect

When this option is specified, one can select multiple values as combobox entries.

Select List Button

By default this is hidden. It opens a list of all items of sub data source. It can be used to select an entry from combobox.

Select Edit Button

By default this is enabled. If a value is selected in combobox then by clicking edit button will open the complete record in corresponding application. If it is clicked without any value it will open the corresponding application with no record. It can be used to add a new record.

Default Value

This value is set when an application is opened or a new record is created.

Tutorial

This tutorial will follow the similar example used in the demo for combobox. You can find this demo at the top of this page.

This tutorial assumes that a user has an existing app and they want to add a new control of type "Combo Box". First of all, select "combo box" from list of controls.

After that you need to give a id to your combobox and create column in database if necessary. Here we named it "myCombo". Also, add a public label for combobox. We labelled it "Address".


Now save the control. It is time to assign a sub data source to our control. Click a sub data source button. Here you can assign different types of data sources. For this example, we will use config data source type. After that select the corresponding app config. We are selecting "address" config because we want to display all the addresses.

Up till now we have defined a combobox, assigned a unique control id and also added a sub data source to it. Now we want to assign two main properties to combobox: combobox key field, combobox value field. "Combobox key" property is a column from result set that will also be the value of our combobox when the entry of combobox is set. Mostly it is the id of result set. Here we also choose id. We can use this value for comparisons. For combobox value field, we want to display values of two columns: adrNumber, adrName from result set. We have to use curly brackets when using multiple columns.

Each entry of combobox will now represent the number of the address and the person's name. For example "10001 John". In this way we can define and use combobox but can we use the value of combobox to display or change some other data? the answer is yes!. For demonstration, we will add grid control (see grid documentation) "myGrid". We also assign address config as a sub data source for our grid control. Now "myGrid" control will display all the addresses present in the result set.

As you can see from above picture that nothing is selected in our combobox "Address". Now we want that whenever we select a record in combobox, the grid displays the same selected record only. For this purpose, we need to modify sub data source of mygrid and add a where clause. An important thing to note here is that all controls of an app are available as sql parameters. In where clause, we need to specify a condition which displays only a record which matches combobox value. We can specify this as "id=@myCombo". Remember that we selected "combobox key field" as id of sub data source "address". In order to pass this change to grid, we have to add a control event "onChange" to our combobox control. Whenever our combobox value change, we want "myGrid" to refresh.


Now save and set a combobox value and we will be able to see only selected record in "myGrid". As we can see from figure below.

Combobox also allows us to select multiple records at a same time. To achieve this functionality, select "multiselect" checkbox from combobox properties. You can see from figure below that multiple values are selected in combobox but there is no record shown in grid.

This is because we were using where clause for comparing one value of combobox but now our combobox has multiple values. Now if we call "getfieldvalue" function on our combobox. It will return an array with selected combobox key value's. Now we have to update our where clause logic in grid to display all selected records. We add this statement to where clause "id in (select value from OpenJson(@myCombo))". This statement says that if a value is present in result set then display it in grid.


FullCalendar

Calendar

This Control provides an outlook like calendar.

Demo

{% embed url="https://youtu.be/iF6Gr29hr4U" %}

Usage examples

Setting a date to a calendar control scrolls to that date.

javascript
   brixxApi.setFieldValue("myCalendarControl", "2019-01-31");

Sub Settings

The Calendar supports sub settings to set. You can add resource(s) to the calendar for example:

Resources

You can add resources to your calendar by using the setFieldValue comand. To see and use them, you have to enable to resource views in the control view properties.

```javascript
   //Resources will delete all and set a new array of resources
   brixxApi.setFieldValue("myCalendarControl.resources", [
   {
       id: 1,
       title: "Room A",
   },
   {
       id: 2,
       title: "Room B",
   }]);

//resource will add a single resource
   brixxApi.setFieldValue("myCalendarControl.resource", {
       id: 1,
       title: "Room A",
       mySortCrit: 100
   });
```

\
Resources can be grouped. You need a grouping criteria in your resources and you must tell the calendar the name of this criteria. The order of both operations does not matter.

```javascript

//Set the grouping criteria
   brixxApi.setFieldValue("myCalendarControl.resourceGroupField", "building");

//Add the resources
   brixxApi.setFieldValue("myCalendarControl.resources", [
      {
          id: 1,
          building "Main building",
          title: "Room A",
      },
      {
          id: 2,
          building "Main building",
          title: "Room B",
      },
      {
          id: 3,
          building "Side building",
          title: "Room C",
      },
      {
          id: 4,
          building "Side building",
          title: "Room D",
      }
   ]);
```

The width of the resource side panel can be set as well. Can be specified as a number of pixels, or a CSS string value, like "25%".

javascript
   brixxApi.setFieldValue("myCalendarControl.resourceAreaWidth", "30%")

You can sort the resourceList by a setFiedlValue command as well.


You can sort the resourceList by a setFiedlValue command as well.

javascript
   brixxApi.setFieldValue("myCalendarControl.resourceOrder", "title");
   brixxApi.setFieldValue("myCalendarControl.resourceOrder", "-title"); //sort descending
   brixxApi.setFieldValue("myCalendarControl.resourceOrder", "mySortCrit,title"); //sort by your custom resource property mySortCrit, then by title

\
To assing events to resources, set the resourceId property in the DataTransform event like the start or end time.

javascript
   eventArgs.details.title = eventArgs.details.myTitle;
   eventArgs.details.start = eventArgs.details.myStart;
   eventArgs.details.end = eventArgs.details.myEnd;
   eventArgs.details.resourceId = eventArgs.details.myRoomId; //set resourceId to assing the event to a resource

Views

You can switch to a specific view mode by calling a set value. The following view modes are available, but might be restricted to your control settings.

dayGridMonth

timeGridWeek

timeGridDay

listWeek

resourceTimeline

resourceTimelineWeek

resourceTimeGridDay

javascript
      brixxApi.setFieldValue("myCalendarControl.view", "resourceTimeline");


Controls


TextBox

Text Box

A text box just lets the user enter a text and saves it. You can use various validators to check the input. For example, "nonEmpty" validator will display error that this field should not be left empty.

Documentation

Brixxbox app configurations allows you to add different controls in your app. Text box is one of the simplest and commonly used control. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

Control Type

For using Text Box control, "text input" 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.

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.

Include in global search

If checked, this allows this control to be included in global search scope of this application.

Select all on focus

This property when checked allows to select all the text in the text box, whenever this text box comes in focus.

Input Mask RegEx

This property allows you to set regular expression for input of text box. For example, ^[0-9a-zA-Z]*$. This regex allows digits from 0 to 9, small and big alphabets to be part of the input.

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.

Unit

The property allows you to specify a unit character here. For example we can specify $ for US Dollar, â¬ for Euro etc.

Load record on load

If this checkbox is selected then Brixxbox will load the record using value of this text box as a key.

Default value

This value is set when an application is opened or a new record is created.

Tutorial


Default value

This value is set when an application is opened or a new record is created.

Tutorial

This tutorial assumes that a user has an existing app and they want to add a new control of type "Text Input". First of all, select "Text Input" from list of controls. After that you need to give a id to your textbox and create column in database if you want to store the input in database. Here we named it "tbdText". Also, add a public label for Textbox. I labelled it "Street Name". You can any text in it. For example, add name of street. When you save this record. It will be saved in database. This is the first usage. We can also use text box to display the results from other controls. Lets use address combobox here. It is the same combobox we used in combobox tutorial.

Now when we select the value of combobox, we also want to set the value of "tbdText". The value of "tbdText" will correspond to name of street of the address selected in combobox. For this purpose, we need to add "onchange" event on combobox and add a custom code for it. In this code, first of all, we get the id of address chosen in combobox then we load the complete record using Brixxbox "loadConfigRecordById". In the end we will set the value of "tbdText" by using "setFieldValue" function. In this function, the first parameter takes the controlId of control whose value we want to set and second parameter takes actual value.

Now save the app config and test it by selecting any value of address combobox. It will also set the street name text box with corresponding street name.


NumBox

A numeric Text box lets the user to enter a number. It can be used for saving numerical input and also for displaying numerical data. You can use various control validators to check validity of input like "nonEmpty", "digits", "lessThan", and "zipCode" etc. For example, if you want to store a zip code for addresses, you can use a num box for input and then use a control validator "zipCode" on it. "zipCode" validator allows users to set two properties: custom message, country code. User can set any message according to application needs and specify the country name. Brixxbox will display error if zip code entered by user is not valid with respect to country code provided in settings.

Documentation

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

General Properties

These properties defines how control behaves in Brixxbox.

Control Type

For using num box control, "Numeric input" 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.

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.

Select all on focus

This property when checked allows to select all the data in the num box, whenever this num box comes in focus.

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.

Decimal Digits

This option allows you to set whole numbers or real numbers up to 10 decimal precision as a valid input for your num box.

No Up/Down arrows

If you check this option then no up/down arrows will be provided next to number. The default functionality of up/down arrows is to provide increment by 1 or decrement by 1 when upper arrow or down arrow is clicked respectively.

Unit


Unit

The property allows you to specify a unit character here. For example we can specify $ for US Dollar, â¬ for Euro etc.

Load record on load

If this checkbox is selected then Brixxbox will load the record using value of this text box as a key.

Default value

This value is set when an application is opened or a new record is created.

Tutorial

This tutorial assumes that a user has an existing app and they want to add a new control of type "Numeric Input". First of all, select "Numeric Input" from list of controls. After that you need to give an id to your num box and create column in database if you want to store the input in database.

Here we will consider two possible scenarios: getting a value from user for our num box and saving it, and on the basis of other control displaying some value in our num box.

Let start with the first case. For our Tutorial, select a "Numeric input" control type. Assign a meaningful controlId to it. We name it "nbZipCode". Here we add "ZipCode" name with mandatory prefix of the app "nb". Add it to database because we want to store zip codes. We have also assigned "Zip Code" label to it. Now save it.

With above settings, any numeric values can be accepted as a valid input but we want to change this behavior of num box. We want to save zip codes of Germany in our num box. The question arises, How can we alter the settings of num box so that it only accepts valid zip code? A valid German zip code consists of only 5 positive digits. To achieve it, we add a control validator "zipCode" to our num box. In its settings, for country code we choose "DE" for Germany and save it.

Now our num box only allow 5 digits positive numbers. Otherwise it will give an error.

Now we will take a look into second case. Let take the address comboBox which we used in the combo box tutorial. Now when we set an address in our combobox, we want to display its corresponding zipcode in our num box. We have to write a custom code on "onChange" event of combobox. This event will be triggered when combo box value change. The code looks like this


In first line of code we are getting the "key field value" of our selected combobox value. To get full record from data we are using "loadConfigRecordById" function in line 2. In line 3 we are setting the value of zip code num box with the value of zip code of loaded record. We also do not want our users to change this value. We need to set "Enabled" styling property of our num box to "No". Now when we select an address from combobox, it sets the num box value with the zip code of record set in combo box.


Grid

Grid

A grid displays a list of records, specified by the sub data source of that control.

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:

General Properties

Size

Style

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 "Grid" control type from drop down.

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.

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.

Hide Select Checkbox Column

By default, grid also display's a checkbox with each row. This checkbox is used to select a specific row. If it is enabled then user can select multiple rows at a time and perform different operations on them like deletion. If user does not want to display this checkbox then this property should be checked.

Hide Edit Button Column

This property is by default unchecked. It allows grid to display an edit button with each displayed row. If user does not want to display Edit button then this property should be checked.

Cascade Delete

This is a checkbox. If it is set and a delete operation is performed on a record, in an app containing this Grid control then all the lines of a record will get deleted. For example: User wants to delete an order with all of its item's lines.

Cascade Copy

If it is set and a copy operation is performed on a record, in an app containing this Grid control then all the lines of a record will get copied. For example: User wants to copy an order with all of its item's lines.

Server Side Paging

Use this property for big data tables. If checked, grid will only be able to data from server side only instead of getting all the data from data source.


Smooth Scroll

If checked, this property allows the users to scroll through list of items of grid instead of scrolling up and down via paging buttons.

No automatic refresh

Use this property when fetching expensive Grid data. If set, it will block unnecessary calls for data. Brixxbox allows an app to refresh data of all of its controls using "app.refresh()" function. Settings this property will exclude this grid from data refresh calls. However, you can refresh grid data by specifying the grids name in refresh function. For Example: app.refresh("myGrid").

Tutorial

Gird control can be used in two possible scenarios: displaying all data of sub data source. For example: listing all customer orders, and displaying some values. For example: listing order lines of a specific customer order only.

This tutorial assumes that a user has an existing customer order app which records customer's order data. They want to list all customer orders in a new app and update grid to display all order lines of a specific customer order in customer order app.

For first scenario, create a customer order list app, select "Grid" from list of controls. After that you need to give an id to your grid. As grid is usually used to display data from a sub data source, so there is no need to create column in database for Grid control.

Let start with the first case. Select a new app, name it "customerOrderList". Select a "Grid" control type from the list, assign a unique id and meaningful label:

As you can see from the above picture, we have added a grid control but nothing appears in app editor on right side. This is not an error but expected behavior because grid control is used to display a list of records but first we need to specify "sub data source" in grid properties. For this click on "edit sub data source" and select "config" as a data source type. Now select "CustomerOrder" app to display all customer orders and save app settings.

Now you can see that our grid list all customer orders. In its menu, grid allows multiple options like adding new data row, deleting data row, refresh grid, copy data, search filter and drop down list for specifying number of entries for display. Grid provides each data row with plus, select, and edit button. Depending on screen size grid displays only few data columns and plus button is used to see remaining columns as shown below:


Grid allows us to enable or disable select and edit buttons(see General Properties). We have successfully listed all customer orders, now we move towards second scenario. We have two relations between customer order and order lines which are: customer order can have multiple order lines, and one order line can only belong to one customer order. In this part, we want to cover second relation. Now we want to display order lines which belong to only one customer order in customer order app grid. Our customer order app looks like this:

There are a lot of details in this app which are not important here. Our concern is order lines gird which will display only those order lines which belong to one specific order. To allow this behavior, we need to edit "sub data source" settings of our order lines grid and set "target field binding" with the customer order line id.

Now we will see only those order lines in our grid which belong to same customer order. Lets add a new order for our customer John and add a new order line for this order.

Now order lines which belong to John's order are being displayed in our order lines grid. In our case we only added one order line.


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:

General Properties

Size

Style

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.


Custom Grid Column Date Format

{% embed url="https://scribehow.com/shared/Custom_Grid_Column_Date_Format__-gCoRKIhSp6CgvPorDUgHg" %}


Brixxbox Welcome Tour

{% embed url="https://scribehow.com/shared/ERP-Cockpit__2aJnoQ5HSgmWzNK8AqaOtg" %}


description: How to use brixxbox custom functions in telerik

Telerik Page Footer Sum

BrixxPageFooterSum

Sums elements in a table up to this footer

{% hint style="info" %}
Each page sum function can only be used once in a report. Using it multiple times will result in wrong calculated values!
{% endhint %}

Demo

javascript
//This function belongs in a PageFooterSection of a telerik report
=PageExec("textBoxValue",             //put in a textbox from your table row. Typically your value textbox, but whatever is in your row will work. This triggers the accumulation of the values
           BrixxPageFooterSum(
               Fields.yourValue,      //put in the Value Field you want to sum up
               ReportDefinition))     //this is fix (it will tell the sum to reset for each new report)


description: Example of a HTTP Request to the brixxbox

Create Report REST

Create Report REST

You can create a report from 3rd party systems by using a http POST call to the brixxbox.

We created a postman solution to demonstrate the call because you have to login first. Run in Postman

3 Environment Variables have to be set in Postman: "UserEmail" and "UserPassword" for the login call an "Workspace" for the url part of the CreatePdf call

You can specify if the report should be archived or not in the post parameters:

```json
// POST call to https://app.brixxbox.net/w/{{Workspace}}/c/default/reporting/CreatePdf
{
   "reportName": "addresslist",

//optional parameters
   "archive": false, //optional, false is default
   "configName": "address", //optional, only if you want to archive
   "documentTypeId": 1, //optional, only valid if configName and parameter 'id' is set and archive is true
   "culture": "de-DE", //optional, report has its defaults
   "parameters": { //optional
       "id": 1
   }
}
```


Printing in LAN

How to print on a local Printer in your LAN

{% embed url="https://youtu.be/x4U6f5cEe4o" %}


How Tos


description: >-
  Sums elements in a table up to this header (carry over from previous footer
  sum)

Telerik Page Header Sum

{% hint style="info" %}
Each page sum function can only be used once in a report. Using it multiple times will result in wrong calculated values!
{% endhint %}

javascript
//This function belongs in a PageHeaderSection of a telerik report
=PageExec("textBoxValue",             //put in a textbox from your table row. Typically your value textbox, but whatever is in your row will work. This triggers the accumulation of the values
           BrixxPageHeaderSum(
               Fields.yourValue,      //put in the Value Field you want to sum up
               PageNumber,            //this is fix (the PageNumber variable from your report. this will tell the function when to take a sum)
               ReportDefinition))     //this is fix (it will tell the sum to reset for each new report)


Telerik Extension Functions