Developers
cancel
Showing results for 
Search instead for 
Did you mean: 

DXM Developer Knowledge Base

Create Advanced Components for Drag and Drop Templates

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.

    Component librart folder

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

    Component Library folder

  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.

    User-added image

 

Configure behavior of nested components
  1. Once saved, be sure you are still in Form editing mode in your new advanced component.

    User-added image

  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.

    User-added image

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

    User-added image

     

 

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

    User-added image

     

 

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
Version history
Revision #:
1 of 1
Last update:
‎04-11-2019 07:37 AM
Updated by:
 
Contributors
Looking for more?
Ask in Discussions
Developers

Peer-to-peer support  and answers on developing CMS templates, modifying privacy scripts or building integrations.

Digital Experience Management

Find answers and ask questions on content management, personalization and targeting.

Digital Quality Management

Find answers and ask questions on WCAG and SEO quality management.

Digital Governance

Find answers and ask questions on consent and monitoring solutions.