Add Related News

Previous Step

Configure the Search Page

At this point, all features in the sprint scope are implemented except for Related News. To allow authors to add related news links to a news article, you need to update both the content model and the template for news articles.

Review the Web Design

Open the web design in your browser and navigate to a news article detail page. The right column displays a block with related news links.

The two-column main content area is not included in this sprint. The News Detail page currently uses a single-column layout.

However, Related News is within the sprint scope. Add this feature to the News Detail template.

Add a Related News Links Field to the News Document Type

1. Open Bloomreach Content at http://localhost:8080/cms/ and log in using username admin and password admin.
2. On the dashboard, click To the content to open the Content application.
3. In the left column, select Document Types from the dropdown and open the gogreen folder. This displays the list of document types.

4. Select the News Item document type and click Edit to open it in the document type editor.
5. In the right column, under Compound Field, select Link to add a new Link field.

6. Select the new Link field (named "mirror" by default). Its properties appear in a form in the right column.
7. Set the Path property to relatednews. This value must be unique within the document type.
8. Enable the Multiple checkbox to allow authors to add more than one link.

9. Set the Default Caption property to Related News. This label appears above the field in the editor.

10. Click Done to close the document type editor.
11. Click Type actions, then Commit to apply your changes. The Link field is now available for all News documents.

Add Related News Links to a News Document

1. In the left column, select Documents from the dropdown and navigate to the news folder.
2. Open a news document in the editor. The new Related News field appears at the bottom. No links are present yet, but the + Add button is available.

3. Click + Add below Related News. An empty item appears. Click Select to open a dialog.
4. In the dialog, browse to the news folder, select a different news document, and click OK to add the link.
5. Add one or two more links as needed. Close the document and publish your changes.

At this stage, related news links are not visible on the website. The template must be updated to display them.

Add Related News Links to the News Article Template

1. Open the news-detail.html file from the web design. This file contains the HTML markup for the Related News block.
2. Locate the <div class="col-md-3 col-sm-3"> element. This is the right column that will display related news links.
3. Open bootstrap-webfiles/src/main/resources/site/freemarker/hstdefault/newspage-main.ftl in your project. This Freemarker template renders news articles.
4. Use Freemarker syntax to render the related news links dynamically, using the HTML structure from the web design. If there are no related news links, do not render the block.

The document object exposes the list of related news links through its relatednews attribute, which corresponds to the getRelatednews method in the NewsDocument class.

Example Freemarker code:

<#if document.relatednews?has_content>
  <div class="col-md-3 col-sm-3">
    <div class="hst-container">
      <div class="hst-container-item">
        <div class="sidebar-block">
          <h3 class="h3-sidebar-title sidebar-title">Related News</h3>
          <div class="sidebar-content">
            <ul>
              <#list document.relatednews as item>
                <@hst.link var="link" hippobean=item />
                <li>
                  <a href="${link}">${item.title?html}</a>
                </li>
              </#list>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</#if>
copy

5. Open the website in your browser and navigate to the news article where you added related news links. The links now appear in a sidebar, matching the web design.

Iteration Complete

You have now added Related News and completed the first iteration. The GoGreen website includes all features defined for this iteration. Proceed to the next iteration to continue development.

Info: The full deliverable for this iteration is available on GitHub for brXM 14, brXM 15, and brXM 16. Use these repositories to compare your implementation.

Next Step

Iteration 2: Develop New Features

Full Source Code

newspage-main.ftl

<#include "../include/imports.ftl">
<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <#if document??>
        <@hst.link var="link" hippobean=document/>
        <div class="col-md-9 col-sm-9">
          <div class="blog-post has-edit-button">
            <@hst.manageContent hippobean=document/>
            <div class="blog-post-type">
              <i class="icon-news"> </i>
            </div>
            <div class="blog-span">
              <#if document.image?? && document.image.large??>
                <@hst.link var="img" hippobean=document.image.large/>
                <div class="blog-post-featured-img">
                  <img src="${img}" alt="${document.title?html}" />
                </div>
              </#if>
              <h2>${document.title?html}</h2>
              <div class="blog-post-body">
                <p>${document.introduction?html}</p>
                <@hst.html hippohtml=document.content/>
              </div>
              <div class="blog-post-details">
                <div class="blog-post-details-item blog-post-details-item-left icon-calendar">
                  <#if document.date??>
                    <span class="date">
                      <@fmt.formatDate value=document.date.time type="both" dateStyle="medium" timeStyle="short"/>
                    </span>
                  </#if>
                </div>
              </div>
            </div>
          </div>
        </div>
        <#if document.relatednews?has_content>
          <div class="col-md-3 col-sm-3">
            <div class="hst-container">
              <div class="hst-container-item">
                <div class="sidebar-block">
                  <h3 class="h3-sidebar-title sidebar-title">Related News</h3>
                  <div class="sidebar-content">
                    <ul>
                      <#list document.relatednews as item>
                        <@hst.link var="link" hippobean=item />
                        <li>
                          <a href="${link}">${item.title?html}</a>
                        </li>
                      </#list>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </#if>
      </#if>
    </div>
  </div>
</div>
copy