Text Variables

let config = {
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets',
};

CreativeEngine.init(config).then(engine => {
  const variableNames = engine.variable.findAll();
  variableNames.forEach(name => {
    engine.variable.remove(name);
  });
  engine.variable.setString('my_custom_variable', 'IMG.LY');
  const name = engine.variable.getString('my_custom_variable');

  const block = engine.block.create('graphic');
  engine.block.referencesAnyVariables(block);
});

let config = {
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets',
  i18n: {
    en: {
      'variables.my_custom_variable.label': 'My Variable',
    },
  },
};

CreativeEditorSDK.create('#cesdk_container', config).then(cesdk => {
  const variableNames = cesdk.engine.variable.findAll();
  variableNames.forEach(name => {
    cesdk.engine.variable.remove(name);
  });
  cesdk.engine.variable.setString('my_custom_variable', 'IMG.LY');
  const name = cesdk.engine.variable.getString('my_custom_variable');
  cesdk.createDesignScene();
});

In this example, we will show you how to use the CreativeEditor SDK’s CreativeEngine to modify variables through the variable API. The variable API lets you set or get the contents of variables that exist in your scene.

Functions

findAll(): string[]

Get all text variables currently stored in the engine.

• Returns Return a list of variable names

setString(key: string, value: string): void

Set a text variable.

• key: The variable’s key.
• value: The text to replace the variable with.

getString(key: string): string

Set a text variable.

• key: The variable’s key.
• Returns The text value of the variable.

remove(key: string): void

Destroy a text variable.

• key: The variable’s key.

referencesAnyVariables(id: DesignBlockId): boolean

Checks whether the given block references any variables. Doesn’t check the block’s children.

• id: The block to inspect.
• Returns true if the block references variables and false otherwise.

Localizing Variable Keys (CE.SDK only)

You can show localized labels for the registered variables to your users by adding a corresponding label property to the object stored at i18n.<language>.variables.<key>.label in the configuration. Otherwise, the name used in variable.setString() will be shown.

Full Code

Here’s the full code:

let config = {
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets',
};

CreativeEngine.init(config).then(engine => {
  const variableNames = engine.variable.findAll();
  variableNames.forEach(name => {
    engine.variable.remove(name);
  });
  engine.variable.setString('my_custom_variable', 'IMG.LY');
  const name = engine.variable.getString('my_custom_variable');

  const block = engine.block.create('graphic');
  engine.block.referencesAnyVariables(block);
});