Basic Components

10 minute read

General Options

These options can be used with any layout component. These are currently:

rows
cols
component definitions
custom Buttons

show_in: array<module-modes(module.index|module.show|module.create|module.edit)> Only display this component in the defined views/module-modes

Buttons

identifier: string
style: primary|dashed|danger|link|-
icon: string https://antdv.com/components/icon/
link: object Link to other resource
- href: string URL/URI of resource
- external: boolean If the link refers to a resource from another page
- target: string https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
display_style: scrollable|block|flex|-
options.flex: 1|-
options.justify_content: ?string https://developer.mozilla.org/de/docs/Web/CSS/justify-content
options.items: ?array array of dropdown items. button will be displayed as a dropdown-button
- options.items[index].identifier: string dropdown item will be rendered as a divider if empty
- options.items[index].icon: ?string https://antdv.com/components/icon/

Customizing the default Buttons

There are some default buttons present in every system. These Buttons handle basic functions like saving a resource, redirecting to /create and more. You can modify the behaviour of these buttons for each module by defining custom options in the bakery plan module definition.

Code example:

{
  "bakery_resource_module": "module_identifier",
  "bakery_resource": {
    "buttons": {
      "button_key": {
        "<option>": "<argument>"
      }
    }
  }
}

The keys are:

save for default ‘save’ button in create view
update for default ‘save’ button in update/edit view
continue for default ‘save and continue’ button in update/edit view
delete for default ‘delete’ button in show view
edit for default ’edit’ button in show view
create for default ‘create’ button in index view
excelfor default ’excel’ button in index view

All buttons can take the following options:

display: Boolean (whether to display the button at all. Default: true)
title: String (a custom title for the button. will be prefixed with buttons. for translations)
trigger: event_identifier (The event identifier to trigger when the button is clicked. this will change the functionality of the button and not trigger the default actions)
style: primary|dashed|danger|link|-

All of these options can be used individually or combined.

A note to trigger: if the button_key is save, update or contiune (the buttons in /edit and /create) the current value of any fields will be sent to the prototype output of the event element.

Adding Custom Buttons

You can add custom buttons to the Buttonbar that can trigger any webhook. These Buttons will be shown before other webhook buttons that where auto added by workflow elements using show_in_button_bar: true.

These Buttons are defined the same way and in the same place as customising the default buttons, and they support (mostly) the same options.

There are a few quirks to look out for though:

Custom Buttons have to use an identifier that is not one of the keys for default buttons defined above!
The display option is ignored and does nothing when defined on custom buttons. Set ‘show_in’ to an empty array if you want to hide a button!
If the trigger option is not set, the identifier of the button will be used and treated as a webhook identifier
If the title option is not set, the identifier of the button will be used as the translation suffix
Ifshow_in is not set, the button will show in every view. If it is set, it will respect the common module modes (e.b. “module.show”)
Using the icon option with a valid antd icon identifier changes the icon

Adding Buttons in Lists

You can define buttons in lists that will trigger webhooks with the current entity and field / row information of the clicked button. This enables you to get the specific tuple from the list that’s in the row where the corresponding button was pressed.

These Buttons will only show up in module.show.

The Webhook will receive the field & row information in the selector output. It is an object with two keys.

fieldIdentifier : Is the identifier of the list from where the button was triggered.
rowIndex : Is the index of the row from where the button was triggered.

Code example for a list field:

{
  "identifier": "list_field",
  "type": "list",
  "options": {
    "buttons": [
      {
        "title": "custom_button",
        "trigger": "webhook_identifier",
        "icon": "api",
        "position": 0
      }
    ],
    "fields": [
      {
        ...
      }
    ]
  }
}

This Code example will create buttons in the first col of the list that will trigger the webhook webhook_identifier. The translation key of the th element will be buttons.custom_button. The button will show the api icon in the list.

Only the trigger key is required. All other keys are optional.

if no title is set, the title will be buttons.webhook_identifier.
if no icon is set, a default icon will be used. Only valid antd icon identifiers are supported.
if no position is set, the button col will be appended as the last col in the list.

Headline

options.identifier: string
options.size: small|-
options.align: center|-

Text

