description: >-
  Business Brixxes provides special features for business usecases. Each Brixx
  has an individual set of parameters plus some parameters that are valid for
  all businessfunctions.

businessBrixx

Parameters

functionName - the name of the businessBrixx module
 methodName - some businessBrixx functions provide several operations
 silentMode - if you set this to true, the brixxbox will not show a message if something goes wrong. You will still get the errorMessage, to handle the error case in your event code.

Example Usages

```javascript
   let result = await brixxApi.businessBrixx({
      //Common Parameters for all functions
      functionName:"DhlShiping",
      methodName: "GetLabel",
      silentMode: true,  //false is default. If set to true, the brixxbox will not show an error message box. it is up to you to inform the user.

});
   window.open(result.labelUrl, "_blank");
```

Business Brixx

DhlShiping

CreateShipment â’ Creates a DHL Shipping Label.

GetLabel â’ Shows the shipment Label again.

DPD Shipping

CreateShipment â’ Create a DPD Shipping Label.

UPS Shipping

CreateShipment â’ Create a UPS Shipping Label.

CancelShipment â’ Removes existing Shipment

GetLabel â’ Shows the shipment Label again.

InventoryManagement â’ Does Inventory Movements within an ERP Setup

Move

CurrencyConverter

Convert â’ Converts a currency to annother currency.

Datev Export

DatevExport â’ This function exports a Datev CSV file for a given timeframe.
sqlDataRead Example
sqlMainData Example
sqlGetCounter Example

GS1 Code Splitter

Split â’ Splits a barcode (or 2d code) into its GS1 AIs an Values.

Diamant

DiamantBusinessBrixx


description: Converts a currency to another currency

Currency Conveter

Mandatory fields: fromCurrencySymbol, toCurrencySymbol

Example Usages

javascript
 let rate = await brixxApi.businessBrixx({
     functionName:"CurrencyConverter",
     methodName: "Convert",
     fromCurrencySymbol: "EUR",
     toCurrencySymbol: "USD"
 });
 console.log(rate)


description: Example for a getDatevData script

Datev Export SqlDataRead Example

This is the main script, which is responible for collection all the data, which needs to be exported.

Available Parameters

@company - If you work with multiple companies, you have to export each company by it's own.

@dateFrom - Start date for the export

@dateUntil - End date for the export

Example Usages

```sql
 SELECT
    head.id AS Auftragsnummer,
    ol.cordlnItemId AS Artikelnummer,
    ol.id AS ArtikelRecordId,
    ol.cordlnParagraph13b AS Paragraph13b,
    ol.cordlnNetOrderValue AS NettoWert,
    ol.cordlnGrossOrderValue AS BruttoWert,
    adr.adrDebitor AS Debitorenkonto,
    0 AS Kreditorenkonto,
    cordlnSalesAccount AS Sachkonto,
    adr.adrTaxId AS SteuerID,
    cordlnTaxKey as Buchungsschluessel,
    '' AS Buchungstext,
    head.cordInvoiceDate AS Rechnungsdatum,
    head.cordInvoiceNumber AS Rechnungsnummer,
    head.cordShippingDate AS Leistungsdatum,
    atta.id AS AttachementId,
    'customerOrder' AS BuchungszaehlerTabelle,
    'cordDatevExportId' AS BuchungszaehlerSpalte,
    CASE WHEN fiac.finaccIsAccountSplitting = 1 THEN fiacsplit.facsIsAutomaticAccount ELSE fiac.finaccIsAutomaticAccount END AS IstAutomatikKonto,
    head.cordInterCompanyOrder as IstInnerbetrieblich


FROM dbo.bbv_customerOrderLine AS ol
 LEFT JOIN [dbo].[customerOrder] AS head ON head.id = ol.cordlnOrderId
 LEFT JOIN address AS adr ON adr.id = head.cordAddressId
 LEFT JOIN brixx_Attachments AS atta ON atta.id in (select AttachmentId from brixx_AttachmentLinks where RecordId = head.id AND TableName = 'customerOrder' ) AND atta.DocumentTypeId = 2
 LEFT JOIN financialAccount AS fiac ON fiac.finaccAccountNumber = cordlnSalesAccount
 LEFT JOIN financialAccountSplitting AS fiacsplit ON fiacsplit.facsAccountId = fiac.id AND fiacsplit.facsSplitAccount = fiac.finaccAccountNumber
 WHERE ol.cordlnOrderId IN
 (
    SELECT id FROM [dbo].[customerOrder]
    WHERE cordShippingDate >= @dateFrom AND cordShippingDate <= @dateUntil
    AND cordCompanyId = @company
 )
 AND ol.cordlnNetOrderValue > 0
 AND head.cordStatusId >= 4

UNION

SELECT
    head.id AS Auftragsnummer,
    ol.sordlnItemId AS Artikelnummer,
    ol.id AS ArtikelRecordId,
    ol.sordlnParagraph13b AS Paragraph13b,
    ol.sordlnNetOrderValue AS NettoWert,
    ol.sordlnGrossOrderValue AS BruttoWert,
    0 AS Debitorenkonto,
    adr.adrKreditor AS Kreditorenkonto,
    sordlnitmProcurementAccount AS Sachkonto,
    adr.adrTaxId AS SteuerID,
    sordlnTaxKey AS Buchungsschluessel,
    '' AS Buchungstext,
    head.sordGoodsReceiptDate AS Rechnungsdatum,
    head.sordInvoiceNumber AS Rechnungsnummer,
    head.sordGoodsReceiptDate AS Leistungsdatum,
    atta.id AS AttachementId,
    'supplierOrder' AS BuchungszaehlerTabelle,
    'sordDatevExportId' AS BuchungszaehlerSpalte,
    CASE WHEN fiac.finaccIsAccountSplitting = 1 THEN fiacsplit.facsIsAutomaticAccount ELSE fiac.finaccIsAutomaticAccount END AS IstAutomatikKonto,
    head.sordInterCompanyOrder as IstInnerbetrieblich


FROM dbo.bbv_supplierOrderLine AS ol
 LEFT JOIN [dbo].[supplierOrder] AS head ON head.id = ol.sordlnOrderId
 LEFT JOIN address AS adr ON adr.id = head.sordAddressId
 LEFT JOIN item AS itm on itm.id = ol.sordlnItemId
 LEFT JOIN brixx_Attachments AS atta ON atta.id in (select AttachmentId from brixx_AttachmentLinks where RecordId = head.id AND TableName = 'supplierOrder' )
 LEFT JOIN financialAccount AS fiac ON fiac.finaccAccountNumber = ol.sordlnitmProcurementAccount
 LEFT JOIN financialAccountSplitting AS fiacsplit ON fiacsplit.facsAccountId = fiac.id AND fiacsplit.facsSplitAccount = fiac.finaccAccountNumber
 WHERE ol.sordlnOrderId IN
 (
    SELECT id FROM [dbo].[supplierOrder]
    WHERE head.sordGoodsReceiptDate >= @dateFrom AND head.sordGoodsReceiptDate <= @dateUntil
    AND sordCompanyId = @company
 )
 AND ol.sordlnNetOrderValue > 0
 AND head.sordStatusId = 5
```


description: >-
  This is the script, which is responsible for collection all the address data,
  which needs to be exported.

Datev Export sqlMainData Example

Available Parameters

@company - If you work with multiple companies, you have to export each company by it's own.

@dateFrom - Start date for the export

@dateUntil - End date for the export

Example Usages

sql
 SELECT adr.id AS Kundennummer,
       CASE WHEN adrIsCustomer = 1 THEN adr.adrDebitor ELSE adr.adrKreditor END AS Konto,
       adr.adrName AS Firmenname,
       adr.adrLastName as Nachname,
       adr.adrFirstName as Vorname,
       '' AS Anrede,
       'STR' AS Adresstyp,
       adrLoc.alocStreet AS Strasse,
       adrLoc.alocStreetNumber AS Hausnummer,
       adrLoc.alocZip AS PLZ,
       adrLoc.alocCity AS Stadt,
       adrLoc.alocAdditionalInfo AS Zusatzinformation
  FROM [dbo].[address] AS adr
  LEFT JOIN addressLocation AS adrLoc ON adrLoc.id = adr.adrDefaultInvoiceAddress
  LEFT JOIN country AS country ON country.id = adrLoc.alocCountryId
 WHERE adr.adrIsCustomer = 1 OR adr.adrIsSupplier = 1


