Application Manifest - app.json

The app.json file is a JSON file that contains the definition of your app. This file is used to define the application's metadata, such as the application name, description, and version, as well as the application's entry point and other settings. This document provides a generalized overview of the available properties.

Root Properties

Property	Type	Description
name	string	Identifier of the application, must be unique. Avoid spaces inside.
version	string	Version of the application - each version you deploy must be unique.
display_name	string	Display name of the application used in the app management listing and on the list of canvas components to add.
description	string	Brief description of the application.
icon	string	Icon associated with the application. All font-awesome icons are supported in the format far fa-example.
provide	Array<'ui' | 'account_browser' | 'scheduler' | 'postcall' | 'crm_shape'>	Optional list of features or modules provided by the application. This allows to provide specific types of apps like a postcall form or event default user interface.
require	Array<'crm'>	Optional list of features required by the application to work. At the moment only crm is supported. This means the app will only show up on instances with CRM enabled (when available). Note: CRM integration is optional and available upon request.
type	string	Type of the application (at the moment only web is supported).
module	Record<('ui_app' | 'canvas' | 'dsr' | 'admin_instance' | 'canvas_section_execution'), ModuleConfiguration>	App module definition object where key is the type of module and value is its configuration.
hooks	Record<('on_canvas_updated' | 'on_section_list_updated'), { entry: string }>	App hook definition object where key is the type of hook and value is its entry point configuration.

INFO

If app doesn't contain any module or hook definitions it is considered a sidebar app (module: { ui_app: { enabled: true } }).

Module Configuration

Some applications include a module property, which provides additional configuration details.

The structure of the module property can vary based on the application's type.

INFO

At the moment it is recommended that you use only one type of module configuration per application.

Canvas Configuration

Property	Type	Description
enabled	boolean	Whether the canvas module is enabled.
entry	string	Entry point file for the canvas app (e.g., index.html). Will be loaded as the iframe source.
auto_install	boolean	Whether the app should be auto-added to all newly created canvases.
headless	boolean	Whether the app operates in headless mode. This means it is invisible in presentation mode but visible in edit mode. Useful for apps only the sales rep should see.
defaults	Record<'dimensions' | 'settings', any>	Default dimensions for the canvas (see below).
settings	SettingsConfiguration	App instance settings configuration object (local). Those are separate from app.config.json (global).

Default Dimensions

Property	Type	Description
width	string	Default width of the canvas component.
height	string	Default height of the canvas component.

Canvas Section Execution Configuration

Property	Type	Description
enabled	boolean	Whether the canvas module is enabled.
entry	string	Entry point file for the canvas app (e.g., index.html). Will be loaded as the iframe source.
defaults	Record<'dimensions' | 'settings', any>	Default dimensions for the canvas (see below).

Default Dimensions

Property	Type	Description
width	string	Default width of the section execution component.
height	string	Default height of the section execution component.

DSR Configuration

Property	Type	Description
enabled	boolean	Whether a canvas the component should be enabled or not in the DSR. All other properties come from the canvas module.

Admin Instance Configuration

Property	Type	Description
enabled	boolean	Whether the admin instance is enabled.

Hook Configuration

Property	Type	Description
entry	string	Entry point file for the hook (e.g., index.html). Will be loaded as the iframe source.

Examples

Simple sidebar app

{
  "type": "web",
  "name": "hello-world",
  "display_name": "Hello World",
  "description": "Simple Hello World application",
  "icon": "far fa-hand-wave",
  "version": "1.0.0"
}

Simple sidebar app

{
  "type": "web",
  "name": "hello-world",
  "display_name": "Hello World",
  "description": "Simple Hello World application",
  "icon": "far fa-hand-wave",
  "version": "1.0.0",
  "provide": [
    "ui:menu"
  ]
}

Canvas app with a instance settings

{
  "name": "example-app",
  "display_name": "Example App",
  "description": "Example application",
  "version": "0.0.1",
  "icon": "far fa-example",
  "type": "web",
  "module": {
    "canvas": {
      "enabled": true,
      "auto_install": false,
      "settings": {
        "sections": [
          {
            "label": "General Settings",
            "fields": [
              {
                "type": "checkbox",
                "name": "enable_feature",
                "label": "Enable Feature",
                "help_text": "Enable or disable the feature."
              }
            ]
          }
        ]
      },
      "defaults": {
        "width": "100%",
        "height": "200px",
        "settings": {
          "enable_feature": true
        }
      }
    }
  }
}

Shopping cart app that is visible on canvas and dsr

{
  "name": "example-shopping-cart",
  "display_name": "Example Shopping Cart",
  "description": "Example shopping cart application",
  "icon": "fal fa-shopping-cart",
  "type": "web",
  "version": "0.0.1",
  "require": [
    "crm"
  ],
  "provide": [],
  "module": {
    "dsr": {
      "enabled": true
    },
    "canvas": {
      "enabled": true,
      "headless": false,
      "auto_install": false,
      "entry": "index.html",
      "defaults": {
        "dimensions": {
          "width": "100%",
          "height": "220px"
        }
      }
    }
  }
}

Canvas hook app

{
  "name": "example-hook-app",
  "display_name": "Example App",
  "description": "Example application",
  "version": "0.0.1",
  "icon": "far fa-example",
  "type": "web",
  "hooks": {
    "canvas": {
      "on_section_list_update": {
        "entry": "index.html"
      }
    }
  }
}

Instance admin app

{
  "type": "web",
  "name": "admin-app",
  "display_name": "Admin app",
  "description": "Simple admin application",
  "icon": "far fa-screwdriver-wrench",
  "version": "1.0.0",
  "module": {
    "admin_instance": {
      "enabled": true
    }
  },
}

Canvas Section Execution app

{
  "type": "web",
  "name": "admin-app",
  "display_name": "Canvas Section Execution app",
  "description": "Process products in canvasses",
  "icon": "far fa-screwdriver-wrench",
  "version": "1.0.0",
  "module": {
    "canvas_section_execution": {
      "enabled": true
    }
  },
}