Uniform Canvas

Uniform Canvas provides composition services to your applications. It also incorporates other services such as classification and personalization into the composition process.

What is Canvas?

Uniform Canvas allows business users to have complete control over the presentation layer and build compositions from the components sourcing content from multiple Headless Content Management Systems and Headless Ecommerce Platforms. Such compositions are built without any changes required to the front-end code, and edge-based personalization and A/B testing features are seamlessly integrated.

Uniform Canvas comes with a notion of a Component Library for the front-end developers to register components with, powerful SDK to integrate Canvas with the existing modern JavaScript applications.

In order to understand the value of Canvas, consider the following three major use cases as key pillars:

Layout layer (the "neck") for the Headless, API-first world
Using Headless Content Management Systems and / or Headless e-commerce allow developers to use any modern tool they want on the front-end and deliver solutions that are performant out of the box, highly scalable, and secure. The developers have the option to use the Jamstack approach (or Jamstack Hybrid) and deploy to a modern platform, like Netlify, Vercel or Cloudflare. This makes both developers and IT happy.
Unfortunately, this leaves the marketers and non-technical users in a bad place - they are unable to maintain control over the presentation layer. Code changes are needed to build new pages or experiences. Business users are not able to use the best-of-breed headless technologies to launch new landing pages / campaigns without developer involvement and integration cost. They also often cannot preview the content in context.
This sets the Enterprise adoption of Headless technologies back in terms of flexibility and capabilities and limits the ability to achieve fast time to market and overall user productivity. Canvas brings the balance back into the modern MACH/Jamstack/Headless world, where business users now have the ability to create and manage experience-level entities (pages, screens, etc.) without requiring to make code changes.
Integrated personalization and A/B testing that is dead simple
Digitally ambitious marketers did not give up on the idea of doing personalization and A/B testing at scale. The current generation of Digital Experience Platforms (DXPs) failed to support this use case without compromising performance and operational cost/scale.
The ability to configure personalization and testing in the same place where the presentation layer is built is an incredible boost to productivity and simplification of getting started with these capabilities.
Multi-source experience composition
As both the idea of a Composable DXP and MACH architecture is getting traction; this prescribes that there is no single system of record for content. A Headless CMS of choice owns the marketing content while e-Commerce system of choice owns the product data, the media assets are owned by a Digital Asset Management system, so on.
It is cumbersome and often impossible for non-technical users to compose an experience (page, mobile screen, kiosk screen) sourced from multiple places (marketing content from one Headless Content Platform and product data from another Headless Commerce Platform).

Localization

Format

Localization is set up in the Canvas user interface. The following is an example of the JSON object that represents a slot with components localized for two locales (i.e. en-us and dk-dk):

{
  "parameters": {},
  "type": "$localization",
  "slots": {
    "localized": [
      {
        "type": "event",
        "parameters": {
          "name": {
            "type": "text",
            "value": "Sankt Hans Aften"
          },
          "locale": {
            "type": "localeSelect",
            "value": "dk-dk"
          }
        }
      },
      {
        "type": "event",
        "parameters": {
          "name": {
            "type": "text",
            "value": "Summer Solstice"
          },
          "locale": {
            "type": "localeSelect",
            "value": "us-en"
          }
        }
      }
    ]
  }
}

The description above is represented in Uniform in the following way:

Configuration

Localization is configured within Uniform Canvas. For information on how to configure localization, see the localization guide.

Parameter types

The following parameter types are always available.

Parameter type	Description
Checkbox	Used for values where the user can select yes/no, true/false, on/off, etc.
Dropdown List	Used for values where the user can select one value from a predefined list of options.
JSON Data	Used for any kind of JSON based data structures.
Link	Used for links to Project map nodes.
Number	Used for numeric values.
Text	Used for text values.

tip

When you add an integration to your project, new parameter types are often added to your project. This is not the case for all integrations, but it is true for most. So if you are looking for a parameter type that is not included in the list of parameter types, check to see if you have added the required integration.

tip

Unlike the parameter types added by integrations, these parameters do not require enhancers because the value the user provides is the value the front-end component should use.

Checkbox

The Checkbox parameter type has no configuration settings. It simply displays a checkbox for the user along with the Parameter Name value.

How Uniform stores the value

{
  "type": "checkbox",
  "value": true
}

The Dropdown List parameter lets a user select a single value from a list options that are assigned to the parameter. It is used when you want to limit the options that are available to the user.

This parameter type has the following configuration settings:

Name Description

Options

Name	Description
Options	The values that populate the dropdown list. The individual options are separated by the pipe character `\|`. For example, if you want the user to select from "top", "middle" and "bottom", you would use the following value: `top\|middle\|bottom` This parameter type also support cases where the value used is different from the value the user selects from. For example, if you want the user to select from "greater than", "equal to" and "less than", but you want the selected value to be ">", "=" or "<", you would use the following value: `greater than:>\|equal to:=\|less than:<`
Required	Indicates whether the value is required when the component is used.

The values that populate the dropdown list. The individual options are separated by the pipe character |.

For example, if you want the user to select from "top", "middle" and "bottom", you would use the following value:

