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.