How to integrate into Carerix UI

This document outlines the structure and configuration details of the $.manifest.ui section.

Read the first part: How to integrate with Carerix Marketplace

Section Structure
Component Types
Commands
Component Filters
Recipes

Section Structure

The following table describes the structure of the $.manifest.ui section:

Path	Type	Description	Example
`$.components`	array	List of component definitions	`- id: 'my-feature.component-id'`<br> `type: 'left-menu-item'`<br> `config:`<br> `text: 'New Menu Item'`
`$.components[*].id`	string	REQUIRED - Unique identifier of the component. To prevent conflicts, prefix all IDs with a unique feature prefix.	`'my-feature-id.my-component-id'`
`$.components[*].type`	string	REQUIRED - The type of component being injected. See Component Types.	`'left-menu-item'`
`$.components[*].parentId`	string	The ID of the parent component into which the new component will be injected.	`'candidate-details.tabpanel'`
`$.components[*].config`	object	Configuration settings specific to the component type. See Component Types.	`text: 'New Menu Group'`<br>`order: 2`
`$.components[*].filters`	array	List of filters that conditionally modify or remove the component. See Component Filters.	`- action:`<br> `type: 'remove'`<br> `condition:`<br> `type: 'has-permission'`<br> `expectedValue: false`
`$.translations`	array	List of translation objects	`- name: 'MY_FEATURE.NAME'`<br> `value:`<br> `en_US: 'My Feature Name'`<br> `nl_NL: 'Mijn Functienaam'`
`$.translations[*].key`	string	REQUIRED - Translation key. Prefix all translation keys with a unique feature prefix to prevent conflicts.	`'MY_FEATURE.NAME'`
`$.translations[*].values`	object	REQUIRED - Locale-to-string mapping object. `en_US` is always required as fallback.	`en_US: 'My Feature'`<br>`nl_NL: 'Mijn Functienaam'`

Supported Locales

en_US - English (REQUIRED - fallback locale)
nl_NL - Dutch
it_IT - Italian
de_DE - German
es_ES - Spanish
fr_FR - French
pt_PT - Portuguese

Component Types

The table below lists all available component types.
Carerix determines which options are granted per partner.

Left Menu Group

Injects a new menu group into the application's left-side menu.

Type: left-menu-group

Config:

text (REQUIRED) - The display name of the group
order - The position of the group in the left menu

Parent ID: Not applicable

Example:

components:   - id: 'feature-id.new-menu-group'     type: 'left-menu-group'     config:       text: 'New Menu Group'       order: 0

Left Menu Item

Injects a new item into an existing or newly created left menu group.

Type: left-menu-item

Config:

text (REQUIRED) - The display name of the menu item
order - The position of the item in the menu group
icon - The SVG icon string for the menu item
command (REQUIRED) - The command to be performed when clicked. See Commands.
- type - The type of command to perform
- data - Execution data for that command type

Parent ID: The ID of the menu group. Can be an existing group or a new one.

Existing menu group IDs:

Activiteitenmenu - 'Activities' menu
Dossiersmenu - 'Files' menu
Financieelmenu - 'Financial' menu
Marketingmenu - 'Marketing' menu
Beheermenu - 'Management' menu
Onderhoudmenu - 'Maintenance' menu

Example:

components:   - id: 'feature-id.new-menu-item'     type: 'left-menu-item'     parentId: 'Dossiersmenu'     config:       text: 'New Menu Item'       order: 0       icon: '<svg ...</svg>'       command:         type: 'open-iframe-view'         data:           url: 'https://....'

Custom Tab

Injects a new tab (iframe).

Type: tab

Config:

text (REQUIRED) - The tab's display name
url (REQUIRED) - The tab's URL

URL Variables: The URL supports variables for context information:

{{ _id }} - current record ID (e.g., 12345)
{{ _kind }} - current record type (e.g., CREmployee, CRVacancy)
{{ tenant }} - name of the tenant

Example URL: https://my-app.com/?entityKind={{_kind}}&entityId={{_id}}&tenant={{tenant}}

Parent ID: The ID of the details tab panel component.

ID patterns:

Entity details pages: {entityName}-details.tabpanel
Entity overview pages: {entityName}-overview.tabpanel
Calendar page: calendar.tabpanel

Supported entity names: email, note, event, task, systemactivity, match, candidate, vacancy, talentpool, lead, opportunity, contact, company, publication, placement, officeemployee

Example:

components:   - id: 'feature-id.new-tab-in-candidate-details'     type: 'entity-details-tab'     parentId: 'candidate-details.tabpanel'     config:       text: 'My new Iframe Tab in Candidate details'       url: 'https://my-app.com/?entityId={{_id}}&entityKind={{_kind}}&tenant={{tenant}}'

