Developer 101 - Lab: Define and Create a Page Template

In this lab, we will create a working page with a new Page Template. You will need to have the Agility Content Manager open in a web browser and our Sample Site open in Visual Studio. At the end of the lab, you will have a three column template with a page containing some rich text.

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

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

3. Click on the plus sign in Module Zones, to create a new Module Zone.

4. Name the content zone “Left Content Zone” with a reference name of “LeftContentZone”
   
   

5. Repeat step 3-4 to create "Main Content Zone" and "Right Content Zone", with appropriate reference names.

6. Click on OK and then Save & Close to complete the creation of the page template.

7. Now we will need to create the Razor template file (.cshtml) in the website. In Visual Studio, add a new partial view in the ~/Views/Templates directory called “ThreeColumnTemplate.cshtml”.

8. In the CSHTML source of the partial view, add three 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="left-col" style="border: 1px solid green" class="col-md-4"></div>
   
           <div id="mid-col" style="border: 1px solid blue" class="col-md-4"></div>
   
           <div id="right-col" style="border: 1px solid red" class="col-md-4"></div>
   
       </div>
   </div>
   

9. 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="left-col" style="border: 1px solid green" class="col-md-4">
               @{Html.RenderContentZone("LeftContentZone");}
           </div>
   
           <div id="mid-col" style="border: 1px solid blue" class="col-md-4">
               @{Html.RenderContentZone("MainContentZone");}
           </div>
   
           <div id="right-col" style="border: 1px solid red" class="col-md-4">
               @{Html.RenderContentZone("RightContentZone");}
           </div>
   
       </div>
   </div>
   

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

11. From the Page Template drop down list, select “Three Column Template”, and click Save to save the new page.
    
    

12. 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 and return to the underlying page.
    
    

13. Now, in a browser, navigate to the http://localhost:{port-number}/my-new-page, where you will see the HTML that you just entered into the rich text area modules.