description: >-
  This function exports a Datev CSV file for a given timeframe. The fuction
  needs 3 customized SQL scripts to process the data.

Datev Export

As this function calls customized SQL scripts, it will add SQL parameters from the function call to the SQL calls.

@company

@dateFrom

@dateUntil

Those parameters can be used within the SQL statements.

Needed output columns from SQL scripts

sqlDataRead script

Auftragsnummer

Artikelnummer

ArtikelRecordId

Paragraph13b

NettoWert

BruttoWert

Debitorenkonto

Kreditorenkonto

Sachkonto

SteuerID

Buchungsschluessel

Buchungstext

Rechnungsdatum

Rechnungsnummer

Leistungsdatum

AttachementId

BuchungszaehlerTabelle (nvarchar that defines the tabel, where the booking counter is stored)

BuchungszaehlerSpalte (nvarchar that devines the column for the booking counter)

IstAutomatikKonto

IstInnerbetrieblich

sqlMainData script

Kundennummer

Konto

Firmenname

Nachname

Vorname

Anrede

Adresstyp

Strasse

Hausnummer

PLZ

Stadt

Zusatzinformation

sqlGetCounter script

This script needs to return the actual booking counter as number.

SQL script examples

sqlDataRead Example

sqlMainData Example

sqlGetCounter Example

Example Usages

javascript
 brixxApi.businessBrixx({
    functionName:"DatevExport",
    sqlDataRead:"getDatevData",
    sqlMainData:"getDatevMainData",
    sqlGetCounter:"getDatevBookingCounter",
    exportFromDate: moment().subtract(2,'months').startOf('month').format('YYYY-MM-DD'),
    exportUntilDate: moment().subtract(2,'months').endOf('month').format('YYYY-MM-DD'),
    consultantNumber: 1234567,
    clientNumber: 12345,
    company: 1,
    isDownload: true
 });


description: >-
  This is the main script, which is responsible for collection all the data,
  which needs to be exported.

Datev Export sqlGetCounter  Example

Available Parameters

@company - If you work with multiple companies, you have to export each company by it's own.

@dateFrom - Start date for the export

@dateUntil - End date for the export

Example Usages

sql
 SELECT MAX(DatevExportId) FROM
 (
    SELECT ISNULL(MAX(cordDatevExportId), 0) AS DatevExportId FROM customerOrder WHERE cordCompanyId = @company
    UNION ALL
    SELECT ISNULL(MAX(sordDatevExportId), 0) AS DatevExportId FROM supplierOrder  WHERE sordCompanyId = @company
 ) AS sub


description: Opens a booking stack and returns the number to the client

Diamant OpenStack

Example Usages Get

javascript
 let result = await app.businessBrixx({
    functionName:"Diamant",
    methodName: "OpenStack",
});
app.setFieldValue("myBookungStackNumber", result.data); //result.data is the stackNumber


description: >-
  This brixxbox module allows to retrieve data from the Diamant Accounting
  Software and post data to it

Diamant Connector

Get Method

The Method Retrieves the data specified with dataType (like Address, CostCenter and so on). The searchParams and fieldMatch JSON properties are valid for all methods, but the fields mentioned in it are depending on the datatype used. For example: postcode is a valid searchParam for addresses, but not for cost centers.

The Get method will return the data it fetched from Diamant, so you get an array of JSON objects. The fieldMatch prameter will tell the brixxbox to change field names, so that it is more useful in an brixxbox environment.

Example Usages Get

This will retrieve all addresses from diamant. Field names are the original diamand field names

javascript
 let result = await brixxApi.businessBrixx({
     functionName:"Diamant",
     methodName: "Get",
     company: "9018",
     dataType: "Address",
 });
 console.log(result)

\
This will retrieve all addresses with Postcode 61118 from diamant and return the result. The fields postcode is changed to adrZip by the brixxbox and name1 is changed to adrName. All other fields are ignored and are not in the result set.

javascript
 let result = await brixxApi.businessBrixx({
     functionName:"Diamant",
     methodName: "Get",
     dataType: "Address",
     searchParams:{
         postcode: "61118"
     },
     fieldMatch:{
         postcode: "adrZip",
         name1: "adrName"
     },
 });
 console.log(result)

ImportTable Method

This method allows you to retrieve the data and insert it into the database. Query parameters work the same and are optional but you must user fieldMatch to assign diamant names to brixxbox field names

Example Usages Import Insert

This will retrieve all addresses from diamant and insert it into the table address the table will be wiped right before the import.


This will retrieve all addresses from diamant and insert it into the table address the table will be wiped right before the import.

javascript
 let result = await brixxApi.businessBrixx({
     functionName:"Diamant",
     methodName: "ImportTable",
     dataType: "Address",
     tableName: "address",
     wipeTable: true,
     fieldMatch:{
         postcode: "adrZip",
         name1: "adrName"
     },
 });
 console.log(result)

Example Usages Import Upsert

This will retrieve all addresses from diamant and update the records with the same id as in fieldMatch.

javascript
 let result = await brixxApi.businessBrixx({
     functionName:"Diamant",
     methodName: "ImportTable",
     dataType: "Address",
     tableName: "address",
     upsert: true,
     wipeTable: true,
     fieldMatch:{
         key: "adrKey,id",
         postcode: "adrZip",
         name1: "adrName"
     },
 });
 console.log(result)

Supported dataTypes

More types can be added at request.

Request Data

Address (Adressen)

CostCenter (Kostenstellen)

GenLedgAccount (Sachkonten)

CostObject (KostentrÃ¤ger)

PrimCostElement (PrimÃ¤rkostenarten)

Project (Projekte)

Company (Mandanten)

Customer(Konten)

Vendor (Vendor)

Posting (Buchungen)

Transctions

OpenStack

Transaction

CloseStack


description: Closes a booking stack that qas previously open by OpenStack

Diamant CloseStack

Example Usages Get

javascript
 let result = await app.businessBrixx({
    functionName:"Diamant",
    methodName: "CloseStack",
    stackNumber: app.getFieldValue("myBookungStackNumber")
});


description: Creates a transaction in diamant

Diamant Transaction

Example Usage

javascript
let result = await app.businessBrixx({
    functionName:"Diamant",
    methodName: "Transaction",
    stackNumber: app.getFieldValue("myBookungStackNumber"), //if stackNumber is not set or 0, the brixxbox will automatically create a stack and close it right after the transaction
    bookingDate: "2021-12-23",
    type: "AR",
    number: "12345678",
    currency: "EUR",
    debitAccount: "20003000",
    debitValue: 3334,
    text: "Volkers Buchung",
    dueDate: "2022-04-30",
    creditAccount: "409000",
    creditValue: 3334,
    taxCode: 200,
    creditCostCenter: "21000",
    creditBusinessUnit: "100"
});
console.log(result);


DHL Shiping

CreateShipment â’ Creates a DHL Shipping Label.

GetLabel â’ Shows the shipment Label again.


description: Creates a DHL Shipping Label.

CreateShipment

If shipService is omitted the default value ""V01PAK" will be set.

Example Usages

javascript
   let result = await brixxApi.businessBrixx({
      functionName:"DhlShiping",
      methodName: "CreateShipment",
      weightInKG: "4",
      lengthInCM: "20",
      heightInCM: "20",
      widthInCM: "10",
      shipService: "V01PAK",
      recipientEmailAddress: "info@acme.com",
         senderAddress:{
         name1: app.getFieldValue("cordCompanyId.cusName"),
         streetName: app.getFieldValue("cordCompanyId.cusStreet"),
         streetNumber: app.getFieldValue("cordCompanyId.cusStreetNumber"),
         zip: app.getFieldValue("cordCompanyId.cusZip"),
         city: app.getFieldValue("cordCompanyId.cusCity"),
         countryCode: "DE",
         },
         receiverAddress:{
         name1: app.getFieldValue("cordCustomerId.cusName"),
         streetName: app.getFieldValue("cordCustomerId.cusStreet"),
         streetNumber: app.getFieldValue("cordCustomerId.cusStreetNumber"),
         zip: app.getFieldValue("cordCustomerId.cusZip"),
         city:app.getFieldValue("cordCustomerId.cusCity"),
         countryCode: "DE",
         },
      });
   console.log("Shipment Number: " + result.shipmentNumber)
   window.open(result.labelUrl, "_blank");