Background Agent

A background iframe that is loaded once at the app bootstrap stage.

Type: background-agent

Config:

url (REQUIRED) - The iframe's src

Parent ID: Not applicable

Example:

components:   - id: 'feature-id.my-background-process'     type: 'background-agent'     config:       url: 'https://my-app.com/'

Commands

Structure

Field	Type	Description
`type`	string	Type of command
`data`	object	Command's data

Command Types

open-iframe-view

Opens a URL in the main viewport.

Data:

url (REQUIRED) - Iframe URL

URL Variables:

{{ tenant }} - name of the tenant

Example:

type: 'open-iframe-view' data:   url: 'https://my-app.url/?tenant={{ tenant }}'

open-entity-details

Opens an entity details page in the main viewport.

Data:

entity (REQUIRED)
- _id (REQUIRED) - Entity ID
- _kind (REQUIRED) - Entity kind (e.g., Candidate)
activeTab - ID of tab to activate (optional, defaults to first tab)

Example:

type: 'open-entity-details' data:   entity:     _kind: 'Candidate'     _id: '1234'   activeTab: 'my-tab-id'

open-entity-preview

Opens an entity preview modal.

Data:

entity (REQUIRED)
- _id (REQUIRED) - Entity ID
- _kind (REQUIRED) - Entity kind (e.g., Candidate)
activeTab - ID of tab to activate (optional, defaults to first tab)

Example:

type: 'open-entity-preview' data:   entity:     _kind: 'Candidate'     _id: '1234'   activeTab: 'my-tab-id'

open-entity-overview

Opens an entity overview (entity list) page.

Data:

entity (REQUIRED) - Entity name (e.g., Candidate)

Example:

type: 'open-entity-overview' data:   entity: 'Candidate'

update-menu-item-info

Updates a menu item.

Data:

menuItemId (REQUIRED) - ID of menu item to update
counter - Counter value

Example:

type: 'update-menu-item-info' data:   menuItemId: 'feature-x-menu-item'   counter: 10

Component Filters

Filters are used to adjust a component's visibility or configuration based on specific conditions, like user permissions or system settings.

Structure

Field	Type	Description	Example
`action`	object	Action for the filter to execute	`type: 'apply-config'`<br>`options:`<br> `config:`<br> `text: 'Conditional Text'`
`action.type`	string	Action type	-
`action.options`	object	Options for the action type	-
`condition`	object	The condition under which the action is executed	`type: 'has-permission'`<br>`expectedValue: false`<br>`options:`<br> `resource: 'urn:cx/activities:data/tasks'`<br> `operation: 'access'`
`condition.type`	string	Condition type	-
`condition.options`	object	Options of the condition type	-
`condition.expectedValue`	boolean / string / number	The expected value for the condition to be met	-

Action Types

remove

Removes the component if the condition is met.

Options: None

Example:

- id: 'my-menu-item'   config:     # ...   filters:     - action:         type: 'remove'       condition:         type: 'has-permission'         expectedValue: false         options:           resource: 'urn:my-resource'           operation: 'access'

remove-property-from-path

Removes a specific property from the config object.

Options:

path (REQUIRED) - Array<string | number> - Path to the property within the config object

Example:

- id: 'my-menu-item'   config:     text: 'Text'     showCreateButton: true   filters:     - action:         type: 'remove-property-from-path'         options:           path:             - showCreateButton       condition:         type: 'has-permission'         expectedValue: false         options:           resource: 'urn:my-resource'           operation: 'create'

apply-config

Applies a config object to the existing one using PATCH merge strategy.

Options:

config (REQUIRED) - Config object to apply

Example:

- id: 'my-menu-item'   config:     text: 'Text'   filters:     - action:         type: 'apply-config'         options:           config:             showCreateButton: true       condition:         type: 'has-permission'         expectedValue: true         options:           resource: 'urn:my-resource'           operation: 'create'

Condition Types

has-permission

Checks if the user has a specific permission.

Options:

resource (REQUIRED) - Resource name
operation (REQUIRED) - Operation name

Example:

condition:   type: 'has-permission'   expectedValue: true   options:     resource: 'urn:my-resource'     operation: 'create'

has-some-permissions

Checks if the user has any of the specified permissions.

Options:

Array of permission objects:
- resource (REQUIRED) - Resource name
- operation (REQUIRED) - Operation name

Example:

condition:   type: 'has-some-permission'   expectedValue: true   options:     - resource: 'urn:my-resource'       operation: 'access'     - resource: 'urn:my-resource-2'       operation: 'access'

system-setting

Checks a system setting value.

Options:

settingName (REQUIRED) - Setting name

Example:

