Header

1. Overview

The header tile is a mandatory object that must be placed inside the header field. The Header tile shows the edit/save button, the page title, workflow buttons, and the ability to show form data (fields).

2. Object Properties

The table provides a summary of the object properties associated with the header special type item, including their types, mandatory or optional status, and descriptions.

2.1. Breakdown of Object Properties

1. title

title here contains elements, global helpers, and icons used for the title. The table provides an insight into the various object properties of the title:

2. button

The button property affects all pages (assuming the current user has all permissions). There are two types of buttons that can be added:

• copy
• delete

Optional buttons (only present if configured):

• export-to-json

Additionally, if set up via Record settings, these buttons will automatically show:

• email
• docs-generator

📘

Note:

The above values are what we use as key in the buttonsMenu , buttonsLeft and buttonsRight options.

Configuring Buttons

We have many options to change where a button renders and what the button looks like. To modify a button inside the menu, use the buttonsMenu option:

{
   "type": "header",
   "buttonsMenu": [
       {
         "key": "copy",
         "label": "Copy this entry",
         "icon": "fad fa-pie"
       }
   ],
   ...
}

To change the location of a button (move it from the menu to outside the menu so it always shows on the page), we must first understand the layout of the Header.

For example, to place buttons into the “left buttons” or “right buttons”, use the following configuration:

{
   "type": "header",
   "buttonsLeft": [
       {
         "key": "Button trigger A",
         "label": "Button A",
         "color": "primary",
         "icon": "fad fa-acorn"
       },
       {
         "key": "email"
       }
   ],
   "buttonsRight": [
       {
         "key": "copy",
         "color": "secondary"
       }
   ],
   ...
}

📘

Note:

For color, we can use primary or secondary to match the theme colors, or pass a hex code like #CC66FF.

3. content

The content of a Header can be used to display some input fields in the same way as the form-data tile can. To configure the content of a Header tile, please see the documentation for the form-data content type.

📘

Note:

Only items that can go inside the Header are items of type field , and items of type field-group.

3. Sample Configuration

1. Here is a minimum sample configuration of the header:

{
   "type": "header",
   "title": {
     "elements": [
     "{{singular record.name}}"
     ],
     "icon": true
   },
   "content": []
}

2. Here is a full title configuration of the header:

{
   "type": "header",
   "title": {
     "elements": [
     "{{singular record.name}}",
     "#{{entry.autoId}}",
     "ID {{entry.id}}",
     "{{{entry.name}}}",
     "{{entry.customer}}",
     "Priority {{entry.priority}}"
     ],
     "joinWith": " - ",
     "icon": true,
     "iconColor": "primary"
   },
   ...
}

📌 Need Help?

If you require assistance or encounter any issues, please don't hesitate to contact us for further support.

I need support