description: Shows the shipment Label again.

GetLabel

Example Usages

javascript
   let result = await brixxApi.businessBrixx({
      functionName:"DhlShiping",
      methodName: "GetLabel",
      shipmentNumber: app.getFieldValue("cordShipmentNumber")
   });
   window.open(result.labelUrl, "_blank");


description: Creates a DPD Shipping Label

CreateShipment

For accessing the DPD-Shipping brixxbox interface the DPD services need the following setup values (configuration -> settings).

DPDUserCredentialsCloudUserID

DPDUserCredentialsToken

DPDPartnerCredentialsName

DPDPartnerCredentialsToken

If no settings are available, a sample label will be generated.

Incomming Information

To create labels three groups of information are available:

1. OrderSettings with the following fields (If the group is not present default values will be assumed)

language: Values de_DE or en_EN are allowed. If nothing is set de_DE will be assumed.

ShipDate: if not available will be set to today

LabelSize: PDF_A4 or PDF_A6. If nothing is set PDF_A4 will be assumed.

LabelStartPosition: UpperLeft, UpperRight, LowerLeft, LowerRigh

2. ShipAddress:

Company

Gender

Salutation

FirstName

LastName

Name

Street

HouseNo

ZipCode

City

Country

State

Phone

Mail

3. ParcelData:

YourInternalID: should be set to your own reference (e.g. order no). if no value is provided a timestamp will be set.

Content

Weight: in kg

Reference1

Reference2

ShipService: set to a valid DPD-Service. If nothing is set Classic will be assumed.

\
Detailed informationen for field usage can be found at https://esolutions.dpd.com/dokumente/DPD_Cloud_Service_Webservice_Dokumentation_DE.pdf

Returning Information

In case of success (status 200) the following fields are returned

ParcelNo: The DPD generated ID. This will be used for further references to this shipment.

YourInternalID: The same ID that was provided for the request

TimeStamp: an informational time stamp when the request was processed

LabelData: this is a blob response. It contains the actual label in PDF format and can directly be used for further processing. E.g. brixxApi.printBlob(LabelPDF);


In case of error (status 400) the following fields are returned:

TimeStamp: an informational time stamp when the request was processed

ErrorDataList: an array with detailed information what went wrong. Every error will show the following fields
ErrorID: an internal error no
ErrorCode: an internal error code
ErrorMsgShort: Error information short version
ErrorMsgLong: Error information long version

Example Usages

```javascript
/----------------------------------------------------------------------------------------------
/This example is minimalistic and will create a sample label.
/You need to check which fields are relevant for your process and assign the values accordingly.
/----------------------------------------------------------------------------------------------/

var result = await brixxApi.businessBrixx({
      functionName:"DPDShipping",
      methodName: "CreateShipment",
      ShipAddress : {
        Company: 'Mustermann AG',
        Name: 'Max Mustermann',
        Street: 'Wailandtstr.',
        HouseNo: '1',
        ZipCode: '63741',
        City: 'Aschaffenburg',
        Country: 'DEU'
      },
      ParcelData : {
        Reference1: 'Customer email',
        Content: 'Order number',
        Weight: '13.5'
      }
      });
console.log("Parcel Number: " + result.ParcelNo)
brixxApi.printBlob(result.LabelData);


/----------------------------------------------------------------------------------------------
/This example uses all fields
/You need to check which fields are relevant for your process and assign the values accordingly.
/----------------------------------------------------------------------------------------------/
var result = await brixxApi.businessBrixx({
      functionName:"DPDShipping",
      methodName: "CreateShipment",
            OrderSettings : {
                language: 'de_DE',
                LabelSize : 'PDF_A4',
                LabelStartPosition : 'UpperLeft',
                ShipDate : app.getFieldValue("SomeFieldValue")
              },
            ShipAddress : {
                Company: app.getFieldValue("SomeFieldValue"),
                Gender: app.getFieldValue("SomeFieldValue"),
                Salutation: app.getFieldValue("SomeFieldValue"),
                FirstName: app.getFieldValue("SomeFieldValue"),
                LastName: app.getFieldValue("SomeFieldValue"),
                Name: app.getFieldValue("SomeFieldValue"),
                Street: app.getFieldValue("SomeFieldValue"),
                HouseNo: app.getFieldValue("SomeFieldValue"),
                ZipCode: app.getFieldValue("SomeFieldValue"),
                City: app.getFieldValue("SomeFieldValue"),
                Country: app.getFieldValue("SomeFieldValue"),
                State: '',
                Phone: app.getFieldValue("SomeFieldValue"),
                Mail: app.getFieldValue("SomeFieldValue")
              },
            ParcelData : {
                Reference1: app.getFieldValue("SomeFieldValue"),
                Reference2: app.getFieldValue("SomeFieldValue"),
                Content: app.getFieldValue("SomeFieldValue"),
                Weight: app.getFieldValue("SomeFieldValue"),
                YourInternalID: app.getFieldValue("SomeFieldValue"),
                ShipService: app.getFieldValue("SomeFieldValue")
              }
      });
console.log("Parcel Number: " + result.ParcelNo)
brixxApi.printBlob(result.LabelData);
```


DPD Shiping

DPDCreateShipment -> Creates a DPD Shipping Label


description: Just like a label but it will create a clickable link.

LinkLabel


description: >-
  A GroupBox is another structural control in Brixxbox controls. It is a
  structural element to create apps with side by side columns just like
  formgroup control

GroupBox

GroupBox

Normally Brixxbox takes the responsibility of placing controls in an app. In order to group controls in a row we can use row control. For a vertical alignment, you can formgroup or groupBox. Groupbox is the advanced form of formgroup. It has all the functionalities of formgroup. Additionally, it also has a header and a border.

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 "GroupBox" 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. It should be meaningful.

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.

Tutorial

In this tutorial, we will see how to use groupbox control to achieve vertical grouping of controls. This control is purely used for structuring controls. For this tutorial, we will be using item app. Our app has 5 controls: item id(numbox), | item name(text box), sale price(numbox), quantity(numbox), and quantity unit type(combobox). Right now, the order of controls is selected by us but the placement is selected by Brixxbox. Our app looks like this:


Now we want to present item id and item name in a vertical fashion. For that, we need Groupbox. Lets add a Groupboxfrom the controls list, name it "item details" and add both item id and item name as its children's. Now these two controls with be placed vertically and Brixxbox will try to place other controls in horizontal fashion, wherever it finds a place. Our app now looks like this:

As we can see in the above snapshot that item id and item name controls are placed vertically and groupbox containing them has a clear boundary and a header while other controls are placed row wise. If there is enough space available after groupbox, brixxbox will start placing other controls there. Now we also want to add two more groupboxes for other controls. Lets add two new groupbox type controls and place quantity controls in one groupbox and price control in second one as their children respectively:

\
We can see the final version of app is more organized. Item details, quantity details, and price details are in separate groupboxes with meaningful header and visible boundary makes our app much more readalbe.


description: >-
  You can embed a brixxbox app into your app below a grid to show grid line
  details

AppConfig


description: >-
  The Doc Viewer can be used to show blobs or create reports like the report
  control.

DocViewer


description: A label control is designed to be a standalone text

Label

It can be used as headings or giving specific instructions about usage of different app controls or display value for other controls. This control has text but without any interaction. It means that label text is not clickable.

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 "Label" 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.

Tutorial

In this tutorial, we will be using "customerOrderList" app. It is a simple app which consists of a grid and a button. The grid lists all available customer orders. The button "Number of Orders" does not have any "onClick" event because we need it only for displaying badge over it.


