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
  • HorizontalLine
  • Documentation
  • Tutorial
Export as PDF
  1. Client API Reference
  2. Controls

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:

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

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.

PreviousGroupBoxNextHtmlTable

Last updated 2 years ago

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

| Row Documentation