Skip to main content

Composition

This section provides information on how to programmatically interact with components and compositions defined using Uniform Canvas.

Components

This section provides examples of how to interact with components defined in a Uniform project.

Get all component definitions

This example demonstrates how to retrieve all component definitions from a Uniform project.

import { CanvasClient } from '@uniformdev/canvas';

const client = new CanvasClient({
apiKey: '[!!! UNIFORM API KEY !!!]',
projectId: '[!!! UNIFORM PROJECT ID !!!]',
});

client.getComponentDefinitions().then(result => {
const { componentDefinitions } = result;
//Do something with the definitions.
});
info

For more information, see the package reference for CanvasClient.

Get composition component definitions

This example demonstrates how to retrieve the definitions for composition components from a Uniform project.

import { CanvasClient } from '@uniformdev/canvas';

const client = new CanvasClient({
apiKey: '[!!! UNIFORM API KEY !!!]',
projectId: '[!!! UNIFORM PROJECT ID !!!]',
});

client.getComponentDefinitions().then(result => {
const definitions = result
.componentDefinitions
.filter(d => d.canBeComposition);
//Do something with the definitions.
});
info

For more information, see the package reference for CanvasClient.

Compositions

This section provides examples of how to interact with compositions defined in a Uniform project.

Get all compositions

The following example demonstrates how to list all compositions that are in a published state.

import { CanvasClient } from '@uniformdev/canvas';

const client = new CanvasClient({
apiKey: '[!!! UNIFORM API KEY !!!]',
projectId: '[!!! UNIFORM PROJECT ID !!!]',
});

client.getCompositionList().then(result => {
//
//Since the options specified may result in
//multiple compositions being returned, you
//can expect the property "compositions" to
//be available.
const { compositions } = result;
//
//An array of compositions was returned.
console.log(`${compositions.length} compositions found.`);
let i=0;
compositions.forEach(member => {
const {composition} = member;
console.log(`${++i}. ${composition._name}`);
});
});
info

For more information, see the package reference for CanvasClient.

Get compositions by type

The following example demonstrates how to get all compositions that are based on a specific component type and are in a draft state.

import { CanvasClient } from '@uniformdev/canvas';

const client = new CanvasClient({
apiKey: '[!!! UNIFORM API KEY !!!]',
projectId: '[!!! UNIFORM PROJECT ID !!!]',
});

client.getCompositionList({
state: 0,
type: 'page',
}).then(result => {
//
//Since the options specified may result in
//multiple compositions being returned, you
//can expect the property "compositions" to
//be available.
const { compositions } = result;
//
//An array of compositions was returned.
console.log(`${compositions.length} compositions found.`);
let i=0;
compositions.forEach(member => {
const {composition} = member;
console.log(`${++i}. ${composition._name}`);
});
});
info

For more information, see the package reference for CanvasClient.