Here we can see the list of customer orders but there is no label specifying to whom this list represents. A new user will have to put some effort and explore about the grid entries. Our job is to make user's life easier. For this purpose we can add a label, which will label the list grid as "Customer Order List". We can also apply different color settings also to this label. Lets now add a label, select a "label" control from the control's list. Assign control id and label. We can also set default value for this label control. In this case default value property takes precedence over label property of this "label" control.

Now we have a nice label text showing what does this grid is displaying. Let just assume our user is new and he don't know how to edit a specific customer order then we can a label explaining to click edit button on specific customer order to open that order and edit it. Lets add a label for this and put as a child to our customer order list grid.

Now it is showing the user that in order to open a specific click on edit button.


description: >-
  A GridConfig can be places as a child under a grid to specify the columns.
  This is useful, when the grid is based on a SQL Statement rather than a
  config.

GridConfig


description: This control will preview a report.

Report


description: This control displays an image. In edit mode it accepts an image url.

Image


description: A date input control

DateBox

In Brixxbox, you can add date box control to input date. Date box control allows you to enter dates through different methods. User can enter a date manually in text form or user can choose date from a calendar.

Documentation

Brixxbox app configurations allows you to add different controls in your app. Date box control allows user to add dates in different formats. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

Control Type

For using Date Box control, "Date Box" control type should be selected from drop down list.

Control Version

In Brixxbox, there are 2 Versions of the Date picker available:

1: Version 1(V1) will display a HTML5 Browser build in Date Picker. This Control might look different in some browsers. 2: Version 2(V2) is a default version since since 10.8.2021. Now it will display a date picker from a library which is the same on all browsers and provides a variety of different methods to enter date.

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. For Dates, it makes sense to label them via action that is being performed plus 'date' For example, in an order application one date should be delivery date. It will represent the action of delivering the order on a specific date to customer.

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


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

Default Value

Brixxbox allows users to add a default value for a control. This value will be set as a control's value when an application containing this control is opened or a new record is created. In the background, the brixxApi function "setFieldValue" is called with this value. For Date Box Control, we can use "moment()" function. It will assign the current value of date to our control.

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 and Date box control itself will be present on bottom line. 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)

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 will be enabled. In Date Box case, user will be able to select a date. On the other hand, if "no" is selected then 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 control will not be functional while editing a previously saved record but it will be functional while creating a new record. In "Date time box" case, user will not be able to edit the value of this control f previoudded record.

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.

Input Size

With this option, Brixxbox enables users to set the input size of Date Box Control. There are four input sizes available for Date Box Control: Default, Extra Small, Small and Large.

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


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 "Date Box". In this app, we have two textboxes "first name", "last name" and a "save" button. "Save" button validates the inputs and save them, when button is pressed. Now we also want to store joining date of employees in our app. To allow this behavior we need to add a "Date Box" control.

First of all, select "Date Box" from list of controls. In second step, select the version of Date Box Control i.e. "V1" or "V2". Here we selected "V2". After this, you need to give an id to your Date Box. Next assign "Joining Date" label to your control and add "nonEmpty" validator. Now save your application. Your application should look like this:

Now I you always want current date as a value of "Joining Date" control, we can use "moment()" function as a default value for our control in general properties. It will assign the current date to new records and on creating new records, our App will look like this

The value of joining date is "08/30/2021". It shows the current date at which I am writing this tutorial. Date Box allows you to add date in text form. For example, if your employee joinied on 1st of August 2021 then you will add this in text form and in this format "mm/dd/yyyy". It will become 08/01/2021. Date Box allows you to add input in other format also. For this you need to click on calendar icon. IT will display the calendar as shown below

Button on the top left of calendar acts same as "moment()" function. By clicking it one can set current date as a date picker's value. Button on top middle of calendar is used to reset date picker's value. Cross button(X) is used to exit to calendar view. From calendar we can set year, month and day easily with mouse clicks without typing date.


HorizontalLine

HorizontalLine

Most of the controls are linked with storing and displaying information but horizontal line is purely styling control. It is used to group fields or to separate different controls. For example, separating two row controls. As the name suggests, it will be an horizontal line between controls.

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. In case of horizontal line, these properties are of less importance.

Control Type

For using grid control, click on "Add Control" and select "Horizontal line" control type from drop down list. As this most commonly used control, Brixxbox has a designated button for adding a new row. User can find this button on app editor page and on the top right corner.

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. It should be meaningful.

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.

Tutorial

In this tutorial, we will see how to use horizontal line control. this control is purely for styling. For this tutorial, we will be using "unitDemo" app. We have used this app in "unit" control tutorial also. If you want to look into details of this app please go through the "unit" documentation. Here is the link: | Row Documentation. Our app looks like this:


We have already separated controls with rows but there is no visible barrier between them. Now this is where "horizontal line" comes to help. Now we want to visually separate item id, item name and sale price, sale price test then we should put a horizontal line between them. To add horizontal line, click on controls list, select "horizontal line" control. It will be placed at the end of app tree. Drad this control and place it between two rows. Now our app will look like this:

This looks nice. Now lets also separate Unit type control from second row. We need to add another horizontal line between them. After that our app looks like this:

In this way, we can separate different group of controls visibly.


description: >-
  A form group is another structural control in Brixxbox controls. It is a
  structural element to create apps with side by side columns.

FormGroup

FormGroup

Normally Brixxbox takes the responsibility of placing control in an app. In order to group element in a row we can use row control. For a vertical alignment, you can place Controls inside the formgroup or you can also add a FormGroupRow in which you can add controls horizontally inside formgroup.

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 "FormGroup" 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. It should be meaningful.

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.

Tutorial

In this tutorial, we will see how to use formgroup control to achieve vertical grouping of controls. This control is purely for structuring controls. For this tutorial, we will be using item app. Our app has 5 controls: item id(numbox), | item name(text box), sale price(numbox), quantity(numbox), and quantity unit type(combobox). Right now, the order of controls is selected by us but the placement is selected by Brixxbox. Our app looks like this:


Now we want to present item id and item name in a vertical fashion. For that, we need formgroup. Lets add a formgroup from the controls list and add both item id and item name as its children's. Now these two controls with be placed vertically and Brixxbox will try to place other controls in horizontal fashion, wherever it finds a place. Our app now looks like this:

As we can see in the above snapshot that item id and item name controls are placed vertically and other controls are placed row wise. The yellow area corresponds to the area assigned to formgroup. If there is enough space available after formgroup, brixxbox will start placing other controls there. Now we also want to add another formgroup for all other controls. Lets add a new control of formgroup type and place remaining controls as its children:

Now we have two vertical columns of controls because we are using two formgroups. Another thing to note here is the size of each formgroup is 4/12 of complete row. I want to add another formgroup and put quantity type control in it. Why I want to do that? because I want my app to be limited to two rows:

Now compare the final version of app with start, it is more organized.


description: With a signature pad, you can add signatures to your app

SignaturePad

Use a longtext column to store the signature.


description: >-
  This is a tag control where the user can choose from a list of tags or add new
  ones.

Tag


description: The RadioButton control is one element of a radio button group.

RadioButton

Group Name

The Group Name binds different radio buttons controls. All radio buttons with the same group name will interact. E.G. switching one on will switch others of the same group off.

Unique Value

Each radio button within a group must have a unique value.

Default setting for button group

One button within a group can be marked as the default value. This will set the button initially to on.

Example

We could define radio buttons for colors. The group name could be "color" and we can set up different buttons with unique values like "red", "blue", "green", ...


description: >-
  This control is an element where you can use the phone camera to scan a
  barcode.

Scanner

This control triggers the onScan event when it scanned a barcode.


description: The file import Control allows users to upload a file.

FileImport

The control will trigger onFileImport


description: You can add your custom html code with this control

HtmlTemplate

Demo

{% embed url="https://youtu.be/NsF5qH_mz-0" %}

Take a loot at Custom HTML Templates for examples


description: >-
  A template grid is a list of records. Each record will be displayed based on
  the child templateGridElement Controls.

TemplateGrid

You can add css to this control, that works with all the templateGridElements.

Demo

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


