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.
- Node.js
- cURL
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.
});
For more information, see the package reference for CanvasClient
.
curl -X 'GET' \
'https://uniform.app/api/v1/canvas-definitions?projectId=[!!! UNIFORM PROJECT ID !!!]' \
-H 'accept: application/json' \
-H 'x-api-key: [!!! UNIFORM API KEY !!!]'
For more information, see the API reference.
Get composition component definitions
This example demonstrates how to retrieve the definitions for composition components from a Uniform project.
- Node.js
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.
});
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.
- Node.js
- cURL
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}`);
});
});
For more information, see the package reference for CanvasClient
.
curl -X 'GET' \
'https://uniform.app/api/v1/canvas?projectId=[!!! UNIFORM PROJECT ID !!!]' \
-H 'accept: application/json' \
-H 'x-api-key: [!!! UNIFORM API KEY !!!]'
For more information, see the API reference.
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.
- Node.js
- cURL
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}`);
});
});
For more information, see the package reference for CanvasClient
.
curl -X 'GET' \
'https://uniform.app/api/v1/canvas?state=0&type=page&projectId=[!!! UNIFORM PROJECT ID !!!]' \
-H 'accept: application/json' \
-H 'x-api-key: [!!! UNIFORM API KEY !!!]'
For more information, see the API reference.