Skip to main content

Extension

An extension add or replaces existing features in the Healthblocks admin dashboard.

The extension type describes which options are available. Common examples are language, tab, theme, design_token, ... Integrations can use custom extension types. Note that extensions are publicly accessible.

The extension context specifies the place where the extension belongs. Common examples are project & expo.

The extension options can currently contain any JSON object, but may be validated in the future. See which options are available below.

Project languages​

{
  "type": "language",
  "context": "project",
  "display": "Nederlands",
  "options": {
    "key": "nl", // Language should have unique slug
    "index": 6 // Languages are sorted by index
  },
  "configurationId": 1
}

Member tab with iframe​

This tab is shown in the member detail page of the admin dashboard. The tab can be shown conditionally by setting roles and/or subjectRoles. The example below will be only visible for caregivers & admins visiting the profile of members with the user role.

The embed URL will be used as iframe src.

{
  "type": "tab",
  "context": "member",
  "display": "Session types",
  "options": {
    "roles": ["caregiver", "admin"], // user, caregiver, admin, _self
    "subjectRoles": ["user"], // user, caregiver, admin, _self
    "slug": "session_type", // Items with duplicate slugs are filtered out
    "embed": "https://example.org/some-page",
    "index": 4 // Tabs are sorted by index
  },
  "configurationId": 1
}

Member tab with component​

This type of tab is faster to load (and can be preloaded).

The ES module should export a mount(element) method that fills the given DOM element with the tab contents.

{
  "type": "tab",
  "context": "member",
  "display": "Example",
  "options": {
    "roles": ["caregiver", "admin"],
    "subjectRoles": ["user"], // user, caregiver, admin, _self
    "slug": "example", // Items with duplicate slugs are filtered out
    "style": "https://healthblocks-integration-example.glitch.me/member-tab.css",
    "module": "https://healthblocks-integration-example.glitch.me/member-tab.js",
    "index": 4 // Tabs are sorted by index
  },
  "configurationId": 1
}

The default navigation items have an index ranging between 0 and 400.

{
  "type": "nav_link",
  "context": "project",
  "display": "Session types",
  "options": {
    "roles": ["caregiver", "admin"],
    "exact": true, // Whether this item should not be styled as active when visiting subroutes
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 1 24 24\" width=\"24\" height=\"24\"><path stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z\"/><path stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M9 22V12h6v10\"/></svg>",
    "slug": "session_type", // Items with duplicate slugs are filtered out
    "href": "/session-types", // This should be '/' + slug
    "embed": "https://example.org/session-type-manager",
    "index": 245 // Items are sorted by index
  },
  "configurationId": 1
}

Custom actions schedule​

Show a button in the modal that is opened when choosing a slot:

{
  "type": "action",
  "context": "schedule_slot",
  "display": "Book appointment",
  "options": {
    "href": "https://example.org/appointment-booker",
    "index": 1 // Items are sorted by index
  },
  "configurationId": 1
}

Show a button in the modal that is opened when selecting a time range:

{
  "type": "action",
  "context": "schedule_selection",
  "display": "Book appointment",
  "options": {
    "href": "https://example.org/appointment-booker",
    "index": 1 // Items are sorted by index
  },
  "configurationId": 1
}