Component Config

Your component.config.json file is a configuration file that sets options/details for your component. The file is created based on your answers when you run ddcomponents init but can be modified after initialization.

Structure

Your component.config.json file should look similar to the example below:

component.config.json

{
  "nodeName": "my-sample-component",
  "title": "My Sample Component",
  "description": "This is a sample component I am using for docs.",
  "editFormConfig" : {
          "header" : "Sample Component Header",
          "size" : "md",
          "saveButtonLabel" : "Save",
          "cancelButtonLabel" : "Cancel",
          "inputs" : [ 
              {
                  "type" : "image",
                  "key" : "sampleimage",
                  "label" : "Sample Image Input",
                  "title" : "Sample Image Input",
                  "options" : {
                      "multiple" : false
                  },
                  "condition": {
                    "delay": 5
                  }
              }
          ]
    },
    "defaultOptions": {
        "text": "Enter Content Here..."
    },
    "searchableProperties": ['my-text-option']
}

nodeName

is a camel-case string that will reflect how your element will render on the DOM. e.g. if your nodeName is "digideck-component" the output when rendering to the DOM will be:

<digideck-component example-option="value"></digideck-component>

title

is the title of your component, which will be displayed in the Digideck Component Store among other places.

description

describes your component. Give a short description of what your component's purpose is.

storeVersion

type: Number < 1 | 2 >

set what version of the DIGIDECK component store this should be available in. Value should be either 1 or 2.

searchablePropertes

Array<string>

An array of Component Options strings to be flagged as searchable for the SlideSearchingService. This is for Components that render text that we want that Component's rendered text to searched for matching strings when searching all slides.

testHarnessOptions

an object that has has configurations for DIGIDECK test harness.

property	Description
port	sets the custom port for hosting your digideck component.

isViewless

Boolean. Set to true to indicate that your component does not have a view and is only logic, so it doesn't need to be selected by the layout editor. If you set this to true. You also need to run this.setIsViewless(true) in your onInit lifecycle function

defaultOptions

see defaultOptions

editFormConfig

warning

DEPRECATED: use Component Settings Panel to show component settings in the panel or use the Quick Menu to display a settings button in conjunction with the dynamicInputFormService to display a form in a modal.

see editFormConfig