description: >-
  This Control provides an Html Table control, where you can custom specify the
  content.

HtmlTable

Translation

If you want to translate parts of your table, like the column headers, you can use translate tags The part after the ':' in the curly brackets will be translated, like a label. This can be used in header, footer and body.

```html

```

Demo

{% embed url="https://youtu.be/NsF5qH_mz-0" %}


description: >-
  Brixxbox provides FormGroupRow control in order to place control in horizontal
  fashion inside a FormGroup

FormGroupRow

FormGroupRow

We can use this formgrouprow control to make a horizontal row of controls inside a fromgroup specifically. It serves the same purpose as of row, make horizontal row of controls.

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 "FormGroupRow" 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. It should be meaningful.

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.

Tutorial

item id(numbox),

| item name(text box),

sale price(numbox),

quantity(numbox), and

quantity unit type(combobox). We also updated our app in

"formgroup" tutorial, added the formgroups to place controls vertically, and now looks our updated app looks like this:

Now we want to place quantity and quantity unit type in a one line. For that, we can use formgrouprow. Lets add a form group row from the controls list and add it as a child to third formgroup. After that place both iquantity and quantity unit type as formgrouprow childern. Now these two controls with be placed horizontally and Brixxbox will place them in horizontal fashion. Our app looks like this:


As we can see in the above snapshot that quantity controls are placed in a horizontal line but they don't look very nice. The reason is there are cluttered with other controls. Lets use our knowledge of Horizontal Line which is a styling control. This will divide our third form group from others. Lets add this to our app:


description: A Control to display bar, line or pie charts in your app.

Chart


description: >-
  Most of the controls are linked with storing and displaying information but
  row is purely structural element. It is used to group fields.

Row

Fields in same row will be then placed next to each other where ever it is possible. This grouping is in horizontal format as the name of the control suggests itself. If there is no space in the same row, next element will be placed in the next adjacent row. There is no visible boundary of row 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 "Row" control type from drop down list. As this most commonly used control, Brixxbox has a designated button for adding a new row. User can find this button on app editor page and on the top right corner.

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. It should be meaningful.

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.

Tutorial

In this tutorial, we will see how to use row control. this control is purely structural. For this tutorial, we will be using "unitDemo" app. We have used this app in "unit" control tutorial also. If you want to look into details of this app please go through the "unit" documentation. Here is the link: | Unit Documentation. Our app looks like this:

Now we want to separate item id and item name from the other properties. This is where row comes in to place. We need to select row control from controls list and put both item id and item name as child's in this row:


Now you can see the controls in the app are rearranged. In first row, only item id and item name controls are present. All other controls are separated. Now lets say we also want to add sale price and sale price test control's to one row also. For this, select row control form "row button". It is present on top right corner, just click it and it will add row. Now put sale price controls in this row:

Now you can see the price controls are rearranged in the app.


description: >-
  This control starts the mobile camera to take a picture. For desktop browsers
  you will be able to upload a picture.

Camera

Special properties

Checkbox 'Add to attachements' - This will automatically add the Picture to the attachements of the current record

brixxApi Functions

takePicture("controlId") - Triggers the camera

Events

onPictureTaken - Fires everytime a picture is taken/uploaded.

Example usage for onPictureTaken

Print picture

javascript
    brixxApi.printBlob(brixxApi.getFieldValue("controlId"));

Add picture to image control

javascript
   brixxApi.setFieldValue("controlId image control", brixxApi.getFieldValue("controlId camera control"));

Add picture to attachements

javascript
   brixxApi.uploadAttachement(brixxApi.getFieldValue("controlId"), documentTypeId(optional), filename(optional))


DateTimeBox

DateTimeBox

In Brixxbox, you can add date time box control to input date with timestamp. Date time box control is similar to Date Time Box control in Brixxbox, it also allows users to add date's with an addition of time stamp. User can select date and time from calendar view.

Documentation

Brixxbox app configurations allows you to add different controls in your app. Date time box control allows user to add dates plus time. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

Control Type

For using Date Time Box control, "Date Time 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.

Label

It is the display value for control. For Dates and time control, it makes sense to label them via action that is being performed plus 'time' For example, in an employee information application one date should be arrival time which store date plus time everyday.

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

Brixxbox allows users to add a default value for a control. This value will be set as a control's value when an application containing this control is opened or a new record is created. In the background, the brixxApi function "setFieldValue" is called with this value. For Date Time Box Control, we can use "moment()" function. It will assign the current value of date to our control.

Date and Time Box Properties

Precision

This property allows users to select timestamp precision. It has two options: minutes and seconds. By default minutes is selected.

Save UTC and show local time


Save UTC and show local time

This is checkbox option. If this Checkbox is selected. The control will display date and time in local time zone of user but the orgnal value behind the control is utc timestamp. Brixxbox "setFieldValue" function will assume you set a utc time and will add the local timezone just for the display. Brixxbox "getFieldValue " function will give you the utc time as well. So users in different timezones will see different values, but in the database there is just the utc time stored.

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 . Control's label will be present on the top line and Date time box control itself will be present on bottom line. 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)

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)


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 Date Time Box case, user will be able to select a date and time. On the other hand, if "no" is selected then 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 control will not be functional while editing a previously saved record but it will be functional while creating a new record.

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.

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


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 "Date Time Box". In this app, we have two textboxes "first name", "last name" and a "save" button. "Save" button validates the inputs and save them, when button is pressed. Now we also want to store arrival datetime of employees in our app. To allow this behavior we need to add a "Date Time Box" control.

First of all, select "Date Time Box" from list of controls. After this, you need to give an id to your Date Time Box. Next assign "Arrival Time" label to your control and add "nonEmpty" validator. Now save your application. Your application should look like this:

Now if you always want current date as a value of "Arrival Time" control, we can use "moment()" function as a default value for our control, in general properties. It will assign the current date time to new records and on creating new records, our App will look like this

The value of Arrival Time is "08/31/2021 4:05 PM". It shows the current date and time at which I am writing this tutorial. Date Time Box allows you to add date time in calendar format. For this you need to click on calendar icon. It will display the calendar as shown below

Button on the top left of calendar acts same as "moment()" function. By clicking it one can set current date and time as a control's value. Button on top middle of calendar is used to reset date picker's value. Cross button(X) is used to exit to calendar view. From calendar we can set year, month, day and time easily with mouse clicks without typing date and time.


description: >-
  This Brixxbox control is similar to textbox control. Thedifference is that it
  is resize able multiline text box.

MultilineTextBox

It does not provides any formatting features. In Brixxbox, if you need formatting then you should use WysiwygText (What you see is what you get).

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

There is an additional property type for multilinetextbox. They are related to maximum and minimum height a multilinetextbox can adapt to.

Multiple Line Text Input Properties

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 "mulitLineTextBox" 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. It should be meaningful.

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.

Multiple Line Text Input Properties

Minimum height

It is a drop down list. It is selected in the form of lines. Its value ranges from 2 to 15 lines or no minimum height.

Maximum height.

It is a drop down list. It is selected in the form of lines. Its value ranges from 2 to 15 lines or no maximum height.

Initially adjust height to content

If its value is checked then whatever the height of initial data present will also become the height of Multi line text input.


Initially adjust height to content

If its value is checked then whatever the height of initial data present will also become the height of Multi line text input.

Tutorial

item id(numbox),

| item name(text box),

sale price(numbox),

quantity(numbox), and

quantity unit type(combobox). These five controls are placed in three different groupbox controls: item details, Quantity Details, and Sales Details. If you want to dig deeper in this app. Please go through

group box documentation. Our app at start looks like this:

Now we want to add item description in our app. This description can be very long so we do not want to use text box. For this purpose, we will use multilinetextinput. In the above snapshot, user can also notice that all other controls are in groupbox containers so lets also add a new groupbox control named "Item Description" and add a new multilinetextinput control and place it inside item description groupbox control.

Here you can see multi line text input control. Interesting thing is you can change size of this control both in editor mode and in app mode. If you check "Initially adjust height to content" property then whenever this app gets initialized and data is being loaded from a data source, it will take the height of the text present in it.


