Dashborg Documentation / References / Element Reference - UI

Element Reference - UI

By default the Dashborg Core and these UI components are imported into your Dashborg application. These components are based off of the excellent Fomantic UI / Semantic UI library with some Dashborg specific extensions. If you would like to use a different UI library or not import these components you can change the ui attribute of your panel.

You can use most of the Semantic UI classes to modify the Dashborg custom elements by using the class attribute.

Components

<d-label>

A stylized label. See the Fomantic UI Label Documentation

Attributes

  • icon - an icon to render in the label (on the left hand side)
  • righticon - an icon to render in the label (on right hand side). should not specify both icon and righticon.
  • detail - secondary text for label
  • html children - the label’s content

<d-message>

A stylized message, with an optional title. See the Fomantic UI Message Documentation

  • icon - an icon to render in the message
  • title - message title / header
  • class - see the Fomantic UI reference for all values. But common values are:
    • “success” / “negative” / “info” / “warning” - shows green, red, blue, yellow respectively
    • size classes: “mini” “tiny” “small” “large” “big” “huge” “massive” - for relative size of content
    • color classes: “blue” “green” “red” etc.
    • “compact” - message only takes up the width of its content
    • “floating” - 3-D effect for cntent
  • html children - the message’s content

<d-stat>

A sylized statistic - emphasizes the current value of an attribute. See the Fomantic UI Statistic Documentation

  • bind : bind-expr - for the value of the statistic
  • format : format-expr - see <d-text>
  • icon - an icon to render for this statistic
  • label - a label for this statistic
  • labelpos - “top”, “bottom”, “right”, “left”

<d-def>

Used to show key-value pairs (name / value). Name part is bold and fixed width. Value can be any content.

Attributes

  • name - the text to show as the name
  • style-name - additional styling for name
  • style-value - additional styling for value
  • html-children - the definition value

<d-dataview>

Will output a pretty-printed JSON dump of bound data. Use class="dark" to show an inverted display (black background with white text).

Attributes

  • bind : bind-expr

Tables and Lists

<d-table>

Displays a data table. Can also track a selection in the table. Can set a value in the data-model according to which item is currently selected. Must have <d-col> children to implement the table columns. A zero element table displays the column headers and a single row that says “No Data”. When a selected row is clicked again, it will set the selection to null. This will cause the onchangehandler to fire with a null value.

Attributes

  • bind : bind-expr - the list/array to iterate over. If value is null, treated as a 0 element list. If value is not an array, it will be treated like a 1-element list.
  • selection - set to track list selection (defaults to false)
  • bindvalue - a path to set with the current selection. Only required if selection is true. Will be set to the selected item’s keyexpr.
  • keyexpr - if selection is true, keyexpr is required. keyexpr is a bind-expr that evaluates in the local data context of each list element. The “bindvalue” path of this list will be set to the selected element’s evaluated keyexpr.
  • onchangehandler - handler to run each time a new item is selected
  • onchangehandlerdata : data-expr - data to be passed to onchangehandler

<d-col>

A table renders a set of columns. <d-col> elements must be children of the <d-table>. Each <d-col> represents a single table column. Each column’s HTML children are evaluated in the local data context of the row.

Attributes

  • width - size hint for the table column. Note table sizing is not exact in HTML. column widths work best when you specify a “fixed” table using class-table="fixed". Because of HTML’s layout rules, percentage widths are based off the size of the table, not the table’s container.
  • label - the name of this column. Displays in the table header.
  • html-children - column’s cell content.

<d-list>

Displays a list of values (similar to a foreach loop). Can also track a selection in the list. Can set a value in the data-model according to which item is currently selected.

Attributes

  • bind : bind-expr - the list/array to iterate over. If value is null, there will be no display. If value is not an array, it will be treated like a 1-element list.
  • selection - set to track list selection (defaults to false)
  • bindvalue - a path to set with the current selection. Only required if selection is true. Will be set to the selected item’s keyexpr.
  • keyexpr - if selection is true, keyexpr is required. keyexpr is a bind-expr that evaluates in the local data context of each list element. The “bindvalue” path of this list will be set to the selected element’s evaluated keyexpr.
  • html-children - value for each element in the list
  • onchangehandler - handler to run each time a new item is selected
  • onchangehandlerdata : data-expr - data to be passed to onchangehandler

