Skip to main content

Conditional Placeholders (Pro)

Placeholders represent locations where a user can place a step and are visible by default. For various reasons, you may want to hide them. You can hide all placeholders or only some of them. Additionally, you can show specific placeholders depending on the type of step being dragged.

Example

Check the Conditional Placeholders Example.

Conditional Creation​

A the beginning you need to create a function that determines if a placeholder should be created or not. The function has two parameters:

  • sequence - the sequence where the placeholder is located,
  • index - the index of the placeholder in the sequence.
function canCreatePlaceholder(
  sequence: Sequence,
  index: number
): boolean {
  return index % 2 === 0;
}

If the function returns false the placeholder will not be rendered. If it returns true the placeholder will be rendered.

Conditional Visibility​

To control the visibility of the placeholder depending on the type of step being dragged, you need to create another function. This function is optional. The function has 4 parameters:

  • sequence - the sequence where the placeholder is located,
  • index - the index of the placeholder in the sequence,
  • draggingStepComponentType - the type of the component of the step being dragged,
  • draggingStepType - the type of the step being dragged.
function canShowPlaceholder(
  sequence: Sequence,
  index: number,
  draggingStepComponentType: string,
  draggingStepType: string
): boolean {
  return draggingStepType === 'save';
}

If the function returns false the placeholder will not be shown. If it returns true the placeholder will be shown.

Pro Only

This part of the article is available only for subscribers of the pro package. Buy the pro package to get an access to this part.

If you have already subscription please log in.