Create Advanced Components for Drag and Drop Templates

[DavidGreenberg]

Overview

Following this steps in this guide, you will create, configure and test an advanced component to use your drag and drop template.

If you have not already created a drag and drop template, please check this guide for instructions.

Create an Advanced Component

1. Use the File View Panel to navigate to the /Component Project/Component Library/Component Definitions folder in your site. You should see a few folders there already.

   

   
   
2. Select File > New > Model: Component Folder, enter a name and click Create.

   

3. In your component folder, select File > New > Model: Component.  Enter a name and click Create.
4. Using the action bar, go to the Form view and Insert this HTML into the Markup field

   <article>
   
       <header>
   
          <h1>{headline : Text}</h1>
   
           <div class="byline">by {author : Text}</div>
   
       </header>
   
       <p class="intro">{intro : Text}</p>
   
       {content : Wysiwyg}
   
   </article>

5. This HTML defines editable areas in your Markup as nested editable, components using the following syntax: {component name: component type}.  Component types include Text, Wysiwyg, Image among others.
6. Click the Save button to build your component.

   

Configure behavior of nested components

1. Once saved, be sure you are still in Form editing mode in your new advanced component.

   

2. Expand all the panels and scroll down to the bottom view the Component Details List
3. Customize the behavior of each component
   1. Headline - Make this a required field
   2. Author- Make this a required field, change the label to 'Author Name and Location'
   3. Intro - Leave this as is. It will use the default configuration
   4. Content - Make this required, include a short message about what can be included in this WYSIWYG field
4. Click the Save button to modify your component.

Define default content in your Advanced Component 

1. Select the Preview Content tab.
2. Enter content in each available field. This is the default content your users will see when they drag this component into a page.

   

3. Click Save  
4. Click Preview from the Action bar to see your content in context of the new experience

   

Test!

1. In the File View Panel, go back to your site root and open the test file you created using your drag and drop template.
2. Click the View menu and select the Editor workspace found under the Arrange Workspace submenu.  This will place the Blocks Panel on the right side of the UI.
3. Select Inline editing mode to see Content blocks
4. Click on the Advanced tab in the Blocks Panel
5. Find your new component and drag it into the page

   

Troubleshooting

• If your component does not show up in the Advanced content block panel , it's in the wrong folder.  Be sure it's not in the models folder or different site root