This document outlines the structure and configuration details of the $.manifest.ui section. Make sure you have also read our article How to integrate with Carerix Marketplace

Section Structure

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

Path: $.components

Type: array
Description: List of component definitions

Example:

- id: 'my-feature.component-id'
   type: 'left-menu-item'
   config:
     text: 'New Menu Item'

Path: $.components[*].id
- Type: string
- Description: - REQUIRED - Unique identifier of the component. To prevent conflicts, prefix all IDs with a unique feature prefix.
- Example:
```
'my-feature-id.my-compnent-id'
```
Path: $.components[*].type
- Type: string
- Description: - REQUIRED - The type of component being injected. See Component Types.
- Example:
```
'left-menu-item'
```
Path: $.components[*].parentId
- Type: string
- Description: The ID of the parent component into which the new component will be injected.
- Example:
```
'candidate-details.tabpanel'
```
Path: $.components[*].config
- Type: object
- Description: Configuration settings specific to the component type (see Supported Component Types)
- Example:
```
text: 'New Menu Group'
order: 2
```

Path: $.components[*].filters

Type: array
Description: List of filters that conditionally modify or remove the component. (see Supported Filter Types)

Example:

- action:
     type: 'remove'
   condition:
     type: 'has-permission'
     expectedValue: false
     options:
       resource: 'urn:cx/activities:data/tasks'
       operation: 'access'

Path: $.translations

Type: array
Description: List of translation objects

Example:

- key: 'MY_FEATURE.NAME'
  values:
     en_US: 'My Feature Name'
     nl_NL: 'Mijn Functienaam'

Path: $.translations[*].key
- Type: string
- Description: - REQUIRED - Translation key - To prevent conflicts with translations from other features it is advisable to prefix all translation keys with a unique feature prefix.
- Example:
```
'MY_FEATURE.NAME'
```
Path: $.translations[*].values
- Type: object
- Description: - REQUIRED -
  [locale]: string object
  
  en_US is always required.
  
  If a user's language is not found in the values object, the system will default to en_US.
- Example:
```
en_US: 'My Feature'
nl_NL: 'Mijn Functienaam'
```

ℹ️Full list of 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 list below shows 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: N/A

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 Supported 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
    Where {entityName} is one of the following:
    email note, event, task, systemactivity, match, candidate, vacancy, talentpool, lead, opportunity, contact, company, publication, placement, officeemployee
  - Calendar page: calendar.tabpanel
  - Example for Entity Details: candidate-details.tabpanel
  - Example for Entity Overviews: candidate-overview.tabpanel
  - Example for Calendar Page: calendar.tabpanel

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: N/A

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

Type: open-iframe-view
Data: url - REQUIRED - Iframe URL
- The URL supports variables, allowing you to include context information:
  {{ tenant }} - name of the tenant
- Example: url: 'https://my-app.com/?tenant={{tenant}}'
Description: Open data.url in the main viewport

Example:

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

Type: open-entity-details
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)
Description: Open data.entity details page in the main viewport
Example:

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

Type: open-entity-preview
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)
Description: Open data.entity preview modal

Example:

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

Type: open-entity-overview
Data:
- entity - REQUIRED - Entity name (e.g., Candidate)
Description: Opens data.entity overview(entity list) page

Example:

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

Type: update-menu-item-info
Data:
- menuItemId (REQUIRED) - ID of menu item to update
- counter - Counter value
Description: Updates a menu item

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
`action`	object	Action for the filter to execute
`action.type`	string	Action type
`action.options`	object	Options for the action type
`condition`	object	The condition under which the `action` is executed.
`condition.type`	string	Condition type
`condition.options`	object	Options of the condition type
`condition.expectedValue`	boolean / string / number	The expected value of a condition to be met

Examples:

type: 'apply-config'
options: 
  config:
    text: 'Conditional Text'

type: 'has-permission'
expectedValue: false
options:
  resource: 'urn:cx/activities:data/tasks'
  operation: 'access'

Action Types

Type: remove
Options: none
Description: removes the component if the condition is met.

Example:

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

Type: remove-property-from-path
Options:
- path (REQUIRED) - Array<string | number> - Path to the property within the config object
Description: removes a specific property from 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'

Type: apply-config
Description: 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

Type: has-permission
Description: Checks if the user has a specific permission.
Options:
- resource : string - REQUIRED - Resource name
- operation : string - REQUIRED - Operation name

Example:

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

Type: has-some-permissions
Description: Checks if the user has any of the specified permissions.
Options:
- Array of permission objects:
  - [*].resource : string - REQUIRED - Resource name
  - [*].operation : string - 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'

Type: system-setting
Description: Checks a system setting value.
Options:
- settingName : string - 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'

UI Result

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'

UI Result

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}}'

UI Result

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}}'

UI Result

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'     # This is the key you need to use in the component instead of actual 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'  # Here you specify the translation key from translations[*].key
        ...

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'

UI Result

Want to learn more about our partnerships? Send us an email - support@carerix.com

Invoicing in Carerix

Carerix Seamless for Mobile - Activities

Introducing Webhooks in Carerix

Carerix REST API

How to integrate with Marketplace

How to integrate into Carerix UI

Section Structure

Component Types

Left Menu Group

Left Menu Item

Custom Tab

Background Agent

Commands

Structure

Command Types

Component Filters

Structure

Examples:

Action Types

Condition Types

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