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

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

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

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

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.

PreviousDateBoxNextDocViewer

Last updated 2 years ago

For further information please have a look at

Bootstrap Grid System