description: This is a control, that lets you enter html formatted text

WysiwygText


description: Allows user to enter a time of day (not a timespan).

TimeBox


description: The unit control allows you to show a unit from a data source

Unit

Brixxbox allows you to have a unit property for each numeric box control. It is a character based property. User can set any character and it will be displayed as a unit with this numeric control. The is one way of assigning unit to a control. Brixxbox also provides it users with a unit control. The only purpose of this control is to load unit from a data source In this way, Brixxbox allow users to store numeric quantities with their units also. For example, this control can be placed as a child control to a numbox 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 "Unit" 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.

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.

Tutorial

In this tutorial, we will be using "unitDemo" app. This is very simple app. It's purpose is to elaborate different ways to set unit of different controls. In this app, we have two controls and both of them are numeric. The first field is Item Id, it will be used to store id's of items and second field will be used to store the price of corresponding item. Our app looks like this


As you can see our "Sales Price" is numeric but we do not have any unit with it. Brixxbox provides us with unit property with some controls like "numbox". In this property we can assign any character to make it a unit of specific control. Now, we need to open "Sales Price" properties and update unit to "Euro" and then save the app. Now we can see in the app editor that on left side of "Sale Price" numbox Euro symbol is being displayed.

This is a nice way to assign unit to a specific control but this is control specific and we do not store in our database. Lets assume we want a unit app so that we list all the units available in our database. This can be done in two steps. First, we need to add an "unit" app which stores the names of all the units in it.

It simply stores the names of units we want in our app. Lets quickly add three units in it: Pc for piece, $ for Us Dollar, and â¬ for Euro currency. In second step, we need to add a combobox named "Unit Type" and assign our unit app as its "sub data source" with id, and unit name as combo box key and field values.

Now as you can see from above snapshot, our unitDemo app has a combo box and now we are also seeing all available units which are present in our unit app because we have made unit app, our combobox sub data source. This is another way to display unit next to numeric field. We have already discussed combobox in our tutorial for combobox. If you you need any help for combobox, please visit this combobox documentation link ComboBox Control Documentation.

Now we proceed to our third way of presenting unit with numeric control. Here "unit" control comes into play. Let suppose we want display the price of item in another control. This can be a different app also but for the sake of simplicity we will add new numeric control in same app. We also make new control, lets call it "sale price test", read only. We want a simple functionality that as soon as the value of "sale price" changes, it will reflect on "sale price test" control also. We can add onChange event on "sale price". This event on value change will get "sale price" value and set it as the value of "sale price test".


Now we also want a unit for this control. For this we need to a unit control in our app and make it a child control of our "sale price test" control. We also need to assign a data source to our unit control. Lets add our "unit app" as a data source. This data source will allow it to query and get a specific data from data source.Our app looks like this

Now we can see that our "Sale Price Test" has a box for unit but it is empty. The reason behind this is that we need to add query to get specific unit from data source. Lets assume we want same unit as selected in our unit type combobox. The query is

Now when we change the value of unit in our unit type combobox, this change also gets reflected in our sale price test unit.


WidgetContainer

A Widget container is container that can host multiple widgets just like tabcontrol hosts multiple tabs in Brixxbox controls. It is used as a parent to widgets. It is a structural control. User can use it to place and group widgets inside it also.

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 "Widget Container" 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. It should be meaningful.

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.

Tutorial

In this tutorial, we will see how widget container can group different containers. This control is purely used for structuring controls. For this tutorial, we will be using item app. Our app has 4 controls: item id(numbox), | item name(text box), , sale price(numbox), and quantity(numbox). Our app looks like this:

Now we need to add to widgets. Add widget controls from controls list and add label "Item Ids", and "Item Details" to them. Our app looks like this now:

\
In above snapshot we can see that two widgets item ids and item details are placed side by side in a horizontal fashion and also the controls inside widgets themselves are in horizontally distributed. Widget container can help us organizing our controls in better way by adding extra hierarchy level to them.


description: >-
  A Widget is another structural control in Brixxbox controls. It is used to
  group controls.

Widget

It is a structural control like groupbox. For a vertical alignment, you can use formgroup, groupbox. Widget is the advanced form of formgroup. User can use it inside a WidgetContainer also. Like groupBox, it also has a header and a border.

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 "Widget" 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. It should be meaningful.

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.

Tutorial

In this tutorial, we will see what a widget is and how to use it to achieve vertical grouping of controls. This control is purely used for structuring controls. For this tutorial, we will be using item app. Our app has 2 controls: item id(numbox), | item name(text box). Our app looks like this:

Now lets see what an empty widget look like. Add a widget control from controls list and add label "Item details" to it:

\
It is exactly similar to groupbox. In empty condition it has a label and a visible boundary. Now we want to group item id and item name. For that, we need add both item id and item name inside widget. Now these two controls with be placed inside it and if there are other controls present, Brixxbox will try to place other controls in horizontal fashion, wherever it finds a place. Our app now looks like this:


As we can see in the above snapshot that item id and item name controls are placed inside widget and widget containing them has a clear boundary and a header.


WedgeScanner

Reads scanns from a wedge barcode scanner and will trigger the OnScan event.

The minimum length for a scan result (including prefix and suffix chars) is 5 characters. That means: A scanner with prefix and suffix chars of '#' can scan a barcode, that is at least 3 characters long. A scanner without a prefix and suffix char will scan a barcode that is 5 or more characters long. In case you need to scan a shorter barcode, you need to add prefix or suffix characters in your scanner settings


description: >-
  Placed as a child unter templateGrid, provides templateGridElement the html
  code to render the record

TemplateGridElement

If there are more than 1 templateGridElement und a templateGrid. The user can choose the displayed version.

Demo

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


Tips and Tricks


Date and Time


description: >-
  brixxbox includes the following client side libraries to deal with date, time
  and durations and calculations in that area.

The moment.js Library

moment.js

javascript
   //format a date
   var myMoment = moment(app.getFieldValue("myDateField"));
   console.log(myMoment.format("lll")); //Jul 13, 2020 1:02 PM

moment duration format

javascript
   //simple format a duration
   moment.duration(123, "minutes").format(); //2:03:00

javascript
   //how old is the value in myDateField
   var myDuration = moment().diff(moment(app.getFieldValue("myDateField")), "seconds");
   moment.duration(myDuration, "seconds").format();


description: >-
  The event occurs when a grid row is clicked. You can get more information
  where exactly the user has clicked.

onRowClick

javascript
    let rowElement = app.getFieldValue("myGrid.clickedRow"); //The html Row element (a tr)
    let cellElement = app.getFieldValue("myGrid.clickedCell"); //The html Cell element (a td)
    let cellId = app.getFieldValue("myGrid.clickedCellId"); //column id of the clicked cell (e.g. "adrFirstName")


onReturnFromModal

The event occurs when a modal child app is closed. This is a good opportunity to refresh some data because the child app might have modified it. Remember: Grids are refreshed automatically if you return from a modal app. The closed app object is available under eventArgs.details in the even source code- But be aware, that this app is closed. You can access properties liek appName but you might not use saveConfigRecord or such methods on the closed app.

```javascript
   app.refreshDatasource("orderQuantity");

console.log("The app: ${eventArgs.details.appName} was closed");
```


description: >-
  Scope: grid The event is triggered when the selection of grid lines change.
  When a line is selected or deselected.

onRowSelectionChanged

javascript
//Enable a button if exactly 1 line is selected
let selectedRows = app.getFieldValue("myGrid.selectedRows");
app.setEnable("myButton", selectedRows.length === 1);


description: The event occurs when the right sidebar for attachments gets closed

onAttachmentsHide

javascript
   console.log("An attachment sidebar closed");


description: >-
  The event occurs right before a record is deleted. By returning false, the
  following delete operation is canceled

onRecordDelete

javascript
   console.log("deleting a record");
   if(a != b){
       return false; //cancel the delete
   }


description: >-
  The event occurs when a key is released. You can access the event information,
  using the event parameter.

onKeyUp

Further information about key events

javascript
   console.log(event);
/*
event.type
event.target
event.which
event.altKey
event.keyCode
event.shiftKey
event.ctrlKey
*/