condition:   type: 'system-setting'   expectedValue: 'my-dev-system-name'   options:     settingName: 'customerName'

Recipes

Add a New Menu Item to the Activities Menu

Manifest:

ui:   components:     - id: 'feature-x.my-settings'       type: 'left-menu-item'       parentId: 'Activiteitenmenu'       config:         text: 'My Settings'         order: 0         icon: '<svg...</svg>'         command:           name: 'open-iframe-view'           data:             url: 'https://my-app.com/my-settings-page'

Add a New Menu Group and Menu Item

Manifest:

ui:   components:     - id: 'feature-x.new-menu-group'       type: 'left-menu-group'       config:         text: 'My Feature'         order: 0      - id: 'feature-x.my-settings-menu-item'       type: 'left-menu-item'       parentId: 'feature-x.new-menu-group'       config:         text: 'My Settings'         order: 0         icon: '<svg....</svg>'         command:           name: 'open-iframe-view'           data:             url: 'https://my-app.com/my-settings-page'

Add a Custom Tab to the Candidate Details Page

Manifest:

ui:   components:     - id: 'feature-x.my-new-tab-in-candidate-details'       type: 'tab'       parentId: 'candidate-details.tabpanel'       config:         text: 'My Tab In Candidate'         url: 'https://my-app.com/?entityId={{_id}}&entityKind={{_kind}}&tenant={{tenant}}'

Add a Custom Tab to the Calendar Page

Manifest:

id: 'feature-x' name: 'MARKETPLACE.FEATURE-X.NAME' description: 'MARKETPLACE.FEATURE-X.DESCRIPTION'  ui:   components:     - id: 'feature-x.custom-tab-in-calendar-id'       parentId: 'calendar.tabpanel'       type: 'tab'       config:         text: 'New Tab'         url: 'https://my-app.com/?tenant={{tenant}}'

Remove Component Based on User Permissions

Manifest:

ui:   components:     - id: 'feature-x.restricted-tab'       type: 'entity-details-tab'       parentId: 'candidate-details.tabpanel'       config:         text: 'Tab'       filters:         - action:             type: 'remove'           condition:             type: 'has-permission'             expectedValue: false             options:               resource: 'urn:my-feature:my-resource'               operation: 'access'

Add Component with Multi-Language Support

Manifest:

ui:   translations:     - key: 'MARKETPLACE.FEATURE-X.MENU_ITEM_TEXT'       values:         en_US: 'English text'         nl_NL: 'Nederlandse tekst'    components:     - id: 'feature-x.new-menu-item'       type: 'left-menu-item'       parentId: '...'       config:         text: 'MARKETPLACE.FEATURE-X.MENU_ITEM_TEXT'         # ...

Add Translations for Feature Name and Description

Manifest:

id: 'feature-x' name: 'MARKETPLACE.FEATURE-X.NAME' description: 'MARKETPLACE.FEATURE-X.DESCRIPTION'  ui:   translations:     - key: 'MARKETPLACE.FEATURE-X.NAME'       values:         en_US: 'My awesome feature name'         nl_NL: 'Mijn geweldige featurenaam'      - key: 'MARKETPLACE.FEATURE-X.DESCRIPTION'       values:         en_US: 'My awesome feature description'         nl_NL: 'Mijn geweldige functiebeschrijving'

Add Item to Topbar Quick Access Panel

Manifest:

ui:   components:     - id: 'feature-x.new-topbar-item'       type: 'button'       parentId: 'quick-access-panel'       config:         icon: '<svg width="24px" height="24px".....'         order: 0         command:           name: 'open-iframe-view'           data:             url: 'https://my-app.com/my-settings-page'

Need help? Contact the Carerix support team for assistance with your integration.

Invoicing in Carerix

Checklist Carerix Configuration

Carerix Seamless for Mobile - Dashboard

Carerix Seamless for Mobile - Activities

Carerix REST API

How to integrate into Carerix UI

How to integrate into Carerix UI

Table of Contents

Section Structure

Supported Locales

Component Types

Left Menu Group

Left Menu Item

Custom Tab

Background Agent

Commands

Structure

Command Types

open-iframe-view

open-entity-details

open-entity-preview

open-entity-overview

update-menu-item-info

Component Filters

Structure

Action Types

remove

remove-property-from-path

apply-config

Condition Types

has-permission

has-some-permissions

system-setting

Recipes

Add a New Menu Item to the Activities Menu

Add a New Menu Group and Menu Item

Add a Custom Tab to the Candidate Details Page

Add a Custom Tab to the Calendar Page

Remove Component Based on User Permissions

Add Component with Multi-Language Support

Add Translations for Feature Name and Description

Add Item to Topbar Quick Access Panel