Alternative View Name

All Apps with an underlying master table will create a view bbv_{AppName} if you want an additional view with a special name, you can specify that here. The bbv_* view will be created in all cases.

Attachments

When enabled, users can add files to the records of this app.

App Color

You can choose a color theme for your app. This will be used in the single page tab headers for example.

AppConfigToStartName

Place the id of an app config here to embed

AppConfigToStartTargetField

The field in the child app that should get the Source Field Value

App Icon

you can choose an app icon, that will be displayed in the single page tab headers, for example.

Email History

When enabled, this app gets a new toolbar button for the email history sidebar. This sidebar will show emails regarding the actual record.

Master Table

You can define the underlying table for your app, if it stores data. You can also create a new table.

This setting controls whether the captured image should be saved directly as an attachment to the current record.

App Preview Record Id

This is just a convenient way of loading a record at design time. It is specially useful, if you need a record to be loaded when designing your app, because some fields might be invisible when no record is loaded. This has absolutely no effect outside the app designer.

Here you can select a document type for the attachment.

User defined file name for the attachment. This can be extended with values from fields of the current application. This is achieved with @controlId at any position of the text.

A user defined file name is always extended by the current timestamp.

AutoDisableOnEdit

This will disable a field, if a record id is set. In other words, the field is enable in create mode but disabled in edit mode

BlockInputDuringEventExecution

if set, the brixxbox will block all user actions until the event has finished

CascadeCopy

If this property is set, a copy Operation in the app, that contains this Grid Control, will copy all Lines in the Grid for that Record. Say you want to copy an order record with all its orderlines.

AppConfigToStartSourceField

The field that should be submitted to the child app

Cascade Delete

If this property is set, a delete Operation in the app, that contains this Grid Control, will delete all Lines in the Grid for that Record. Say you want to delete an order record with all its orderlines.

ChartData

Thsi is a simple form to configure the chart. Just list the Columns of the sub datasource you want as lines (or bars, depending on your chart type). The lines will be rendered with default behavior and random colors.

App Prefix

Just like table prefixed, you could specify a prefix for all your controls in your app. Opposite to tables, this prefix is not mandatory

History

This will activate the audit trail record history in the toolbar.

You will have to create the audit history for your mastertable in the table editor first.

ChartDataJson

This is a more complex method to configure the chart than chartData but offers a lot more possibilities.

See a List of properties, you can set per line, or bar:

[{
    "data": "OverallPrice", //the column to take for the line values from the sub dataset
    "color": "red", //line color
    "fill": "false" //do not fill the gap to the bottom line
},
{
    "data": "OwnPrice", //the column to take for the line values from the sub dataset
    "color": "blue",
    "backgroundColor": "yellow", //background color for the gap or the bar, in case of a bar chart
    "fill": "0" //means you fill the gab to the first (0) line. 
}]

ChartLabel

The column from the sub data source for the Chart label

Title

This title will be translated and it can contain variables from four loaded record, that will be replaced in the title, once a record is loaded.

We used a @prefix in the past, that is deprecated.

   Order {id} {cordAddressId.adrName}

This will result in: Order 1 John Doe

if no '{' character is found in the title, brixxbox will add an {id} to your title to display the loaded record id.

If no app title is specified, the app id will be displayed for your app.

ComboBoxEditButton

This setting determines if a Combobox has a Edit Button next to it, to jump right to the selected record.

Chart Label for X Axes

This is a text, that will be used to label the chart x Axis

ComboBoxListButton

This setting determines if a Combobox has a List Button next to it, to select the value from a List instead of the Combobox itself. The List provides more features for filtering and searching than a Combobox . The selected Value from the list will be set in the Combobox on selection.

ComboboxKey

This is a fieldid from the sub data source that will represent the value of the combobox. In most cases this is "id"

ChartType

Choose from different chart types

Combobox Value

This defines what will be displayed in the combobox. It can be a single column from the sub data source or a string with placeholders

   adrName

   {id} - {adrName}, {adrFirstName}