OnCheckPermissions

OnCheckPermissions

The event occurs once after OnAppInitialized, when a possible record, that came as a parameter is loaded. You can put your code, where you check all your permission changes here, and trigger this event in OnChange events manually if you need to.

javascript
    console.log("app is started, initialized, and a record may be loaded");


onFileImport

The event occurs when an file was selected on a fileImport control. The import function will detect if the file is using a comma or a semicolon as separator. Brixxbox will therefore count the occurrences of commas and semicolons in the first line (Header) and will use the higher counted char as separator.

You can access eventArgs.details inside this event to get the file content and meta data:

eventArgs.details.csvLines - Array of all lines splitted by csv rules

eventArgs.details.lines - Array of all lines splitted by csv rules

eventArgs.details.fileExtension - extension of the import file ("csv" for example)

eventArgs.details.fileExtensionLower - extension of the import file in lowercase

eventArgs.details.fileInfo - a javascript file info object

eventArgs.details.fileName - the file name

eventArgs.details.fileNameLower - the file name in lowercase

eventArgs.details.fileNameFull - the file name with extension

eventArgs.details.fileNameFullLower - the file name with extension in lowercase

eventArgs.details.rawData - the whole file content as a single text

eventArgs.details.rawLines - an array of all the lines. Use this if you want to split the lines following your own rules

javascript
for(let i = 0; i < eventArgs.details.lines.length; i++){
    console(`This is line ${i} with name: ${eventArgs.details.lines[i].myNameField}`);
}


description: >-
  The event occurs when a grid control displays a row. RowCreated does not mean
  that a database record is created.

onRowCreated

The are a couple of special objects you coul use in this event type:

eventArgs.details.row - this is the new row as a html element.

eventArgs.details.data- this is the record used for this row

eventArgs.details.index- this is the index of the row in the entire grid

```javascript
   if(eventArgs.details.data.cordlnShippedQuantity >= eventArgs.details.data.cordlnOrderQuantity){
       $(eventArgs.details.row).addClass("success");
   }

if(eventArgs.details.data.cordlnOrderQuantity - eventArgs.details.data.cordlnShippedQuantity > eventArgs.details.data.cordlnStockQuantity){
       $(eventArgs.details.row).addClass("warning");
   }
```


description: >-
  The event occurs right before a record is saved. By returning false, the
  following save operation is canceled

onRecordSave

javascript
   console.log("saving a record");
   if(a != b){
       return false; //cancel the save operation
   }


onPictureTaken

Event that gets fired, when a camera control has taken a new picture

Example usage for onPictureTaken

Print picture

javascript
    brixxApi.printBlob(brixxApi.getFieldValue("controlId"));

Add picture to image control

javascript
   brixxApi.setFieldValue("controlId image control", brixxApi.getFieldValue("controlId camera control"));

Add picture to attachements

