Purpose

Demonstrate how to edit a compound properties within the dataflow-view. We will concentrate on the edition of the members' properties.

First steps

We are going to compose a component that will allow the visualization of external documents written using Markdown language. Then we will edit it within the BDE 2.0. This compound will be composed by the cubx-text-input and the cubx-marked-element components.

First you need to perform the following steps:

1. Open the latest version of BDE at: https://www.cubbles.world/bde/bde@2.0.0-SNAPSHOT/bde/index.html. 
2. If needed, change to the bde-store (Check Changing the store at this tutorial if necessary).
3. Add the cubx-text-input and the cubx-marked-element (both version 1.0) as members using the dataflow-view.
4. Then connect the value output slot of cubx-text-input to the markdownUrl input slot of cubx-marked-element, again within the dataflow-view.

After that, you should get the a component with the following dataflow:

And the application view should look as follows:

You can test our compound using the url of a file written using markdown language, e.g. https://raw.githubusercontent.com/iCubbles/cubx-polymer-elements/master/webpackages/com.incowia.cubx-marked-element/README.md. Copy and paste the url in the input field, press the enter key and you will see that the file will be loaded and displayed.

Modifying webpackage properties

Now using the Webpackage Explorer (see image below) you can edit webpackage's meta information and the compound's properties.

Webpackage meta information

Set the meta information of our webpackage, using option 1 in the image above, as follows:

Then, save the changes.

Compound properties

We will edit the Artifact Id and the Description of the component using the Compound properties dialog, option 2 on image above, as follows:

If you check the members and the connections properties the changes you made in First steps section should be reflected. They look similar to the image below:

Modifying members properties

Now we will edit our compound's members properties within the dataflow-view, perform the following steps:

1. Right click on the cubx-text-input component. 
2. Click on the edit option on the context menu that appears. 

3. Overwrite the default values on the Member properties dialog as follows:

   Property	Value
   Member id	urlInput
   Display name	Url Input
   Description	Input to set the markdown url file to be displayed

This process is illustrated by the image below:

Initializing member's slots

Now we will set an initial value to the label slot of the urlInput member (cubx-text-input). To aim that, you should:

1. Click on the label slot within the daCaflow-view, it would be easier if you zoom in using the mouse scroll. 
2. Click on the edit option on the displayed context menu. 

3. Set the following values on the Slot properties of label dialog:

   Property	Value
   Initial value	Url
   Description of the initialisation	Label for the input element

This process is illustrated by the image below:

You can also initialize the placeholder slot by setting the following values:

If you switch to the application-view, the input text now should have a label and a placeholder.

We may also want to load a file by default. Thus, repeat the same process for the value slot of the urlInput member to set the following properties:

The url above address to a markdown file, where the use of the cubx-marked-element is explained.

Final result

Switch to the application-view, the markdown file will be loaded by default, and our component is ready