Developer 101 - Lab: Define and Create a Page Template with a Shared Module Zone

In this lab, we will create two working pages with a new Page Template using a Shared Module Zone. Using Shared Module Zones, you can ensure that any page created using that same Page Template will all share the same Modules (and their data) across each page. Changing the modules in that zone will propagate to all other pages that share that same Page Template.

Shared Module Zones are important to consider when architecting your pages as they can vastly improve your ability to manage your content. In this example, we will create a similar Three Column Template with an additional Feature Content Zone that will be a Shared Module Zone and span the width of the page.

1. In the Settings section of Agility, select Page Templates and click on New Page Template.

2. Name the template “Three Column Feature Template (Shared Feature)” select "Website" as the Digital Channel Type, select Relative URL as the Output Type and enter the Relative URL as “~/Views/Templates/ThreeColumnFeatureTemplate.cshtml”. C

3. Now click on the plus icon in  Module Zones , to add a New Module Zone.

4. Name the content zone “Feature Content Zone” with a reference name of “FeatureContentZone”.

5. Check off the checkbox labelled Shared Module Zone, this will enable the Feature Content Zone to be a Shared Module Zone.

6. Repeat step 4 to create your three columns “Left Content Zone”, “Main Content Zone" and "Right Content Zone", with appropriate reference names.
   
   

7. Click on Save & Close to complete the creation of the page template.

8. Now we will need to create the partial view file in the website. In Visual Studio, add a new partial view in the ~/Views/Templates directory called “ThreeColumnFeatureTemplate.cshtml”.

9. In the CSHTML source of the partial view, add four divs to act as containers for your module zones. Add some styles or classes so you identify them.
   
   

   <div class="container theme-showcase three-column-template contentWrap" role="main">
       <div class="row">
   
           <div id="full-col" class="col-12-md"></div>
   
       </div>
       
       <div class="row">
   
           <div id="left-col class="col-md-4"></div>
   
           <div id="mid-col" class="col-md-4"></div>
   
           <div id="right-col" class="col-md-4"></div>
   
       </div>
   </div>
   
   

10. Within each div, call the RenderContentZone method, passing the appropriate reference name as a parameter.
    
    

    <div class="container theme-showcase three-column-template contentWrap" role="main">
        <div class="row">
    
            <div id="full-col" class="col-12-md">
                @{Html.RenderContentZone("FeatureContentZone");}
            </div>
    
        </div>
        
        <div class="row">
    
            <div id="left-col class="col-md-4">
                @{Html.RenderContentZone("LeftContentZone");}
            </div>
    
            <div id="mid-col" class="col-md-4">
                @{Html.RenderContentZone("MainContentZone");}
            </div>
    
            <div id="right-col" class="col-md-4">
                @{Html.RenderContentZone("RightContentZone");}
            </div>
    
        </div>
    </div>
    

11. Back in Agility, navigate to Pages. Click on Page on the ‘Add’ to create a new page. Enter the Menu Text as “Shared Feature Page 1”, and the Page Title and Page Name will auto-populate.

12. From the Page Template drop down list, select “Three Column Feature Template (Shared Feature)”, and click Save to save the new page.

13. You will see the content zones that we created in the right hand side of the page. Click on the +Add button to add a new module to each of the zones. Locate and select Rich Text Area in the list, and enter some HTML in the rich text editor that appears. Click on Save & Close to save this module.

14. Repeat step 11-13, creating additional unique pages based on this Page Template and note the Shared Feature Content Zone.

15. Now, in a browser, navigate to your pages and note they all share the same Feature Content Zone while maintaining their own unique content in the Left, Main, and Right Content Zones.