CssTemplateContent

The css Content for the control

DateTimeBox UTC

If this Checkbox is activated. You will see the Date time in you local timezone but the value behind the control is a utc (GMT) time. setFieldValue will assume you set a utc time and will add the local timezone just for the display. getFieldValue 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.

DecimalDigits

Set the number of decimal digits here

This value is set when the app is opened or a new record is created. In the background, the brixxApi function setFieldValue is called with this value.

Example 1

Example 2

Example 3

Develop Mode

If the develop mode flag is set, this Version of the app will no be delivered to endusers. They will get the latest, non dev mode version.

GridAutoRefreshIntervals

You can provide a comma separated list of values for seconds. For each value the user will have the option to select it as an auto refresh value for reloading the grid content. Values above 59 seconds will be rounded and shown as minutes.

e.g. A list like "30, 60, 900" will generate a drop down menu with options like "30 seconds, 1 minute, 15 minutes".

DisableGridResponsiveness

This will disable the responsive layout of the grid and you will be able to scroll horizontally

You can specify the unit character here ($, € ans so on)

GridColumnOrder

A comma separated list of column, that should be displayed as the left most columns.

GridColumnFilter

You can create filter in all grid columns. You need to specify the column name and the type of filter you would like for this column.

The following types are available:

• text: Will show a text input field for the search criteria.

• select: A selection for all available options is shown.

• multiSelect: like select-option. It is possible to select multiple entries.

[
   {
       "column":"imImei",
       "filterType":"text"
   }, 
   {
        "column":"imItemId",
        "filterType":"select"
   },
   {
        "column":"imItemGroup",
        "filterType":"multiSelect"
   }
]

If the grid is configured for Server Side Paging additional options are available.

• serverSideMinInputLength: Allows to set a minimum character count for user input, before the search is triggered.

• serverSideSQLStatement : If the filter option is set to select/multislect a SQL statement can be used to show the available options. For config based grids this is optional (A distinct value for the column will be generated by default). For SQL based grids this setting must be provided. The setting needs to have the name of a valid SQL Statement defined in this app.

The SQL statement must return a list consisting of 2 columns: id and text. The id value will be used as the search criteria. The text value will be shown to the user as option. The parameter “columnSerachValue” will contain the current user input.

Example of a valid SQL statement:

DECLARE @searchLike nvarchar(100) = '%' + @columnSearchValue + '%';
SELECT * FROM (
        SELECT 'id1' AS id, 'text1' AS text UNION ALL
        SELECT 'id2' AS id, 'text2' AS text UNION ALL
        SELECT 'id3' AS id, 'text3' AS text UNION ALL
        SELECT 'id4' AS id, 'text4' AS text UNION ALL
        SELECT 'id5' AS id, 'text5' AS text 
        ) AS ResultList
        WHERE text LIKE @searchLike

For columns with date controls (DateBox and DateTimeBox) a date range selection will be provided. The range selection enables the user to set a start and end date. Additionally the brixxApi call 'gridColumnConfig' enables setting of predefined selection ranges. Those ranges can be picked by the user without the need to use the calendar. This way commenly used selctions can be predefined for each individual grid column, if applicable. Example setup for predefined selections (Note: The The moment.js Library is used to set start and end dates):

//Code should be placed as event "onAppStart"

//each entry within 'range' must have an array. First element is start date for
//selection and second the end date. The third array element is an optional string.
//If provided it will show up as tooltip for the selection.
const predefinedSelections = {'range':
    { 'Today': [moment(), moment()], 
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 10 days': [moment().subtract(9, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      '2 years back': [moment().subtract(2, 'years'), 
                      moment().subtract(2, 'years').add(1, 'months'), 
                      '2 years back as start and 1 year and 11 month as end of selection']
     } 
};

brixxApi.gridColumnConfig ('gridName', 'columnName', predefinedSelections);

