brixxbox Wiki
  • Einstieg und Feature-Übersicht
    • Technische Übersicht
    • Praxisbeispiele
    • Responsive Design
    • Rollen und Rechte
    • Mandanten und Währungsfähigkeit
    • Multi-Language
    • Integrierte KI
    • Integriertes Archiv
  • App Erstellung
    • Design-Cockpit
    • How Tos
      • Custom Grid Column Date Format
      • Create Report REST
      • Telerik Extension Functions
        • Telerik Page Footer Sum
        • Telerik Page Header Sum
      • Printing in LAN
  • Client API Reference
    • Functions
      • addCalendarEventSource
      • addClassToGridRowCell
      • addEventListener
      • addToolbarButton
      • brixxGPT
      • businessBrixx
        • DHL Shiping
          • CreateShipment
          • GetLabel
        • DPD Shiping
          • CreateShipment
        • UPS Shiping
        • Inventory Movement
        • Currency Conveter
        • Datev Export
          • Datev Export SqlDataRead Example
          • Datev Export sqlMainData Example
          • Datev Export sqlGetCounter Example
        • GS1 Code Splitter
        • SEPA Export
        • Diamant Connector
          • Diamant OpenStack
          • Diamant Transaction
          • Diamant CloseStack
      • cancelCalendarChanges
      • callWebHook
      • changeHelpText
      • clearGridSelection
      • cloudPrint
      • cloudQuery
      • closeModal
      • composeEmail
      • createPublicAppUrl
      • copyConfigRecordById
      • createReport
        • ZUGFeRD
      • deleteAttachment
      • deleteConfigRecordById
      • deleteRecord
      • displayRecord
      • downloadAttachments
      • disableGridHyperLinks
      • enableNotifications
      • enableValidator
      • excludeFromReadonly
      • executeStoredProcedure
      • getAttachmentId
      • getAttachmentById
      • getAttachmentByFileName
      • getAttachmentsForCurrentRecord
      • getLastAttachmentByRecordId
      • getBrowserToken
      • getControlUnmodifiedValue
      • getCustomMessage
      • getCustomSetting
      • getCalcDateTime
      • getHtmlElement
      • getDate
      • getCalcDate
      • getFieldValue
      • getSessionToken
      • getUserClaim
      • getConfigRecordAttachmentIdByFileName
      • getSignatureImageBlob
      • getGeoLocation
      • getLabelText
      • globalSearch
      • initAllControls
      • initControl
      • isModal
      • isUserInRole
      • isRowSelected
      • inviteUser
      • localValue
      • loadAndDisplayRecord
      • loadAndDisplayRecordById
      • loadConfigRecordByValue
      • loadConfigRecordById
      • loadRecord
      • loadRecordById
      • logAdd
      • logout
      • markAllControlsAsUnModified
      • messageBox
      • newGridEntry
      • newRecord
      • printBlob
      • print
      • readOnlyMode
      • refresh
      • refreshAttachments
      • refreshDataSource
      • refreshBadges
      • reInitValidation
      • replaceText
      • serverFunction
      • setControlUnmodifiedValue
      • setFieldValue
      • setLabelText
      • setTooltipText
      • setToolbarButtonMode
      • setEnable
      • setVisibility
      • startBrixxbox
      • startMode
      • startScanner
      • showBlob
      • showMessage
      • showAttachments
      • showDiscussion
      • showWikiPage
      • sqlReadValue
      • sqlWrite
      • sqlRead
      • saveCurrentRecordWithoutEvents
      • saveCurrentRecord
      • saveConfigRecord
      • saveStructure
      • setBackgroundColor
      • setFontStyle
      • setFontWeight
      • setGridDefaults
      • setTextColor
      • setFocus
      • setDecimalDigits
      • switchTagControl
      • selectGridRows
      • showRowDetailPanel
      • showRowDetailButton
      • setGridAutoRefresh
      • setGridGrouping
      • showMessageBox (deprecated)
      • showTabPage
      • setFieldUnit
      • takePicture
      • triggerEvent
      • toggleGridSelection
      • unselectGridRows
      • uploadAttachment
      • updateTitle
      • validateInput
      • queryStoredProcedure
      • setValidatorValue
    • Variables
      • userId
      • recordId
      • record
      • isLoadingRecord
    • Controls
      • Accordion
      • AppConfig
      • Badge
      • Button
      • Camera
      • Chart
      • CheckBox
      • ComboBox
      • DateBox
      • DateTimeBox
      • DocViewer
      • FileImport
      • FormGroup
      • FormGroupRow
      • FullCalendar
      • Grid
      • GridConfig
      • GroupBox
      • HorizontalLine
      • HtmlTable
      • HtmlTemplate
      • Image
      • Label
      • MultilineTextBox
      • NumBox
      • TabControl
      • TabPage
      • TextBox
      • LinkLabel
      • RadioButton
      • Report
      • Row
      • Scanner
      • SignaturePad
      • Tag
      • TemplateGrid
      • TemplateGridElement
      • TimeBox
      • Unit
      • WedgeScanner
      • Widget
      • WidgetContainer
      • WysiwygText
    • Events
      • onAppStart
      • onAppInitialized
      • onAttachmentDeleted
      • onAttachmentsShow
      • onAttachmentsHide
      • onChange
      • onCellClick
      • onCellEdit
      • onClick
      • onChildAppClosed
      • onDataTransform
      • onEventClick
      • onEventChange
      • onFileImport
      • onKeyDown
      • onKeyPress
      • onModalClose
      • onMailHistoryShow
      • onRowClick
      • onRecordLoad
      • onRecordLoaded
      • onRecordSave
      • onRecordSaved
      • onRowSelectionChanged
      • onRowCreated
      • onRecordNew
      • onRecordDelete
      • onRecordDeleted
      • onKeyUp
      • onScan
      • onReturnFromModal
      • onSubDataRequest
      • onTabShown
      • onTimeSelected
      • onPictureTaken
      • OnCheckPermissions
    • Tips and Tricks
      • Date and Time
        • The moment.js Library
  • Server API Reference
    • Functions
      • loadConfigRecordById
      • saveConfigRecordById
      • sqlWrite
      • sqlRead
      • sendEmail
      • createReportPdfBlob
      • cloudPrint
      • businessBrixx
  • Configuration
    • Workspace Settings
      • CustomHeaderFooterBackgroundColor
      • CustomInviteText
      • CustomLogoBackgroundColor
      • CustomLogoUrl
      • RecordLockWaitTime
      • WhiteLabeling
    • App Editor
      • Custom HTML Templates
        • jsTree
        • Slider
      • App Editor Properties
        • AddToAttachements
        • AppAltViewName
        • AppAttachments
        • AppColor
        • AppConfigToStartName
        • AppConfigToStartSourceField
        • AppConfigToStartTargetField
        • AppDiscussion
        • AppHistory
        • AppIcon
        • AppMailHistory
        • AppMasterTable
        • AppParameters
        • AppPrefix
        • AppPreviewRecordId
        • AppTitle
        • AttaDocType
        • AttachementFilename
        • AutoDisableOnEdit
        • ButtonStyleClass
        • BlockInputDuringEventExecution
        • CascadeCopy
        • CascadeDelete
        • ChartData
        • ChartData
        • ChartDataJson
        • ChartLabel
        • ChartLabelAxesX
        • ChartLabelAxesY
        • ChartType
        • ComboBoxEditButton
        • ComboBoxListButton
        • ComboboxKey
        • ComboboxMinSearchLength
        • ComboboxMultiselect
        • ComboboxValue
        • ConcurrencyControl
        • CreateMenu
        • CssTemplateContent
        • Data
        • DateTimeUtc
        • DecimalDigits
        • DefaultValue
        • DevMode
        • DisableGridResponsiveness
        • EditAbsoloutGridHeight
        • EditDefineUnit
        • Enable
        • GridAutoRefreshIntervals
        • GridCellEdit
        • GridColumnFilter
        • GridColumnOrder
        • GridFilterVisibility
        • GridFooter
        • GridInlineEdit
        • GridNoHyperLink
        • GridPageSizeVisibility
        • GridRowOrderDragDropParam
        • GridSelectMode
        • GridSortingMode
        • GridToolbarVisibility
        • GroupGridColumns
        • HelpText
        • HiddenGridColumns
        • HideEditButtonColumn
        • HideSelectCheckboxColumn
        • HtmlTableClasses
        • HtmlTableDisablePagination
        • HtmlTemplateContent
        • Id
        • IncludeInGlobalSearch
        • InputMaskRegEx
        • InputTag
        • Label
        • LabelWidthClass
        • LabelWrap
        • LoadRecordOnLeave
        • ManualRefreshOnly
        • NoSpinButton
        • RecordObservation
        • RefersToConfig
        • ReportCulture
        • ReportId
        • RowReorder
        • SearchPrefixes
        • SelectAllOnFocus
        • ServerSidePaging
        • ServerSidePagingIndexColumns
        • SmoothScroll
        • TagValue
        • TextColor
        • ToolTip
        • ValidateInputBeforeExecution
        • ValidatorMessage
        • Visibility
        • WidthClass
        • WysiwygHtmlCleanup
        • WysiwygHtmlFragment
      • Controls
        • grid
        • combobox
    • Template Gallery
      • Extended CRM-System
      • Time Recording
      • Project Management
      • Digital Visitor-Management
      • Data Archive
      • Ticket-System
      • Digital Adressbook
      • Driver's Logbook
      • Order Management
      • Basic CRM
      • 🇩🇪 Erweitertes CRM-System
      • 🇩🇪 Zeiterfassung
      • 🇩🇪 Digitales Besuchermanagement
      • 🇩🇪 Datenarchiv
      • 🇩🇪 Projektmanagement
      • 🇩🇪 Ticketsystem
      • 🇩🇪 Digitale Adressverwaltung
      • 🇩🇪 Fahrtenbuch
      • 🇩🇪 Auftragsverwaltung
      • 🇩🇪 Basis CRM
    • Apps
      • ApiKeys
      • CloudGateway
      • Attachments
      • AuditHistory
      • DevelopmentChangeHistory
      • DocumentTypes
      • Jobs
        • Cron Definitions
      • Menu Editor
      • Reports
      • Roles
      • ServerSideFunction
      • SqlFunction
      • SqlStoredProcedure
      • SqlTrigger
      • StandardDatasources
      • StandardMessages
      • StdSqlEditor
      • Translations
      • UserDashboards
      • Users
      • WorkspaceFirewall
      • WorkspaceSettings
        • CustomInviteEmailContent
Powered by GitBook
On this page
  • Documentation
  • Tutorial
Export as PDF
  1. Client API Reference
  2. Controls

Widget

A Widget is another structural control in Brixxbox controls. It is used to group controls.

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:

  1. General Properties

  2. Size

  3. Style

  4. Translation

General Properties


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

  • Control Type

- For using grid control, click on "Add Control" and select "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

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.

PreviousWedgeScannerNextWidgetContainer

Last updated 2 years ago

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: , . Our app looks like this:

item id(numbox)
| item name(text box)