options.identifier: string uses translation key module.texts.identifier
options.text: string fallback if no identifier is set (be aware that this can not be translated)
options.has_border: boolean whether the text component itself should have an extra border. Useful when using in combination with show_in and in a col with options.borderless: true

Calendar

Option name	Type	Default	Description
`available_views`	`array<ViewType>`	`['year', 'month', 'week', 'day','list']`	View types (like “month”, “day”, etc.) that the user can choose from
`custom_views`	`array<ViewTypeDef>`	`[]`	Definitions for custom views
`default_view`	`ViewType`	`month`	Determines the view that is opened when opening the layout
`events`	`array<EventDef>`	`[]`	The “event types” that this calendar will display
`editable`	`boolean`	`true`	Determines if the events can be edited within the calendar by dragging and resizing
`height`	`string/int`	`80vh`	The height of the calendar
`week_numbers`	`boolean`	`false`	Whether to show week numbers in day grid views (e.g. “month”)
`nav_buttons`	`boolean`	`true`	Whether to show the navigation buttons
`filter_sidebar`	`boolean`	`true`	Whether to show the filter sidebar

Events

Option name	Type	Default	Description
`identifier`	`string`		Identifier of this event type. Used as a translation key.
`module`	`module_identifier`		The module containing the field defined in the `field` attribute
`field`	`field_identifier`		The field identifier of the field that contains the date of an event. This field needs to be of the types `date`,`datetime` or `dateRange`
`color`	`#hex`	`#1890ff`	The event background color
`icon`	`Icon`		An icon that will be displayed within the event element
`quick_create`	`boolean`		If quick creation in calendar view is possible for the event
`pre_filters`	`array<PreFilter>`		Filters out entities before displaying
`recurrence`	`string` `object`		Determines a pattern by which this event will reoccur within the calendar (e.g. `monthly`). Reference .
`text_color`	`#hex`	`#ffffff`	The event text color
`title`	`string`		The event title
`recipes`	`Recipes`		Recipes for all event attributes

[
  {
    "type": "calendar",
    "options": {
      "availableViews": [
        "list7days"
      ],
      "custom_views": {
        "list7days": {
          "type": "list",
          "duration": {
            "days": 7
          }
        }
      },
      "default_view": "list7days",
      "editable": false,
      "events": [
        {
          "identifier": "employeeHoliday",
          "module": "holidays",
          "field": "dateRange",
          "color": "#7db5ff",
          "pre_filters": [
            {
              "column": "employee.id",
              "operator": "=",
              "recipe": "user().id"
            }
          ],
          "recipes": {
            "title": "'Birthday: ' + this.employee.name"
          }
        },
        {
          "identifier": "employeeBirthdays",
          "module": "employees",
          "field": "birthdate",
          "color": "#4adeff",
          "text_color": "rgba(0, 0, 0, 0.85)",
          "pre_filters": [
            {
              "column": "id",
              "operator": "=",
              "recipe": "user().id"
            }
          ],
          "recurrence": "yearly",
          "recipes": {
            "title": "'Birthday: ' + this.first_name + ' ' + this.family_name"
          }
        }
      ],
      "height": "50vh",
      "navButtons": false,
      "filterSidebar": false,
      "weekNumbers": true
    }
  }
]

Fields

See Layout -> Fields

Collapsables

Full example

