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

DXM Developer Knowledge Base

Create a template with Drag and Drop Zones

Overview

By following this step by step guide, you will create a site root, a template that supports drag and drop zones, and a test file to verify your work.

 

Create a Site Root
  1. At the root of your CMS, select File > New > Site Root

     

  2. Enter a name and select the option to install a Component Project
    Select Component Library

     

  3. The installation will take a few minutes to complete. Check the Activity Monitor for progress
    Activity Monitor

 

Create a Template
  1. Once complete, open your site root. You'll see an Assets, Site Config and Component Project folder as well as some sample files.
  2. Open the Component Project/Templates folder
    Templates folder

     

  3. Select File > New > Template and enter a name you'll remember. This will create a template with input and output templates files
    Drag and Drop template

     

  4. Add this code to your input.aspx file
    <%
    Input.ShowDragDrop("Header Drag Drop Zone", "header");
    
    Input.ShowDragDrop("Main Drag Drop Zone", "main");
    
    Input.ShowDragDrop("Footer Drag Drop Zone", "footer");
    %>
     
  5. Add this code to your output.aspx file
    <main>
    <section>
    <% Out.ShowDragDrop("header"); %>
    </section>
    <section>
    <% Out.ShowDragDrop("main"); %>
    </section>
    <section>
    <% Out.ShowDragDrop("footer"); %>
    </section>
    </main>

     

  6. Save your files and you verify there are no compilation errors.

 

Create a test file
  1. Go back to your site root and create a test file by selecting File > New > File

     

  2. Enter a name and select the template you just created.
  3. Select a workflow and select Create.
    Test Page

     

 

Test!
  1. Double click to open in Preview mode. You will see a message letting you know to switch to Inline Editing Mode to enable Drag and Drop
    Working Preview

     

  2. Select Inline and the available zone will be visible in your test page. In the Blocks panel, the available content blocks will turn blue.
    Working Inline

     

  3. Drag some blocks into the zones. You can also drag images from the DAM panel into the page.
  4. Save to confirm the template is implemented properly.

 

Troubleshooting Tips
  1. If you don't see the message in Preview mode or content blocks do not turn blue, the drag and drop functionality is not active. To trigger, Force Reload from the refresh button in the left corner of the workspace.
    Force Reload

     

  2. If Force Reload does not respond, your instance may need a configuration update. Contact support and make a request to enable content blocks
  3. If you see an error when saving your test page please note that as of May 2018, templates with drag and drop zone are only supported in site root folders at the root of your CMS instance. Templates with drag and drop zones created in nested site roots will see an error when saving, so the error may be related to the location of your site root folder.
Version history
Revision #:
1 of 1
Last update:
‎04-11-2019 07:36 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.