Skip to main content

Component Settings Panel

Component Settings Panel is the gear icon tab that opens a panel on the right side of the presentation/deck editor which displays a form to configure settings on the currently selected component. It uses the Dynamic Input Form Config to display the form in the panel.

How to display form in Settings Panel​

Using onComponentSelected to listen for when the Component is selected, send a Dynamic Input Form Config to the Component Settings Panel using uiService.sendComponentSettingsPanelConfig to display the form in the settings panel

// in myComponent.edit.js
onComponentSelected() {
    digideckCore.uiService.sendComponentSettingsPanelConfig(this.id, myComponentSettingsConfig, initialValues);
}

How to update values in the Settings Panel​

To update a value in the Component Settings Panel without re-rendering the entire panel when settings are changed outside of the panel and need to be reflected in the panel inputs, use uiService.updateComponentSettingsPanelValues.

let updatedSettingsValues = {
    'my-component-setting-key': 'new-value'
}
// in myComponent.edit.js
onComponentSelected() {
    digideckCore.uiService.updateComponentSettingsPanelValues(this.id, updatedSettingsValues);
}

How do I Listen for Component Settings Panel Input Changes?​

onComponentSettingsInputValueChanged​

Using the hook, onComponentSettingsInputValueChanged you can listen for changes from the settings panel inputs and get their new values. The hook function has one argument that is an object with properties key and value.

  • key - key for input defined in dynamic input form for the input which most of the time is the same as the component option key.
  • value - value of key
  onComponentSettingsInputValueChanged({ key, value }) {
    if (key === options.IMAGE) {
      this.renderImage(value);
      return;
    }

    if (key === options.BACKGROUND_COLOR) {
      this.styleBackgroundColor(value);
      return;
    }

    // etc
  }