GridInlineEdit

Grid inline editing is not available at the moment

This allows you to set a list of combobox columns, that will not have a hyperlink, like the usual combobox column would have

GridCellEdit

A grid column can be made editable. This will enable clicking the cell content (or the first part of the cell for empty columns). Note: An editable column will be marked with a pencil symbol in the header.

The following settings are available:

• modus: either "inline" or "popup". A value of "default" or omitted entry will automatically choose an appropriate setting for the columns control type. So most of the time there is no need for an individual setting.

• autosave: Setting can be "on" or "off". "on" is the default.

[
   {
       "column":"myCol1",
       "modus":"default",
       "autosave":"on"
   }, 
   {
       "column":"myCol2",
       "modus":"popup",
       "autosave":"off"
   }
]

Changing the cells value will trigger the event "onCellEdit". If the value "false" is returned from this event no data will be saved.

For the event the following data will be provided:

{
    "cellPosition": {
        "row": 1,
        "column": 1
    },
    "colName": "myColName",
    "id": "1",
    "inputValue": "SomeInput",
    "data": {
        "1": {
            "myColName": "SomeInput"
        }
    }
}

GridSelectMode

Choose the select mode

GridToolbarVisibility

Set the visibility for the toolbar right above the grid

GridPageSizeVisibility

Set if the page size should be choose able for users

Here you can set a fixed height for the grid. The specification is in percent of the complete screen height.

Hidden Columns

This is a comma separated list of control, that you want to hide in this grid control.

   myControl1, myControl2

Help Text

You can set a help text, to display below a field.

hideSelectCheckboxColumn

Set this if you want the select checkbox column to disappear.

HtmlTemplateContent

The html Content for the control

Html Table Classes

Possible classes

1. • table-bordered

   • table-striped

   • table-hoover

   • table-condensed

   • table-responsive

Disable Pagination

If checked, there will be no pagination for the HTML table.

Be careful with the amount of data!

This is the Label, that is displayed for this control. The Label is translated automatically but you can set your manual translation in the translation Tab.

All Labels must be in the Workspace Default Language (english if not set differently in the workspace settings)

The controlId is an essential part of a brixxbox Control. Every Control needs a unique (in its App) Id. All new controls get a generated Id (starting with an underscore). The generated Id is changeable but once you give your control a custom Id, this will be unchangeable afterwards. The generated Id should never be used to reference the control. If you need to do something with the control (like hide it, get or set a value), you need to give it a readable Id.

A Control is always addressed with its controlId.

Control Ids should start with a lowercase (often with a mandatory prefix, that has been set in the app) and can contain, Numbers, upper and lowercase letters and underscores.

Check this option, if you do not want up/down arrows next to the number input.

If this checkbox is checked. the label text will be displayed in full length and wrapped at the end of the available width. If not checked the label will be cut and a "..." will be appended. You can hover with the mouse over a label to get the full text.

No automatic refresh

This control is excluded from app.refresh() calls if the control name is not explicit mentioned.

app.refresh("myGrid") will refresh it but app.refresh() will not.

Use this setting if the grid data is expensive to get and you want to avoid unnecessary calls for data

If this is a field, that other fields refer to, to get data from another Config. You have to specify which config that is.

Report Id

Choose a report to use in this Report Control. Reports can be managed in the Report Config App

Search Prefixes

If a field is included in the global search, the prefix can be used to search for specific records only. You can specify a list of prefixes for every field that is included in the search. Lets say you have an address with a company name, a first name and a last name, you could give the following prefixes:

• Company: address, company

• FirstName: address, name, firstname

• LastName: address, name

You could search for "address" and search all the fields, or you could search for "name" and look only in first and last name

If this is set. Brixxbox tries to load a record by using the value of this control as a key.

Server Side Paging

Reads only the actual page from the server instead of all table data at once. Use this for large tables to improve performance.

The subdata requests must NOT have ORDER BY

RowOrder Drag & Drop Parameter

