Class CustomControl

constructor

• new CustomControl(id: string): CustomControl

  Parameters

  • id: string

  Returns CustomControl

Readonlyid

renderFn

• set renderFn(callback: CustomCtrlRenderFn): void

  This gives custom code full control over what is rendered inside the control. When setting this function, custom code is responsible to actively render/set the content/innerHTML of the given element inside the renderFn.

  The configurator will not render any content inside the control when a renderFn is set.

  For the renderFn to work, the property Custom code controlled needs to be enabled on the control. The renderFn will be ignored when Custom code controlled is not enabled.

  Good to know:

  • Setting a new renderFn does not trigger a re-render.
    Use render if you want to trigger a re-render after setting a new renderFn.
  • There can only be one renderFn per control. Setting a new one will override the existing one.
  • The renderFn will be called in the following scenarios:
    • Everytime the control is being shown. This is on initial show as well as when toggling its visibility.
    • When forcing a render via the render method.
  • Difference to onRendered:
    • The renderFn is meant to control the rendered content whilst onRendered is a classic event listener which allows you to perform certain actions like installing event listener on DOM nodes etc. after the content has been rendered.
    • You can install multiple onRendered callbacks.
    • The renderFn and onRendered callbacks can be used side by side.
  • The renderFn should always be used instead of manually manipulating the DOM via vanilla JS.
    When manipulating the DOM outside of the renderFn, your changes can always be overridden by the configurator.
    Using the renderFn ensures that your changes are applied in a stable and predictable way.

  Parameters

  • callback: CustomCtrlRenderFn

  Returns void

getElement

• getElement(): HTMLElement | undefined

  Returns HTMLElement | undefined

onRendered

• onRendered(
      callback: OnRenderedCallback<HTMLDivElement>,
  ): CallbackUnsubscribeOption

  This allows custom code to register callbacks in which it can perform certain actions like installing event listeners on DOM nodes or adding CSS classes etc. after the control has been rendered.

  The control can be rendered in the following scenarios:

  • Everytime the control is being shown. This is on initial show as well as when toggling its visibility.
  • When forcing a render via the render method.
  • When the value of the control's HTML property changes e.g. via Hive in controls.

  !!! Important !!!

  See OnRenderedCallback for important information regarding the element which is passed to the callback.

  !!! Important !!!

  This is not meant to be used for manipulating the rendered content of the control besides simple, non-structural/-behavioral changes like adding CSS classes or data attributes etc.

  For manipulating/controlling the rendered content, use the renderFn instead.

  See renderFn for more differences between the two.

  Parameters

  • callback: OnRenderedCallback<HTMLDivElement>

  Returns CallbackUnsubscribeOption

render

• render(renderFn?: CustomCtrlRenderFn): Promise<void>

  Forces a re-render of the control.

  Parameters

  • OptionalrenderFn: CustomCtrlRenderFn

    Convenience param which allows setting the CustomControl.renderFn and triggering a render in one call. The given renderFn will be permanently installed and will override any previously set CustomControl.renderFn.

  Returns Promise<void>

setProperty

• setProperty<T extends "cssClasses" | "customCodeControlled" | "rawHtml">(
      propertyName: T,
      value: SetCustomCtrlPropertyValue[T],
  ): void

  Set arbitrary properties of the custom control.
  Behavior is the same as when setting the respective property in the configurator editor.

  Some properties are not allowed to be set here because they have a dedicated method which should be used instead.
  E.g. setting visible is not allowed because CustomControlV1.setVisible should be used instead.

  Type Parameters

  • T extends "cssClasses" | "customCodeControlled" | "rawHtml"

  Parameters

  • propertyName: T
  • value: SetCustomCtrlPropertyValue[T]

  Returns void

setVisible

• setVisible(visible: boolean): Promise<void>

  Parameters

  • visible: boolean

  Returns Promise<void>