Documentation Center

Creating Page Layout (Java)

Create a new Page Layout, for example to show navigation on the right-hand side instead of on the left-hand side.

Procedure

  1. Create a Page View to define the high level structure in HTML:
    1. In custom Area Views Folder, create a sub Folder called Page.
    2. Add a new View called NavOnRightPage using the following code:
      <!DOCTYPE html>
          <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
          <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
          <%@ taglib prefix="dxa" uri="http://www.sdl.com/tridion-dxa" %>
          <%@ taglib prefix="xpm" uri="http://www.sdl.com/tridion-xpm" %>
      
          <jsp:useBean id="pageModel" type="com.sdl.webapp.common.api.model.PageModel" scope="request"/>
          <jsp:useBean id="markup" type="com.sdl.webapp.common.markup.Markup" scope="request"/>
          <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
          <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
          <!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
          <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
      
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <title>${pageModel.title}</title>
              <c:forEach var="meta" items="${pageModel.meta.entrySet()}">
                  <meta name="${meta.key}" content="${meta.value}">
              </c:forEach>
              <link rel="stylesheet" href="${markup.versionedContent('/assets/css/main.css')}" type="text/css"/>
              <dxa:pluggableMarkup label="css"/>
              <script src="${markup.versionedContent('/assets/scripts/header.js')}"></script>
              <dxa:pluggableMarkup label="top-js"/>
              <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
              <!--[if lt IE 9]>
              <script src="${markup.versionedContent('/assets/scripts/ie.js')}"></script>
              <![endif]-->
          </head>
          <body>
              <div class="page-row page-row-expanded ${pageModel.htmlClasses}" >
                  <%
      			boolean noLeftBar = pageModel.getRegions().containsKey("Left-Navigation") ||
      			pageModel.getRegions().containsKey("Left");
      			int mainContainerSize = noLeftBar ? 3 : 12;
      			%>
      			<div class="row">
      				<% if (noLeftBar)
      				{
      				%>
      					<div class="col-sm-12 col-md-<%= mainContainerSize %>">
                              <dxa:regions exclude="Left-Navigation," containerSize="${mainContainerSize}"/>
                          </div>
      			    <%
      				}
      				%>
      					<div class="col-sm-12 col-md-3">
      						<dxa:region name="Left-Navigation" containerSize="3"/>
      						<dxa:region name="Left"  containerSize="3"/>  
      					</div>
                   </div>       
      		</div>
              
          </body>
      </html>
      

    The code takes the Left Navigation include and renders it in a quarter width column on the right of the Page. All other content is rendered in a three quarter width column on the left of the page.

  2. Create a Page Template that Editors can select when creating or editing pages to use this layout:
    1. In the Content Manager, make a copy of the Content Page Page Template in Building Blocks/Modules/Core/Editor/Templates and put it in Building Blocks/Modules/ModuleName/Editor/Templates (where ModuleName matches the name of the custom area you have created).
    2. Rename it Content Page with Right Navigation.
    3. Open the Page Template for editing.
    4. Edit the Page Template Metadata: update the Page View Name metadata field to match the name of the Area and Page View that you just created separated by a colon, for example MyCompanyExamples:NavOnRightPage.
    5. Save and close the Page Template.
  3. Republish the Publish Settings Page and recycle your Web application—see Refreshing Web application settings.
  4. Edit a Page and switch the layout to use your new Content Page with Right Navigation Page Template.
    When you Republish the Page, you will see that the navigation appears on the right.