Skip to main content
Platform
Language

Modify Properties

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify block properties 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.

UUID#

A universally unique identifier (UUID) is assigned to each block upon creation and can be queried. This is stable across save & load and may be used to reference blocks.

getUUID(id: DesignBlockId): string

Get a block's UUID.

  • id: The block to query.

Reflection#

For every block, you can get a list of all its properties by calling findAllProperties(id: number): string[]. Properties specific to a block are prefixed with the block's type followed by a forward slash. There are also common properties shared between blocks which are prefixed by their respective type. A list of all properties can be found in the Blocks Overview.

findAllProperties(id: DesignBlockId): string[]

Get all available properties of a block.

  • id: The block whose properties should be queried.
  • Returns A list of the property names.

Given a property, you can query its type as an enum using getPropertyType(property: string): 'Bool' | 'Int' | 'Float' | 'String' | 'Color' | 'Enum' | 'Struct'.

getPropertyType(property: string): PropertyType

Get the type of a property given its name.

  • property: The name of the property whose type should be queried.
  • Returns The property type.

The property type 'Enum' is a special type. Properties of this type only accept a set of certain strings. To get a list of possible values for an enum property call getEnumValues(enumProperty: string): string[].

getEnumValues<T = string>(enumProperty: string): T[]

Get all the possible values of an enum given an enum property.

  • enumProperty: The name of the property whose enum values should be queried.
  • Returns A list of the enum value names as string.

Some properties can only be written to or only be read. To find out what is possible with a property, you can use the isPropertyReadable and isPropertyWritable methods.

isPropertyReadable(property: string): boolean

Check if a property with a given name is readable

  • property: The name of the property whose type should be queried.
  • Returns Whether the property is readable or not. Will return false for unknown properties
isPropertyWritable(property: string): boolean

Check if a property with a given name is writable

  • property: The name of the property whose type should be queried.
  • Returns Whether the property is writable or not. Will return false for unknown properties

Generic Properties#

There are dedicated setter and getter functions for each property type. You have to provide a block and the property path. Use findAllProperties to get a list of all the available properties a block has.

Please make sure you call the setter and getter function matching the type of the property you want to set or query or else you will get an error. Use `getPropertyType` to figure out the pair of functions you need to use.
findAllProperties(id: DesignBlockId): string[]

Get all available properties of a block.

  • id: The block whose properties should be queried.
  • Returns A list of the property names.
setBool(id: DesignBlockId, property: string, value: boolean): void

Set a bool property of the given design block to the given value.

  • id: The block whose property should be set.
  • property: The name of the property to set.
  • value: The value to set.
getBool(id: DesignBlockId, property: string): boolean

Get the value of a bool property of the given design block.

  • id: The block whose property should be queried.
  • property: The name of the property to query.
  • Returns The value of the property.
setInt(id: DesignBlockId, property: string, value: number): void

Set an int property of the given design block to the given value.

  • id: The block whose property should be set.
  • property: The name of the property to set.
  • value: The value to set.
getInt(id: DesignBlockId, property: string): number

Get the value of an int property of the given design block.

  • id: The block whose property should be queried.
  • property: The name of the property to query.
  • Returns The value of the property.
setFloat(id: DesignBlockId, property: string, value: number): void

Set a float property of the given design block to the given value.

  • id: The block whose property should be set.
  • property: The name of the property to set.
  • value: The value to set.
getFloat(id: DesignBlockId, property: string): number

Get the value of a float property of the given design block.

  • id: The block whose property should be queried.
  • property: The name of the property to query.
  • Returns The value of the property.
setDouble(id: DesignBlockId, property: string, value: number): void

Set a double property of the given design block to the given value.

  • id: The block whose property should be set.
  • property: The name of the property to set.
  • value: The value to set.
getDouble(id: DesignBlockId, property: string): number

Get the value of a double property of the given design block.

  • id: The block whose property should be queried.
  • property: The name of the property to query.
  • Returns The value of the property.
setString(id: DesignBlockId, property: string, value: string): void

Set a string property of the given design block to the given value.

  • id: The block whose property should be set.
  • property: The name of the property to set.
  • value: The value to set.
getString(id: DesignBlockId, property: string): string

Get the value of a string property of the given design block.

  • id: The block whose property should be queried.
  • property: The name of the property to query.
  • Returns The value of the property.
setColor(id: DesignBlockId, property: string, value: Color): void

Set a color property of the given design block to the given value.

  • id: The block whose property should be set.
  • property: The name of the property to set.
  • value: The value to set.
getColor(id: DesignBlockId, property: string): Color

Get the value of a color property of the given design block.

  • id: The block whose property should be queried.
  • property: The name of the property to query.
  • Returns The value of the property.
setEnum<T extends string = string>(id: DesignBlockId, property: string, value: T): void

Set an enum property of the given design block to the given value.

  • id: The block whose property should be set.
  • property: The name of the property to set.
  • value: The enum value as string.
getEnum<T extends string = string>(id: DesignBlockId, property: string): T

Get the value of an enum property of the given design block.

  • id: The block whose property should be queried.
  • property: The name of the property to query.
  • Returns The value as string.
type HorizontalTextAlignment = 'Left' | 'Right' | 'Center'

The horizontal text alignment options.

type VerticalTextAlignment = 'Top' | 'Bottom' | 'Center'

The vertical text alignment options.

setGradientColorStops(id: DesignBlockId, property: string, colors: GradientColorStop[]): void

Set a gradient color stops property of the given design block.

  • id: The block whose property should be set.
  • property: The name of the property to set.
getGradientColorStops(id: DesignBlockId, property: string): GradientColorStop[]

Get the gradient color stops property of the given design block.

  • id: The block whose property should be queried.
  • property: The name of the property to query.
  • Returns The gradient colors.
setSourceSet(id: DesignBlockId, property: string, sourceSet: Source[]): void

Set the property of the given block.

  • id: The block whose property should be set.
  • property: The name of the property to set.
  • sourceSet: The block's new source set.
getSourceSet(id: DesignBlockId, property: string): Source[]

Get the source set value of the given property.

  • id: The block that should be queried.
  • property: The name of the property to query.
  • Returns The block's source set.
addImageFileURIToSourceSet(id: DesignBlockId, property: string, uri: string): Promise<void>

Add a source to the sourceSet property of the given block. If there already exists in source set an image with the same width, that existing image will be replaced.

  • id: The block to update.
  • property: The name of the property to modify.
  • uri: The source to add to the source set.