{
  "cols": [
    {
      "span": 24,
      "components": [
        {
          "type": "collapse",
          "options": {
            "title": "group",
            "accordion": true,
            "active_key": "my_key",
            "no_padding": true,
            "panels": [
              {
                "title": "my_title",
                "key": "my_key",
                "components": [
                  {
                    "type": "field_group",
                    "options": {
                      "fields": []
                    }
                  }
                ]
              },
              {
                "title": "my_title2",
                "key": "my_key2",
                "components": [
                  {
                    "type": "field_group",
                    "options": {
                      "fields": []
                    }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  ]
}

collapsable

title: String
accordion: boolean determine if only one panel should be open at a time
active_key: boolean select the open panel when the page is loaded
no_padding: boolean
panels: array the list of panels identified by their key

Panel

title: String
key: String used to reference a panel

Affix

A component where its content is “sticky”, meaning that it will be fixed on top of the page when scrolling past it.

top: int determines the offset from the top in pixels
components: array<Component> layout components placed in the affix bar

Widgets

With the widget component, different charts can be displayed. The current chart options include: Donut, Line, Column and Progress

chart: String determines the type of chart. This can be ‘donut’, ’line’, ‘column’ or ‘progress’

Options for Donut

headline : String
instances : Array
labelsBelow : boolean
hideLegend : boolean

The instances array holds objects with the following values:

color : Hex
label : String
trigger: TriggerObject (Optional)
value : Int

The TriggerObject holds the following keys, all except type are optional:

type: String Required. Values: redirect | webhook
target_module: String (module identifier)
target_resource: Int (resource id)
target_data: Object Will be passed directly into the body of the webhook request
target_action: String Module action (e.g. module.create). Used for type redirect, default is module
target_anchor: String Anchor tag, will be appended to url with leading # when using type redirect

Donut Example

{
  "type": "widget",
  "chart": "donut",
  "options": {
    "headline": "customer_lead",
    "instances": [
      {
        "color": "#00BFFF",
        "label": "new_lead",
        "value": 30
      },
      {
        "color": "#5F9EA0",
        "label": "in_contact_with_customer",
        "value": 20
      },
      {
        "color": "#ADD8E6",
        "label": "lead_completed",
        "value": 20
      }
    ]
  }
}

headline : String
axis : Array This Array stores strings. They are the labels to be displayed on the x-axis. (e.g. year numbers)
lines : Array This Array stores objects. One object stores the data for one line.

The lines Array holds objects with the following values:

label : String The name of the line
color : Hex The color in which the line should be displayed
values : Array This Array stores Int values

Line Example

{
  "type": "widget",
  "chart": "line",
  "options": {
    "headline": "job_performance",
    "axis": [
      "2004",
      "2005",
      "2006",
      "2007",
      "2008"
    ],
    "lines": [
      {
        "label": "peter",
        "color": "#b80f0f",
        "values": [
          10,
          20,
          5,
          60,
          30
        ]
      }
    ]
  }
}

Options for Column

headline : String
axis : Array This Array stores strings. They are the labels to be displayed on the x-axis. (e.g. year numbers)
columns : Array This Array stores objects. One object stores the data for one column.

The columns Array holds objects with the following values:

label : String The name of the column
color : Hex The color in which the column should be displayed
values : Array This Array stores Int values

Column Example

{
  "span": 24,
  "components": [
    {
      "type": "widget",
      "chart": "column",
      "options": {
        "headline": "test_data",
        "axis": [
          "2004",
          "2005",
          "2006",
          "2007",
          "2008"
        ],
        "columns": [
          {
            "label": "column1",
            "color": "#b80f0f",
            "values": [
              10,
              20,
              5,
              60,
              30
            ]
          },
          {
            "label": "column2",
            "color": "#fcf912",
            "values": [
              20,
              8,
              15,
              50,
              80
            ]
          }
        ]
      }
    }
  ]
}

Options for Progressbar

headline : String
max : Int this defines which value would be 100%
current : Int defines the current number of completed steps/products/…
color : Hex

ProgressBar Example

{
  "type": "widget",
  "chart": "progress",
  "options": {
    "headline": "realized_product",
    "current": 600,
    "max": 1800,
    "color": "#0fb83c"
  }
}

The component navigation can calculate a route between two addresses. It has input fields and shows the arrival time. It can display an interactive map of the calculated route.

map: String set this value to “true” if you want the map to be displayed. Otherwise the component will only show time and distance.

Map

The map component displays a single address with a marker on an interactive map. It has no input fields and shows the map only, the address data has to be set via api.

Options for Map

address: String
height: String this is css, so values could be 30vh, 300px or something else
mode: heatmap; heatmap shows additional heat information via a workflow response (*1)
event: Workflowevent you can use workflows to fill address data as its response

{
  "type": "map",
  "options": {
    "recipes": {
      "address": "zip"
    },
    "height": "40vh"
  }
}

Too large for expand/collapse
Path is api/database/seeds/3b/workflows/setGeoDataForLeads.workflow.json

Too large for expand/collapse
Path is api/database/seeds/3b/workflows/getGeoDataForLeads.workflow.json