Davinci Components

Overview


Components are units of functionality that are bundled together as a single unit, typically as a javascript module. Components are things like charts or tables, although they do not necessarily require a visual aspect.

Component Requirements


  • Config Object - the config object is the serialized form of the object. It contains all the information necessary to construct the component.
  • Component Module - The Component module exposes a function that takes a config object and returns a functioning component

Adding a Component


Adding a component to a blog or a workspace is easy, just by calling the $page.add method. 


await $page.add(config);

Sample Component


The following is a simple example of a fully functional component. Assume the following code is saved at the URL '/server/sample.js' 


export function constructor(config, options){
  this.config = config;
  alert('hello');
}


Then the following code adds the component 


$page.add({
  script:'/server/sample.js'						
})


This component doesnt do anything other than create an alert dialog on instantiation. However, it is a fully compliant component.

Component Requirements


There are basically three requirements when coding a component.

  • config - the config object is a Javascript object (or dictionary) that keeps the components state, this is, whatever information necessary to construct the component. This will include the URL where the code for the component is located, as well as style information and whatever else is needed to fully configure the component.
  • Constructor - a function to construct the component 

    
export function constructor(config, options){
  this.config = config;
}


    The function named "constructor" is an object constructor that takes a config as a parameter. The config should be set on the object itself as above. The options is an additional dictionary passed in by the platform that specifies additional options on the component. For simple components, this can usually be ignored.
  • lifecycle methods - these are a set of functions that the platform uses to manage the component

Component Config


The component config contains information needed by the platform to appropriately run the component. In addition, it should save whatever details are required by the component to run itself properly. That is, you should saved information about the state of teh component in the config. However, because the platform needs to save information in the config as well, there are only two properties available for components to save data in:

  • body


You are free to structure the data any way you wish, although typically these properties should be set as dictionaries that you can save information into.

The component script is provided in the "script" property of the config. This should be the URL of the javascript library (see above) that implements the component. When the component is added to the workspace or blog, the script is loaded and then an instance of teh component is instantiated by calling new on the "constructor" method, passing the config into the constructor.

If the component is a visual component that may have children elements (i.e. elements that can be inserted into them) then the config should have a property named "children" that is set to an empty array. This array will be populated with the configs of any child component inserted into the component itself.

For more information, see config spec