If an app config is used as a sub data source, the values will be filled in automatically. If u want to set the parameter manually, the values must match the needed information for a SQL-Update statement. See the example below. In addition the relevant table/tables must be prepared to be capable to read and write the ordering data. See the list provided for Manual ordering of rows in a grid

{
   "targetTable": "exampleTableName",
   "targetKeyField":"exampleId",
   "targetRowOrderField":"exampleRowOrder"
}

-- e.g: Those parameters will lead to an update statement like this
UPDATE exampleTableName SET exampleRowOrder = @newRowOrderPosition WHERE exampleId = @id;

1. Input Mask Regex

You can mask the uinput of a textbox by using a regular expression.

You can find further information for for the Input Mask itself [here]()

If you want to lear more about regex, take a look [here ]()

Examples:

This allows only non-capital and capital letters (azA-Z) numbers (0-9) and the underscore (_). But no special characters (like ö, &, %, @,...).

Example 2. This forces the input to begin with abc, followed by any a-Z0-9

The Label With 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 property

Please have a look at

Server Side Paging Indexed Columns

When using serverside paging, most of the time it is not usefull to search in all columns as that means the grid is as slow as if it was not paged on server at all. We need to configure the columns that are indexed and can be used for ordering and searching. The other columns will not get a order option and will be ignored for searching. In case of a combobox (cordAddressId) the _value column will be searched as well. no need to configure that.

adrName, adrFirstName, adrCompanyId

InputTag

if set, the user is allowed to add new tags

TagValue

The value that should be displayed

Text Color

Choose a text color

ValidateInputBeforeExecution

If set, the brixxbox will check the validation before executing the event sourcecode

Record Observation

When 2 ore more users open the same record, only the first will be able to edit it. Other users will have to option to request the edit mode.

ValidatorMessage

You can enter a message here. In most cases that is not necessary, as there are default texts for all validators

Visibility

You can specify the default visibility of a field

When copy pasting HTML code (from word or other pages) to the WYSIWYG editor, the HTML can be pretty blown up and this can lead to issues printing the to complex html text in telerik reporting.

This setting allows to extract the plain text, when pasting into the editor. All the unsupported html tags are removed but you have to do the formatting again in the editor.

When checked. brixxbox will save the html content as a fragment, exactly as you see it in the editors code view. If unchecked, brixxbox will wrap the content in a valid html document with header tag and <body></body>.

If you would like to print the text in telerik reporting, you should check this, to keep the whitespaces.

Create Menu

A default menu Folder and Entry will be created. This is just a more convenient way than using the menu editor. You will probably use the menu editor at some point to move things around in the menu tree.

ChartData

The column from the sub data source for the Chart data

Icon Size

Icons inherit the font-size of their parent container which allow them to match any text you might use with them. With the settings, we can increase or decrease the size of icons relative to that inherited font-size.

Discussion

When enabled, the toolbar button for record based discussions will be activated.

You will need to activate discussions for the master table in the table editor before using this.

Combobox Multiselect

Set if you want your users to select multiple values.

Chart Label for Y Axes

This is a text, that will be used to label the chart y Axis

Data specifies where this control gets its Data from. If no DataSource is set for the control, you get a List of table columns from the master table. If DataSource is set, you have to enter a Field from this DataSource (like a controlId if your DataSource is a Config)

App Parameters

App Parameters are Flags, that can be set by calls from the menu. You can react oto these flags in app events to change your app behavior.

GridFilterVisibility

Set if the filter (search) field above a grid should be visible

Concurrency Control

This is used to prevent users from overwriting records. If two users have loaded the same record, and both make changes, than the user that saves first, will commit his changes, but the second user will not be able to save after the first user saved. In other words, you will only be able to save a record if noone saved it between you loading it and your save attempt.

GridSortingMode

Set if sorting by the user should be allowed

