Developers
cancel
Showing results for 
Show  only  | 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

    kA01W000000PZc1SAG_en_US_1_0.png

     


     

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

    kA01W000000PZc1SAG_en_US_1_1.png

     


     

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

     

 

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

    kA01W000000PZc1SAG_en_US_1_3.png

     


     

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

    kA01W000000PZc1SAG_en_US_1_4.png

     


     

  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

    kA01W000000PZc1SAG_en_US_1_5.png

     


     

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

     

     kA01W000000PZc1SAG_en_US_1_6.png

     

     


     

 

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

    kA01W000000PZc1SAG_en_US_1_7.png

     


     

  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.

    kA01W000000PZc1SAG_en_US_1_8.png

     


     

  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.

    kA01W000000PZc1SAG_en_US_1_9.png

     

  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.
Labels (1)