Skip to main content

UI Service

The UI Service provides way to communicate with the digideck presentation/deck editor

Methods​

sendComponentOptionsUpdatedMessage(componentId, options)​

Description​

  • Sends a message to the UI that the component options were updated. This will bring up the save and revert buttons, and updates the component in memory.

Return Value: null​

Options:​

  • componentId: String The id of the component updated.
  • options: Object The updated component data.

Code Example​

digideckCore.uiService.sendComponentOptionsUpdatedMessage(componentId, options);

setParentDomain()​

Description​

  • Sets the parent domain on the window object.

Return Value: null​

Code Example​

digideckCore.uiService.setParentDomain();

openComponentSettingsModal(componentId)​

Description​

  • Opens the component settings modal.

Return Value: null​

Options:​

  • componentId: String The component id for the component settings modal.

Code Example​

digideckCore.uiService.openComponentSettingsModal(componentId);

displayComponentQuickMenu(componentId, quickMenuConfig, options = {})​

Description​

  • Displays a component's quick menu in the presentation editor.

Return Value: null​

Options:​

  • componentId: String The ID of the component to display a quick menu for.
  • quickMenuConfig: Object The quick menu's config. See: quickMenuConfig
  • options: Object Additional data to pass the menu.

Code Example​

let config = [
    { type: 'color', key: 'background-border', value: this.backgroundBorderColor },
    { type: 'button', key: 'hide-bg-btn', value: this.hideBg }
];
digideckCore.uiService.displayComponentQuickMenu(this.id, config);

updateQuickMenu(componentId, updatedKeyValues)​

Description​

  • Updates Quick Menu Values

Return Value: null​

Options:​

  • componentId: String The ID of the component that the quick menu is for.
  • updatedValues: Object The updated key value pairs for the quick menu

Code Example​

let updatedValues = {
    'background-color': '#ffffff'
};
digideckCore.uiService.updateQuickMenu(this.id, updatedValues);

hideComponentQuickMenu(componentId, options = {})​

Description​

  • Hides a component's quick menu in the presentation editor.

Return Value: null​

Options:​

  • componentId: String The ID of the component to display a quick menu for.
  • options: Object Additional data to pass along.

Code Example​

digideckCore.uiService.hideComponentQuickMenu(this.id);

sendComponentSettingsPanelConfig(componentId, dynamicInputFormConfig, initialValues, options = {})​

Description​

  • sends a dynamicInputPanelConfig to the Component Settings Panel for it to display. Use this method when a component is selected to display the correct settings form.

Return Value: null​

Options:​

  • componentId: String The ID of the component to display a quick menu for.
  • dynamicInputFormConfig: Object A configuration object for the component settings panel dynamic form. See our Dynamic Input Form Config documentation for how to construct a dynamicInputFormConfig.
  • initialValues: Object The initial state of the input form key/values. Provide an object where the keys match keys in the input form config.
  • options: Object Additional options to pass along.

Code Example​

let imageGalleryFormConfig = {
    inputs: [
        {
            type: 'color',
            key: 'image-gallery-background-color',
            label: 'Background Color',
            title: 'Background Color'
        }
    ]
};

let initialValues = {
    'image-gallery-background-color': '#000000'
};
digideckCore.uiService.sendComponentSettingsPanelConfig(this.id, imageGalleryFormConfig, initialValues);

updateComponentSettingsPanelValues(componentId, componentSettingsValues, options = {})​

Description​

  • Used to update sepecific values in the component settings panel using key/values without re-rendering the settings panel. Use when a component settings is updated outside of the settings panel to update the settings panel to reflect that change.

Return Value: null​

Options:​

  • componentId: String The ID of the component to display a quick menu for.
  • componentSettingsValues: Object Key value pairs for the input values to update in the component settings panel where the key in the object matches a key in the current component settings panel dynamic input form config that was sent using uiService.sendComponentSettingsPanelConfig.
  • options: Object Additional options to pass along.

Code Example​

let componentSettingsValues = {
    'image-gallery-background-color': '#ffffff',
    'image-gallery-images': newImages
};
digideckCore.uiService.updateComponentSettingsPanelValues(this.id, componentSettingsValues);

sendComponentSettingsConfig(componentId, componentSettingsValues, options = {})​

warning

DEPRECATED: use sendComponentSettingsPanelConfig instead

Description - this method is depricated and as been renamed to sendComponentSettingsPanelConfig for consistencey​