Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Platform:
Language:

Hierarchies

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify the hierarchy of blocks through the block API.

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

Manipulate the hierarchy of blocks#

Only blocks that are direct or indirect children of a page block are rendered. Scenes without any page child may not be properly displayed by the CE.SDK editor.

  • getParent(id): number|null returns the parent id of a block or null if the block does not have a parent.
  • getChildren(id): number[] returns an array containing the ids of the block's children. Children are sorted in their rendering order: Last child is rendered in front of other children.
  • insertChild(parentId: number, childId: number, position: number): void inserts a block as a child of another block. The position parameter indicates at which position in the list of children it should be inserted, 0 being the head of the list.
  • appendChild(parentId: number, childId: number): void inserts a block as a child of another block. This is similar to insertChild, but always appends the child as the last element in the list of children.

When adding a block to a new parent, it is automatically removed from its previous parent.

File:
engine.block.insertChild(page, block, 0);
const parent = engine.block.getParent(block);
const childIds = engine.block.getChildren(block);
engine.block.appendChild(parent, block);