top|middle|bottom

This parameter type also support cases where the value used is different from the value the user selects from. For example, if you want the user to select from "greater than", "equal to" and "less than", but you want the selected value to be ">", "=" or "<", you would use the following value:

greater than:>|equal to:=|less than:<

Required Indicates whether the value is required when the component is used.

How Uniform stores the value

{
  "type": "select",
  "value": "######################"
}

JSON Data

The JSON Data parameter lets you store any data that is serialized in valid JSON.

This parameter type has the following configuration settings:

Name	Description
Expected JSON schema	By providing a JSON schema you can provide validation rules to specify the expected shape and value types of the parameters JSON data. The JSON schema needs to follow the Draft 7 specification.
Required	Indicates whether the value is required when the component is used.

Name

Description

Expected JSON schema

By providing a JSON schema you can provide validation rules to specify the expected shape and value types of the parameters JSON data.

The JSON schema needs to follow the Draft 7 specification.

Required

Indicates whether the value is required when the component is used.

Validation example

If you want to ensure that the JSON data represents a valid product and its attributes (name, SKU, description, price, currency) then you would enter this JSON schema into the Expected JSON schema field:

  {
    "type": "object",
    "required": ["name", "sku"],
    "properties": {
      "name": {
        "type": "string"
      },
      "sku": {
        "type": "string"
      },
      "description": {
        "type": "string"
      },
      "price": {
        "type": "number"
      },
      "currency": {
        "type": "string"
      }
    },
    "description": "A simple product schema"
  }

How Uniform stores the value

{
  "type": "json",
  "value": {
    /* any JSON data */
  }
}

Link

The Link parameter lets a user create a link to a node in a project map. This link will automatically update when the path of the node is updated by moving the node to another location in the node tree.

This parameter type has the following configuration settings:

Name	Description
Required	Indicates whether setting a link is required when the component is used.

How Uniform stores the value

{
  "type": "link",
  "value": {
    "path": "/path/of/node",
    "nodeId": "<some-id-value>",
    "projectMapId": "<some-id-value>"
}

info

For now the link parameter only supports interal links to project map nodes. Support for other link types (like external URLs, email) is considered for future releases.

Number

The Number parameter lets a user enter a numeric value.

This parameter type has the following configuration settings:

Name	Description	Notes
Required	Indicates whether the value is required when the component is used.
Integer	Use this when the number is a whole number (e.g. 3, 17, 101, 5000).
Decimal	Use this when the number is a fractional number (e.g. 12.44, 400.00, 1044.80).
Number of decimal places	This controls wow precise a number can the user enter.	This option is only available for decimal numbers.
Minimum	The user cannot enter a value less than this.	Optional
Maximum	The user cannot enter a value greater than this.	Optional

How Uniform stores the value

{
  "type": "number",
  "value": "####.##"
}

tip

Notice that the value is stored as a string, not as a number.

Text

The Number parameter lets a user enter a text value.

This parameter type has the following configuration settings:

Name	Description	Notes
Required	Indicates whether the value is required when the component is used.
Allow multi-line text	If ticked, the user enters the text into a multi-line text box.	Multi-line text is saved in a string with the line-break character `\n` used to separate lines.
Lines count	Maximum number of lines of text the user can enter.	Only available when the allow multi-line text option is enabled.
Validation Regex (optional)	Validation logic that limits the text the user can enter.	This uses the regular expression features in the user's browser.
Validation Regex Message	Message displayed to the user when the input does not match the validation regex.	Only used if the validation regex is specified.

How Uniform stores the value

{
  "type": "text",
  "value": "######################"
}

Custom integration locations

The specific places in Uniform where your custom integration appears are configured using the Location Configuration field from the team integration configuration form. The following describes the JSON object used to specify this configuration.

－ Attributes

baseLocationUrlurl

The prefix for relative urls specified in the locations section.

locationsobject

The places in Uniform where the custom integration is used.

＋ show child attributes

For more information, see Locations.

Example

{
  "baseLocationUrl": "https://myintegration.app",
  "locations": {
    "canvas": {
      "parameterTypes": [
        {
          "type": "parameter-1",
          "editorUrl": "/parameter-1-editor",
          "displayName": "Parameter 1",
          "configureUrl": "/parameter-1-config"
        }
      ]
    },
    "install": {
      "description": [
        "This describes what the integration does."
      ]
    },
    "settings": {
      "url": "/settings"
    }
  }
}

Uniform Canvas

What is Canvas?​

Localization​

Format​

Configuration​

Parameter types​

Checkbox​

How Uniform stores the value​

Dropdown List​

How Uniform stores the value​

JSON Data​

Validation example​

How Uniform stores the value​

Link​

How Uniform stores the value​

Number​

How Uniform stores the value​

Text​

How Uniform stores the value​

Custom integration locations​

What is Canvas?

Localization

Format

Configuration

Parameter types

Checkbox

How Uniform stores the value

Dropdown List

How Uniform stores the value

JSON Data

Validation example

How Uniform stores the value

Link

How Uniform stores the value

Number

How Uniform stores the value

Text

How Uniform stores the value

Custom integration locations