Developer 101 - Web Content Management

Web Content Management is used as a foundation for websites, and other “http delivered” content.  In simple terms, it consists of lists of content items (such as blog post, news articles etc.) and pages (which in turn consist of templates and modules).

The following diagram illustrates the relationship between these components:

Pages

Pages in Agility are the main representation of a website’s structure. You can see the existing structure of our Sample Site by clicking on the Page icon on the left navigation panel.

In general, there are three simple types:

• Page – this is an actual web page with a template and module zones. There are a few basic properties

  • Page Type – this can be either Static or Dynamic Page. A static page is what we consider a ‘normal’ page; it has a fixed name and contains a number of modules with relatively simple content. A dynamic page implements URL routing and is linked to a Dynamic Page List. This will be discussed in more detail later on.
  • Menu Text – this is the ‘link’ text that will be used when the page appears on a navigation control or sitemap
  • Page Title – this is the text that appears in “title” element of the raw HTML, and is therefore used as the main title in the browser
  • Page Name – this is the name of the page within the context of the website: for example, a page with the name “home” would be accessed via the url “~/home”
  • Page Template – this is the actual web page that is used as basis for building up the page content. It contains modules zones that can have modules added to them. We’ll get to the details on this later

• Folder – this is a virtual folder to group pages. It cannot be accessed as a resource in its own right. This also has a couple of basic properties:

  • Menu Text – the same as in a page, this is the text that appears as the directory on links in a navigation control or on a sitemap
  • Folder Name – similar to the page name above, this is the name that represents the directory in the context of a website: so a folder named “news” means that all pages below it would start with “~/news/”

• Link – this can be used to place a link in the map to another page, a document, or to a completely different website

  • Menu Text – the same as in pages and folders, this is the text that appears as the directory on links in a navigation control or on a sitemap
  • Link Name – this will form the URL of the link in site map, relative to its position in the page tree
  • Link – this is the target resource to which the link will redirect. Agility allows you to pick another page within the page tree, a document within the document tree or a completely custom URL
  • Target – the target window to open the link into

Page Templates

In a typical web solution based on Agility, there will be a number of templates used to define the layout of a page. You can see how we have set up our Sample Site in Agility, by selecting the Settings link on left-hand panel then clicking on Page Templates. Here, you will see multiple page templates. This means that we have a single template used to define the layout of the home page, and various other templates used to define the layout of all the other pages in the website. You can have as many templates as you choose, but it is good practice to narrow down the designs as much as possible so that content editors have a concise list to choose from.

A page template consists of three basic properties in the General Settings tab (click on any of the page templates to open its properties dialog):

• Name – this is simply a title used to identify the template
• Output Type – You can choose where to store your Page Template options include a Relative URL or Inline Code
• Relative URL – this is a URL relative to your website path (if not storing in Inline Code) that locates the view (.cshtml file) of the template.
• Digital Channel Type – this defines which type of channel the template can be used on (such as Website or Mobile Site). For the purpose of this training, we will always use Website.

A page template then has a list of Module Zones - these are the areas in which a content editor can add modules when creating a page. In the actual .cshtml view, the module is called with Razor syntax and passes the module zone's reference name as a parameter. On a typical two column template, this might consist of a Main Content Zone and a Sidebar Content Zone. Each of these in turn has a number of properties:

• Display Name – similar to the Name of the title, this is simply the identifier of the zone that the content editor will see when they are creating a page.
• Reference Name – this is what you will use when defining the div elements on your physical template page. The reference name will be passed to the RenderContentZone() method, and used by Agility to work out where to render each module.
• Shared Module Zone – this optionally specifies the Content Zone as a shared set of modules. This means that any page that uses this Page Template will always have the exact same modules in this Content Zone. If you add, remove, or change a module within this Content Zone on any page, then that change will propagate to all other pages that share this Page Template. This is often used in cases where a section of a site will always share the same modules in a specified content zone and allows you to have a central point of updating these modules without having to change it manually on multiple pages.
• Default modules – this is often used by Architects to define a default structure of a set of pages. For example, you may have page template that defines a certain area of a website like News, and you may want to ensure a certain module appears on each of these pages (like “Top Stories” or “Most Read”) – in this case, you would add this module to the default modules list here. Content editors can always remove the modules if they don’t want them on a particular page.