Inputs and Actions

<d-button>

A clickable button. Used to trigger handlers. Additional button classes can be passed with class-button attribute, e.g. class-button="primary". See Fomantic UI Button Documentation.

Attributes

  • handler - path of handler to call when button is clicked
  • handlerdata : data-expr - data to be passed to handler (req.Data).
  • disabled - if true, disable the button. It will not call the handler when disabled.
  • class-button - additional classes to be passed to the button element. e.g. “primary”, “secondary”, colors, “positive”, “negative”, sizes

<d-input>

A text input. Used to gather text input. The type attribute changes it’s appearance to render a textarea, password, hidden, or normal input.

Attributes

  • type - “hidden” (no display), “text” (default), “password”, or “textarea”
  • bindvalue - data model path to bind the current value of the text input.
  • defaultvalue - if this is set, then it will set the “bindvalue” path to this value when the input is first displayed. Be careful about using this attribute, it is more consistent to set the initial value in a panel handler.
  • binderrorvalue - a path to read an error message from to attach to this field. Note does not function for textarea controls. If this value is not null, it will turn the field “red” to mark the error and show an error label.
  • label - a text label for this input
  • placeholder - placeholder value
  • style-input - additional styling for raw input control
  • style-label - additional styling for raw label element
  • onchangehandler - called on every keypress (use with caution)
  • onchangehandlerdata : data-expr - for onchangehandler

<d-select>

A select/dropdown input. Can either take its option values from the HTML in the form of <d-option> tags or from a bind-expr. The bind-expr must be an array of strings or an array of maps with the “text” and “value” keys set.

Attributes

  • bind : bind-expr - used to pull option data.
  • bindvalue - data model path to bind the current value of the select.
  • placeholder - initial text to show (when value is null)
  • defaultvalue - if this is set, then it will set the “bindvalue” path to this value when the input is first displayed. Be careful about using this attribute, it is more consistent to set the initial value in a panel handler.
  • onchangehandler - called every time the value changes
  • onchangehandlerdata : data-expr - for onchangehandler

If a bind attribute is not provided, options come from the markup (like in HTML). Each <d-option> specifies one option. The value is placed in the value attribute, and the text of the option as child text.

Example:

<d-select bindvalue="$.state.color" placeholder="Pick a Color">
    <d-option value="red">Red</d-option>
    <d-option value="green">Ged</d-option>
    <d-option value="blue">Blue</d-option>
</d-select>

<d-checkbox>

A checkbox input.

Attributes

  • bindvalue - data model path to bind the current value of the checkbox
  • toggle - if set, display this checkbox as a toggle control
  • style-checkbox - additional styling for raw checkbox control
  • label - label for checkbox
  • readonly - clicking the checkbox will not change the bindvalue. but this will still call the onchangehandler. can be used to perform custom or validated checkbox handling.
  • onchangehandler - called every time the value changes
  • onchangehandlerdata : data-expr - for onchangehandler

Modals

<d-modal>

Implements a Modal window (in page popup).

Attributes

  • bindvalue - data model value to track whether the modal is open or closed. Set this value to “true” to open the modal. When the modal is closed this value will be set to false. Functions a bit like a checkbox input. If you implement your own “close” button you’ll need to set this value to false to actually close the modal.
  • title - a title/header for modal window
  • closeondocumentclick - Whether the modal should close if the user clicks outside of the modal on the document (default = false).
  • size - size of modal - “mini”, “tiny”, “small”, “large”
  • clearonclose - if specified, this data path will be cleared (set to null) when the modal is closed. Useful for resetting form state.
  • closehandler - if set, called before the modal closes. the bindvalue will not be set to false automatically, this handler is responsible for setting it to false (or not). Can be used for validation, and to cancel the modal close. Only called when the UI closes the modal (close button or document click). If a handler closes the modal, you must perform validation and cancelation in that handler.
  • closehandlerdata : data-expr - for closehandler
  • afterclosehandler - used to perform additional cleanup after the modal is closed.
  • afterclosehandlerdata : data-expr - for afterclosehandler
  • child-elements - the modal content