javascript
   brixxApi.uploadAttachement(brixxApi.getFieldValue("controlId"), documentTypeId(opt


description: The event occurs on app level as well as on a grid control.

onRecordNew

App Level

On app level, this event is mostly used to initialize certain fields.

Grid Control

eventArgs.details gives you the startBrixxbox parameters befor the brixxbox for the new record is started. You could add additional values to the start object or change the app to use.

javascript
   eventArgs.details.additionalValues.sesTrackId = app.getFieldValue("eveTrack");
   eventArgs.details.additionalValues.sesTrackConfigId = app.getFieldValue("eveTrackConfig");


description: >-
  The scan events gets triggered when a barcode (or 2D code) is scanned, e.g. by
  using the wedgeScanner control. You can then ask the control for the scanned
  code.

onScan

Simple Example

javascript
    console.log("The scanned code is: " app.getFieldValue("myScannerControlId"));

Example using the GS1 Splitter business function

javascript
let result = await brixxApi.businessBrixx({
     functionName:"Gs1Splitter",
     methodName: "Split",
     gs1Code: brixxApi.getFieldValue("myScannerControlId")
 });
 console.log(result)


description: The event occurs when a control is clicked.

onClick

javascript
   console.log("Hello:" + app.getFieldValue("adrName"));


onKeyDown

Further information about key events

javascript
   console.log(event);
/*
event.type
event.target
event.which
event.altKey
event.keyCode
event.shiftKey
event.ctrlKey
*/


description: >-
  This event is called when a subDataSource is requested. You can return the
  data here instead of fetching it from the server automatically

onSubDataRequest

Example Usages

javascript
return [
    {
        id: 1,
        name: "Germany"
    },
    {
        id: 2,
        name: "Netherlands"
    },
    {
        id: 3,
        name: "Poland"
    },
]

Example Usages 2

javascript
return [
    (app.loadConfigRecordById("item", 1)).data,
    (app.loadConfigRecordById("item", 2)).data,
    (app.loadConfigRecordById("item", 3)).data,
]

Example Usages 3

javascript
return [
    {
        id:1,
        itmName: "lorem",
        itmPrice: 1.23,
        itmReleaseDate: moment().add(1, "days").toISOString(),
        itmDescription: "some Text",
    },
    {
        id:2,
        itmName: "ipsum",
        itmPrice: 4.56,
        itmReleaseDate: moment().add(5, "days").toISOString(),
        itmDescription: "some more Text",
    }
];


description: This event is called just before the mail history panel open.

onMailHistoryShow

Example Usages

javascript
   console.log("mail history panel opened");


description: >-
  The event occurs right before a record is loaded. By returning false, the
  following load operation is canceled

onRecordLoad

javascript
   console.log("loading a record");
   if(a != b){
       return false; //cancel the load
   }


description: >-
  The event occurs when a grid cell is clicked. You can get more information
  where exactly the user has clicked.

onCellClick

javascript
    let rowElement = app.getFieldValue("myGrid.clickedRow"); //The html Row element (a tr)
    let cellElement = app.getFieldValue("myGrid.clickedCell"); //The html Cell element (a td)
    let cellId = app.getFieldValue("myGrid.clickedCellId"); //column id of the clicked cell (e.g. "adrFirstName")


description: >-
  The event occurs when a record is saved. You might want to do some additional
  tasks in that case.

onRecordSaved

javascript
   console.log("Record saved");


description: The event can be used to transform a datasource line.

onDataTransform

This function is often used to transform a calender event object. Called once pre received record. Must return a calender event.

Example 1

Modifiy an existing record, to keep all the information but add new properties for the event

javascript
eventArgs.details.title = eventArgs.details.terTitle;
eventArgs.details.description = eventArgs.details.terLongText; //This will be the tooltip text
eventArgs.details.start = eventArgs.details.terStart;
eventArgs.details.end = eventArgs.details.terEnd;
return eventArgs.details;

Example 2

Create a new record.

javascript
return {
    start: eventArgs.details.terStart
    end: eventArgs.details.terEnd
    title: eventArgs.details.terTitle
}


description: >-
  The event occurs when an app is started but before a record is loaded and the
  OnAppInitialized event is fired. Default Values are set at this point.

onAppStart

javascript
    console.log("app is started and initialized");


description: >-
  The event occurs after a record is loaded and displayed. You could do some
  updates or refreshes at this point.

onRecordLoaded

javascript
    console.log(`record ${app.recordId} successfully loaded`);
    console.log(app.record); //you can access the record json object here


description: >-
  The event occurs when a control content is changed. You can use
  app.isLoadingRecord if you need to know if a record is loading and that is the
  reason for the change event.

onChange

javascript
   console.log("Change detected");
   if(app.isLoadingRecord){
      console.log("The app is displaying a record and that triggered the event");
   }


description: >-
  This event is called just before the attachments panel open. Can be used to
  set the config and id of the attachments you want to show. This is an App wide
  event!

onAttachmentsShow

Example Usages

javascript
   app.attachmentRecordId = app.getFieldValue("addressId");
   app.attachmentAppName = "address";


onChildAppClosed

This event is called when a child app of you current app is closed. The closed app object is available under eventArgs.details in the even source code- But be aware, that this app is closed. You can access properties liek appName but you might not use saveConfigRecord or such methods on the closed app.

Example Usages

```javascript
   app.refreshDatasource("orderQuantity");

console.log("The app: ${eventArgs.details.appName} was closed");
```


description: >-
  The event occurs when a key is pressed. You can access the event information,
  using the event parameter.

onKeyPress

Further information about key events

javascript
   console.log(event);
/*
event.type
event.target
event.which
event.altKey
event.keyCode
event.shiftKey
event.ctrlKey
*/


description: >-
  The event occurs the user moves or modifies an event.
  getFieldValue('controlId.changedEvent') or eventArgs.details can be used to
  determin the changed event

onEventChange

You can get mor information about the effects:

the event before the change: getFieldValue('myCalendarControl.oldEvent')

other events that got affected: getFieldValue('myCalendarControl.relatedEvents')

You can call cancelCalendarChanges to cancel all the changes

javascript
let eventObj = app.getFieldValue("myCal.changedEvent");
let record = app.loadConfigRecordById("appointment", eventObj.id);
record.data.aStart = eventObj.start;
record.data.aEnd = eventObj.end;
app.saveConfigRecord("appointment", record);


description: >-
  The event occurs the user clicks on one of the events.
  getFieldValue('controlId.changedEvent') or eventArgs.details can be used to
  determin the clicked event

onEventClick

javascript
app.startBrixxbox({
      appName: "appointmentDetails",
      id: eventArgs.details.id, //eventArgs.details provides the clicked event object
      startMode: "modal"
   });

Google Calendar

Here are some usecases for event clicks you might find helpful. In Case you are using a google calendar, you could open the calendar event in a new window.

javascript
    window.open(eventArgs.details.url, '_blank', 'width=700,height=600'); //this is our custom operation. we will open the event in a new window.

Or you can return false at the end of the event source code, which means, that you did not handle the event by yourself and there for to execute the default behavior.


description: >-
  The event occurs when a user deletes an attachment from the right sidebar. The
  delete attachment function does not trigger the event.

onAttachmentDeleted

javascript
   console.log("An attachment was deleted");


description: >-
  The event occurs when a tab page comes to the visible state. You might want to
  refresh some data here.

onTabShown

javascript
   console.log("The tab is visible");


Events


description: >-
  Scope: grid, app wide The event occurs when a record is deleted. The ids of
  the deleted records are passed as an array in eventArgs.details for example:
  ["1", "5", "10007"]

onRecordDeleted

javascript
   console.log('Deleted records: ' + eventArgs.details);

\
Another example to iterate over the deleted record ids:

javascript
   for(let i = 0; i < eventArgs.details.length; i++){
       console.log("Deleted id: " + eventArgs.details[i]);
   }


description: >-
  The event is triggered when a empty time period is selected by the user. You
  can use this to create a new calendar event

onTimeSelected

javascript
app.startBrixxbox({
      appName: "termin",
      startMode: "modal",
      additionalValues: {
         terStart: eventArgs.details.startStr,
         terEnd: eventArgs.details.endStr,
      },
   });


description: >-
  The event occurs when an app is initialized. The OnAppStarted event is
  processed at this point. If a record id was given as a start parameter, the
  record is loaded and displayed at this time.

onAppInitialized

javascript
    console.log("app is initlialized");


description: The event occurs when an app closes from a modal state.

onModalClose

javascript
   console.log("app closed")


Accordion

Accordion

This is kind of a "Tab control", we can use it to host tab pages. For each "TabPage", it will create a separate expandable and collapsible region. User will be able to show and hide the controls of "Tab pages" by expanding and collapsing its region. You can use TabPages inside the "Accordion" like in a "Tabcontrol". The difference between "Accordian" and "Tab Control" is the later organizes "Tab Pages" label's on its first row. All Tab pages are accessable from this row while "Accordion" stacks each sibling Tab page one on another. Also these Tab pages are expandable and collapsible regions.

Documentation

Brixxbox app configurations allows you to add different controls in your app. "Accordion" is used as a container for multiple Tab pages. By default, all Tab pages will be collapsed. It behaves similar to "Tab control" which means from all sibling Tab pages only one will be in expandable form and other will be in collapsed form. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

Control Type

For using this control, "Accordion" control type should be selected from drop down list. Multiple Tab page's which are placed on same level of inheritance inside a "Accordion" are known as sibling Tab pages.

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. For "Accordion", this property is not important.

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.

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. It has no effect in "Accordion" because "Accordion" itself is not expecting any kind of input.

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

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 all sibling tab pages inside it, will be hidden.

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.

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 "Accordion. 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. At start, our app looks like this:

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 are siblings now. In the last step, add new "Accordion" and make our tab page its child


We have successfully created a tab page and placed it inside the "Accordion". We can click on arrow (right side - top) to show and hide contents of tab page.


TabPage

TabPage

In Brixxbox, a "tab page" is used as a content container. We can use it inside "Tabcontrol". A "TabControl" can contain multiple "TabPages". Each "TabControl" can have any number of controls. One important thing to note here is "TabPage" does not have size properties because in Brixxbox, we use "TabPages" within "TabControl" and they inherit their parent's size properties. The label of each "TabPage" is placed side by side on the top row of "Tabcontrol". By clicking on respective "Tab Control" label, user can access or navigate between different "Tab Pages".

Documentation

Brixxbox app configurations allows you to add different controls in your app. "Tab Page" is used as a container for multiple controls. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

Control Type

For using this control, "TabPage" control type should be selected from drop down list. It should be placed as a child to "TabControl". Multiple Tab page's which are placed on same level of inheritance inside a "Tab Control" are called sibling Tab pages.

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. For "Tab Page", this property becomes very important. This property is used to recognize content of a tab page. It is recommended to use meaningful labels for a Tab page. For example, if we have an orders app, we can place orders contents in one tab page labeling it as order contents etc.

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.

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. It has no effect in "Tab Page" because "Tab Page" itself is not expecting any kind of input.

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

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 this specific tab page will be hidden.

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.

Tutorial


Tutorial

This tutorial assumes that a user has an existing app. In this app, we have two textboxes "first name", "last name", Date Time Box control as "Arrival time", and a "save" button. We use this app to store some information like first name, last name, and arrival date time about our employee. "Save" button validates the inputs and save them, when button is clicked. Now we also want to split personal information (first and last name) and other details (Arrival time) and display them on different pages so that To allow this behavior we need to add two "Tab Pages" to store this information. Add both Tab pages one by one from the drop down list and label them "Personal Details" and "Other Details". Now put "First Name" and "Second Name" text box as a child in "Personal Details" Tab Page. We need to put "Arrival time" Date and Time Box and "Save" button in "Other details" Tab page. Now save the app and lets look at how our application looks now.

We can see from above figure that we have Tab pages with their respective controls, sound okay but wait a minute! on the right sight of the picture we see nothing. It is showing the our Tab pages are not being shown. The reason is that Tab pages can not be used stand alone. They have to be used inside a "Tab Control" or "Accordion". Lets now add them one by one and analyze changes. Firstly, add a "Tab Control" and makes our two tab pages siblings, inside it. Now save app. App structure will look like this now:

Now let see how our App looks like:

On the left side, we have selected "Personal Details" Tap page while on right side, we have "Other Details" tab page. We can only select one tab page at a time. We are almost done. As you see in above picture, there is a horizontal line passing through "First Name" control on left side and from "Arrival Time" on right side. It does not look beautiful. Now let get rid of it. To overcome this we have to use "Row" control. Lets add a row control and analyze App structure and App view.


On the left side, we can see that we added "Row" control as a child of Tab pages and this row acts as a parent of other controls. On the right side we see that there is no line our controls are present in a container. Beautiful!

Let's see, how our Tab pages will look like when placed inside "Accordion" instead of "Tab Control". Add an "Accordion" in place of "Tab Control" in our app and everything else remains the same:

From above figure, we can see our tab pages but only their names are visible. What happened here? Ahh, remember that "Accordion" control makes our tab pages expandable and compressible. By default they are in compressed form. Now lets expand "Personal Details"

Now we can see the contents of Personal Details Tab Page. If you want to know about "Tab Control" or "Accordion", please have a look at their documentation also.