If you want to allow the user to manually sort rows in the grid, options for "Allow Drag & Drop" are available. To use this extended option the underlying sub data source must be able to handle the manual sorting information. If an app config is used as a sub data source please check Manual ordering of rows in a grid before activating the setting. The app config only needs to be enabled for handling the necessary data. If you want to use a SQL-Statement as your sub data source the relevant table/tables must be prepared to be capable to read and write the ordering data.

hideEditButtonColumn

Set this if you want the edit button column to disappear.

ComboboxMinSearchLength

Minumin Characters for a comboboxy to trigger the search. -1 for no search function at all

If this is checked, this column will be included in the global search scope

Enable

This will enable or disable the input.

You can create a footer for grid columns. The value for "column" specifies the target column.

The following parameter can be supplied:

• “column”: name for the target column

• “select”: will specify the Range for data selection. Possible values are “all” or “visible”. “all” is the default setting and will select all available data from this column. With “visible” only data matching a selection will be processed. If no selection is active, all data will be shown.

• “action”: will specify what action will be taken for the given data. Possible values are “sum”, “avg” (average), “min” (minimum), “max” (maximum). “sum” is the default.

• “decimalDigits”: If you are using a config based grid the decimal digit setting will be inherited from the column setting. Otherwise the default will be 0. If u want to overwrite this behavior this setting can be used.

• “textLeading”: Add a text in front of the value.

• “textTrailing”: Add a text behind the value.

//the following will give a sum for all data for the column "cordGrossValue"
[
   {
      "column":"cordGrossValue"
   } 
]

//the following will give an average for the visible data within a selection. If no selection is activ all data will be processed
[
   {
      "column":"cordGrossValue",
      "select":"visible",
      "action":"avg"
   } 
]


//the following will give one decimal digit for the value and add leading and trailing text. e.g. "Total: 123.4 $"
[
   {
      "column":"cordGrossValue",
      "decimalDigits": 1,
      "textLeading": "Total: ",
      "textTrailing": " $",
   } 
]

Smooth Scroll

Lets the user scroll through the table instead of using the paging buttons

GroupGridColumns

A comma separated list of columns, that should be used for grouping. By default the grouping criteria will be the cell values for this column. The same cell values are put in one group. The column itself will be hidden from view because it will only show the group name. If a search is added to the column, the column stays visible.

For DateTimeBoxthe grouping value is set to the date part only and the column stays visible in order not to lose the time information.

For columns with date controls (DateBox and DateTimeBox) an individual grouping can be tailored to the specific data. This way date ranges can be shown in groups. e.g. "today", "this week", "last month". The brixxApi call 'gridColumnConfig' enables setting of this individual grouping ranges. Example setup for date grouping (Note: The moment.js Library is used to set start and end dates):

//Code should be placed as event "onAppStart"

//each entry within 'grouping' must have an array. First element is start date for
//the group and second the end date. If groups overlab (e.g. "today", "this week", "this month")
//the first matching entry is picked.

