Skip to content

Placeholders

A unique feature of the Creator role is that it allows the user to define various Placeholders for every element which contain Constraints that can be individually set. Such constraints only apply to users with non-creator roles and define in which way such users are allowed to interact with this element.

For example, in the following image, an element has been defined as a Placeholder and the constraints have been set accordingly so that other users can only change its contents. The element is now selectable by default but cannot be deleted, styled or duplicated by users outside the role of Creator.

Defining Placeholders and setting Constraints

Placeholders can be defined by users with the Creator role from the element itself…

…or from the Inspector.

Constraints can then be set by opening the Placeholder menu. Additionally, Placeholders may also be removed from said menu, which means they are reverted back to regular non-editable elements.

By default, elements that were not defined as Placeholders by a Creator cannot be selected and modified by a non-creator user.

Identifying elements defined as Placeholders as a non-creator user

Users outside the role of Creator may interact with elements defined as Placeholders. To identify all of these elements users may click on the canvas to shortly highlight them.

Placeholder Behavior and Controls

supportsPlaceholderBehavior(id: DesignBlockId): boolean

Checks whether the block supports placeholder behavior.

  • block: The block to query.
  • Returns True, if the block supports placeholder behavior.
setPlaceholderBehaviorEnabled(id: DesignBlockId, enabled: boolean): void

Enable or disable the placeholder behavior for a block.

  • id: The block whose placeholder behavior should be enabled or disabled.
  • enabled: Whether the placeholder behavior should be enabled or disabled.
isPlaceholderBehaviorEnabled(id: DesignBlockId): boolean

Query whether the placeholder behavior for a block is enabled.

  • id: The block whose placeholder behavior state should be queried.
  • Returns the enabled state of the placeholder behavior.
setPlaceholderEnabled(id: DesignBlockId, enabled: boolean): void

Enable or disable the placeholder function for a block.

  • id: The block whose placeholder function should be enabled or disabled.
  • enabled: Whether the function should be enabled or disabled.
isPlaceholderEnabled(id: DesignBlockId): boolean

Query whether the placeholder function for a block is enabled.

  • id: The block whose placeholder function state should be queried.
  • Returns the enabled state of the placeholder function.
supportsPlaceholderControls(id: DesignBlockId): boolean

Checks whether the block supports placeholder controls.

  • block: The block to query.
  • Returns True, if the block supports placeholder controls.
setPlaceholderControlsOverlayEnabled(id: DesignBlockId, enabled: boolean): void

Enable or disable the visibility of the placeholder overlay pattern for a block.

  • block: The block whose placeholder overlay should be enabled or disabled.
  • enabled: Whether the placeholder overlay should be shown or not.
  • Returns An empty result on success, an error otherwise.
isPlaceholderControlsOverlayEnabled(id: DesignBlockId): boolean

Query whether the placeholder overlay pattern for a block is shown.

  • block: The block whose placeholder overlay visibility state should be queried.
  • Returns An error if the block was invalid, otherwise the visibility state of the block’s placeholder overlay pattern.
setPlaceholderControlsButtonEnabled(id: DesignBlockId, enabled: boolean): void

Enable or disable the visibility of the placeholder button for a block.

  • block: The block whose placeholder button should be shown or not.
  • enabled: Whether the placeholder button should be shown or not.
  • Returns An empty result on success, an error otherwise.
isPlaceholderControlsButtonEnabled(id: DesignBlockId): boolean

Query whether the placeholder button for a block is shown.

  • block: The block whose placeholder button visibility state should be queried.
  • Returns An error if the block was invalid, otherwise

Full Code

Here’s the full code:

// Check if block supports placeholder behavior
if (engine.block.supportsPlaceholderBehavior(block)) {
  // Enable the placeholder behavior
  engine.block.setPlaceholderBehaviorEnabled(block, true);
  const placeholderBehaviorIsEnabled =
    engine.block.isPlaceholderBehaviorEnabled(block);
}
// Enable the placeholder capabilities (interaction in Adopter mode)
engine.block.setPlaceholderEnabled(block, true);
const placeholderIsEnabled = engine.block.isPlaceholderEnabled(block);


// Check if block supports placeholder controls
if (engine.block.supportsPlaceholderControls(block)) {
  // Enable the visibility of the placeholder overlay pattern
  engine.block.setPlaceholderControlsOverlayEnabled(block, true);
  const overlayEnabled =
    engine.block.isPlaceholderControlsOverlayEnabled(block);


  // Enable the visibility of the placeholder button
  engine.block.setPlaceholderControlsButtonEnabled(block, true);
  const buttonEnabled = engine.block.isPlaceholderControlsButtonEnabled(block);
}