Skip to main content

Component

The Component class is the base class for all Digideck components. It provides access to a components base state, and behavior

Properties​

id​

Description​

  • Returns the components unique id.

Return Value: String​

Code Example​

let componentId = this.id;

parentEntityType​

Description​

  • Returns the entity type of the parent element. root-slide, slide, or chapter.

Return Value: String​

Code Example​

let entityType = this.parentEntityType;

parentEntityId​

Description​

  • Returns the unique entity id of the parent element.

Return Value: String​

Code Example​

let entityType = this.parentEntityId;

isForegroundComponent​

Description​

Return Value: Boolean​

Code Example​

let isForegroundComponent = this.isForegroundComponent;

isBackgroundComponent​

Description​

Return Value: Boolean​

Code Example​

let isBackgroundComponent = this.isBackgroundComponent;

isDeckComponent​

Description​

  • Returns a true or false value depending if the component is a Deck component. Deck Components are visible on every slide in the Deck or Presentation.

Return Value: Boolean​

Code Example​

let isDeckComponent = this.isDeckComponent;

isSlideComponent​

Description​

  • Returns a true or false value depending if the component is a Slide component. Slide Components are only visible on the slide to which it was added.

Return Value: Boolean​

Code Example​

let isSlideComponent = this.isSlideComponent;

isRootSlideComponent​

Description​

  • Returns a true or false value depending if the component is a Root Slide component.

Return Value: Boolean​

Code Example​

let isRootSlideComponent = this.isRootSlideComponent;

isChapterComponent​

Description​

  • Returns a true or false value depending if the component is a Chapter component. Chapter components are visible on every slide in the chapter.

Return Value: Boolean​

Code Example​

let isChapterComponent = this.isChapterComponent;

positionType​

Description​

  • Returns the positionType for the layout. 'grid', 'stack', or 'anchor'. This is the setting for how components are positioned in the slide.

Return Value: String​

Code Example​

let positionType = this.positionType;

mobilePositionType​

Description​

  • Returns the mobile position type for layout. 'grid', 'stack', or 'anchor'.

Return Value: String​

Code Example​

let mobilePositionType = this.mobilePositionType;

defaultPositionType​

Description​

  • Returns the default position type for desktop layout. 'grid', 'stack', or 'anchor'.

Return Value: String​

Code Example​

let defaultPositionType = this.defaultPositionType;

isViewless​

Description​

  • Returns true if component is set to viewless, meaning it does not have a visual front end and is only logic.

Return Value: Boolean​

Code Example​

let isViewless = this.isViewless;

isLockedInEditor​

Description​

  • Returns true if component is locked in editor.

Return Value: Boolean​

Code Example​

let isLockedInEditor = this.isLockedInEditor;

isVisible​

Description​

  • Returns true if component is visible. Meaning it is not hidden by visibility settings or slide is not in view.

Return Value: Boolean​

Code Example​

let isVisible = this.isVisible;

Methods​

setComponentOption(attributeName, value)​

Description​

  • Sets the attribute attributeName with the value value on the component node.

Return Value: null​

Options:​

  • attributeName: String The attribute name being set.
  • value: String The value to which the attribute will be set.

Code Example​

this.setComponentOption(attributeName, value);

setJsonComponentOption(attributeName, value)​

Description​

  • Sets and encodes the attribute attributeName with the value value on the component node.

Return Value: null​

Options:​

  • attributeName: String The attribute name being set.
  • value: Object The value of which will be stringified and set as the attributes value.

Code Example​

this.setJsonComponentOption(attributeName, value);

getComponentOptions()​

Description​

  • Gets all the component attributes from the component node as key value pairs.

Return Value: Object​

Code Example​

this.componentOptions = this.getComponentOptions();

getStringComponentOption(attributeName)​

Description​

  • Gets the component attribute's value cast as a string with attributeName argument.

Return Value: String​

Options:​

  • attributeName: String The attribute name used to get attribute value.

Code Example​

this.componentOption = this.getStringComponentOption(attributeName);

this.getNumberComponentOption(attributeName)​

Description​

  • Gets the component attribute's value cast as a number with attributeName argument.

Return Value: Number​

Options:​

  • attributeName: String The attribute name used to get attribute number value.

Code Example​

this.componentOption = this.getNumberComponentOption(attributeName);

this.getBooleanComponentOption(attributeName, defaultValue)​

Description​

  • Gets the component attribute's value cast as a boolean with attributeName argument. and returns defaultValue if no current value.

Return Value: Boolean​

Options:​

  • attributeName: String The attribute name used to get attribute number value.
  • defaultValue: Boolean The default value returned if no current value set.

Code Example​

this.componentOption = this.getBooleanComponentOption(attributeName, false);

this.getJsonComponentOption(attributeName)​

Description​

  • Gets the component attribute's value cast as an Object with attributeName argument.

Return Value: Object​

Options:​

  • attributeName: String The attribute name used to get the JSON attribute value.

Code Example​

this.componentOption = this.getJsonComponentOption(attributeName);

this.setIsViewless(isViewless: Boolean)​

Description​

  • Tells the Component Layout Editor app that the component is viewless and it should not select it visually in the digideck as there is no layout. See also: Config property: isViewless

Return Value: Object​

Options:​

  • attributeName: String The attribute name used to get the JSON attribute value.

Code Example​

// in component-node-name.view.js
onInit() {
    this.setIsViewless(true);
}