columnAddOnSettings = {
    //add some grouping criteria for this date column 
    'grouping':{
        'Future Dates': [moment().add(1, 'days'), moment('9999-12-31')],
        'Today': [moment(), moment()],
        'Last 7 days': [moment().subtract(6, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'This Year': [moment().startOf('year'), moment().endOf('year')],
        'Last Year and Older': [moment('1970-01-01'), moment().endOf('year').subtract(1, 'year')]
    }
};

brixxApi.gridColumnConfig ('testGrid1', 'cmpSomeDate', columnAddOnSettings);

Tool Tip Text

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

Report Culture

The report culture determines e.g. how date values are displayed.

Selects all text when the focus is set to this control.

Manual ordering of rows in a grid

This option will prepare the app for manual ordering of rows in a grid. Only set this option, if you want users to be able to order grid rows by drag and drop.

Setting this option will make the following changes to your app:

• Create a new field for the underlying datatable. The default name will be brixx_RowOrder. Type will be set to HierarchyId.

• The View for this app will get a new column to show the RowOrder with hex value.

CONVERT([varchar](512), CAST([ExampleTableName].[brixx_RowOrder] as varbinary), 2) as brixx_RowOrder]

• A InsertTrigger will be created for the new field. Every time a new row is inserted without a value for brixx_RowOrder an order value will be generated to place the new row at the end of already existing data.

CREATE  Trigger [dbo].[brixx_ExampleTableNameInsert_RowOrder]
ON  [dbo].[ExampleTableName]
AFTER INSERT

AS

SET NOCOUNT ON;

/* IF all brixx_RowOrder fields are valid, no need for any processing */
IF (SELECT COUNT(*) FROM inserted WHERE brixx_RowOrder IS NULL) = 0
BEGIN
	--PRINT ('No Action needed for Trigger on ExampleTableName');
	RETURN;
END

DECLARE @RowId BIGINT;
DECLARE @InsertAfterHierarchyId as HierarchyId;
DECLARE @ParentHierarchyId as HierarchyId;

DROP TABLE IF EXISTS #tmpTable;
SELECT Id INTO #tmpTable FROM inserted WHERE brixx_RowOrder IS NULL;

WHILE EXISTS (SELECT * FROM #tmpTable)
BEGIN
	SET @RowId = (SELECT TOP(1) ID FROM #tmpTable ORDER BY Id);

	/* If the INSERT does not provide a HierarchyId, generate a value at the end of list */
	SET @InsertAfterHierarchyId = (SELECT TOP 1 brixx_RowOrder FROM [dbo].[ExampleTableName] WHERE brixx_RowOrder IS NOT NULL ORDER BY brixx_RowOrder DESC );
	IF (@InsertAfterHierarchyId IS NULL)
	BEGIN
	    -- Default Parent ID
	    SET @ParentHierarchyId = '/1/';
	END
	ELSE
	BEGIN
	    -- Take Parent ID from Child
	    SET @ParentHierarchyId = @InsertAfterHierarchyId.GetAncestor(1);
	END

	UPDATE [dbo].[ExampleTableName] SET brixx_RowOrder = @ParentHierarchyId.GetDescendant(@InsertAfterHierarchyId, NULL) WHERE Id = @RowId;

	--PRINT ('INSERT Trigger on ExampleTableName. Parent: ' + @ParentHierarchyId.ToString() + ' Insert After: ' + @InsertAfterHierarchyId.ToString() + ' New RowOrder: ' + @NewHierarchyId.ToString() + ' for Id: ' + CONVERT(varchar(10),@RowId));

	DELETE #tmpTable WHERE Id = @RowId;
END

DROP TABLE #tmpTable;

• If no ORDER BY is provided for the SELECT Statement, ORDER BY will use the brixx_RowOrder Field

• All Existing data will be updated! If rows exist when saving your app brixx_RowOrder will get a default value for ordering.

UPDATE ExampleTableName SET brix_RowOrder =  '/1/' + CONVERT ( nvarchar(30) , Id) + '/' FROM ExampleTableName WHERE brix_RowOrderField IS NULL

You can specify your display layout for 4 different categories of devices.

• extra small - screens less than 768 pixel wide like phones.

• small - screens less than 992 pixel wide like tablets.

• medium - screens less than 1200 pixel wide like small laptops.

• large - screens with more than 1200 pixel wide like laptops and desktops.

You can make a setting for each of those categories. Or u can just skip the layout for a setting and the smaller setting will come into place. The screen width is always split into 12 logical columns. The smallest line width to choose is 1/12. brixxbox will set the extra small device to 12/12 as default. An input control will go across the full screen width. Medium devices will be set to 4/12 per control. That will lead to 3 controls per screen line for medium and large layouts.

In addition you can decide if u want to have the control label on a separate line above the control or in front of the control. Those settings will be used for all devices.

After saving the control settings in app designer the preview will reflect the changes.

For further information please have a look at Bootstrap Grid System