Purpose

To explain how to initialize the value of the slots of a compound component and its members.

Prerequisites

1. You are familiarized with the creation of compound components

Introduction

Sometimes it might be useful to initialize the value of a slot of a compound component or the slot of a member in order to assure some behavior when component is loaded. You can perform this initialization within the manifest file associated to your component, using the inits property of a compound component definition. Along the following sections we will explore this process and present some related important details.

Sample case

To clarify the initialization process, we will use a compound component which allow us to visualize a file written in markdown using its url. Let's call this component md-viewer.

Members description

The md-viewer is composed by the following members:

Both related components are available at the sandbox store.

Dataflow view

The dataflow view of our md-viewer component should look similar to the one shown below:

Component definition

The definition for this component in manifest should look as shown in the block below:

{
  "artifactId": "md-viewer",
  "description": "Compound to visualize a markdown file using its url",
  "runnables": [
    {
      "name": "demo",
      "path": "/demo/index.html",
      "description": "Demo app..."
    },
    {
      "name": "docs",
      "path": "/docs/index.html",
      "description": "Show the interface and dataflow of this component."
    }
  ],
  "resources": [
    "css/md-viewer.css"
  ],
  "dependencies": [
    {
      "webpackageId": "com.incowia.basic-html-components@1.0",
      "artifactId": "cubx-text-input"
    },
    {
      "webpackageId": "com.incowia.cubx-marked-element@1.0",
      "artifactId": "cubx-marked-element"
    }
  ],
  "slots": [
    {
      "slotId": "markdownUrl",
      "type": "string",
      "description": "Url of the MD file to be visualized",
      "direction": [
        "input"
      ]
    }
  ],
  "members": [
    {
      "memberId": "urlInput",
      "artifactId": "cubx-text-input"
    },
    {
      "memberId": "mdElement",
      "artifactId": "cubx-marked-element"
    }
  ],
  "connections": [
    {
      "connectionId": "urlCompoundToInputCon",
      "source": {
        "slot": "markdownUrl"
      },
      "destination": {
        "memberIdRef": "urlInput",
        "slot": "value"
      }
    },
    {
      "connectionId": "urlInputToMdCon",
      "source": {
        "memberIdRef": "urlInput",
        "slot": "value"
      },
      "destination": {
        "memberIdRef": "mdElement",
        "slot": "markdownUrl"
      }
    }
  ],
  "inits": []
}

Initializing slots

You can initialize the slots of a compound component or the slots of its members in the manifest definition using the inits property, which is an array of objects with the following structure:

Initializing compound slots

Let's say we want our md-viewer to load a MD file by default, this file contains a description of the cubx-marked-element component and is available online at: https://raw.githubusercontent.com/iCubbles/cubx-polymer-elements/master/webpackages/com.incowia.cubx-marked-element/README.md. As described above, when initializing compounds, the memberIdRef of inits property should not be defined, since the slots we want to initialize don't belong to a member. So we only need to set an init value for the markdownUrl as follows: 

{
  "artifactId": "md-viewer",
  ...
  "inits": [
    {
      "slot": "markdownUrl",
      "value": "https://raw.githubusercontent.com/iCubbles/cubx-polymer-elements/master/webpackages/com.incowia.cubx-marked-element/README.md",
      "description": "File to load by default by  the viewer."
    }
  ]
}

A working example

If you include the compound within a web page, the input field should have the url as value and the file should be visualized. The result should be similar to he one shown below,

Initializing member slots

Finally, we want the input field to have a label. To aim that, we should set an initial value for the label slot of the urlInput member; additionally the id should be initialized, so that the label and the input are related. Those values will be File Url and urlInput respectively. Now, we should extend the inits of the compound as follows:

{
  "artifactId": "md-viewer",
  ...
  "inits": [
	...
    {
 	  "slot": "label",
      "memberIdRef": "urlInput",
      "value": " File Url",
      "description": "Label for the input field"
    },
    {
      "slot": "id",
      "memberIdRef": "urlInput",
	  "value": "urlTextInput",
  	  "description": "Label for the input field"
	}
  ]
}

A working example

This time, if you include the compound within a webpage, the input field should have the defined label. Additionally, in order to test whether the id was set correctly, you can click on the label and the input field should gain focus. The result should be similar tot he one shown below: