Adding a Template to Display FAQs

The template for FAQs needs to be able to display not only each field you added, but also every repetition of a question and answer the article could have.

Here, you’ll make use of a FreeMarker list to ensure every question and answer appears.

Start Creating the Template

1. Log in as Preston Palmer, your public site administrator (if you haven’t already).

2. Navigate to the Site Menu () → Content & Data → Web Content.

3. Select the Templates tab and click Add ().

4. In the Properties menu () (on the right side of the screen), click Select Structure beside the Structure field and select the FAQs structure.

   The new template is associated with the FAQs structure. Use this alternative method or the one mentioned in the previous exercise to create a template and associate it with a structure.

   

5. Still in the Properties menu, enter this into the Description field: A simple template to list each question and answer.

6. At the top of the page, enter Simple FAQ List as the title.

Configure the Template’s Fields

Next, format the list of FAQ articles.

1. Click Elements () to reopen the Elements menu.

2. Click into the body of the template and delete the placeholder text.

3. From the Elements menu, scroll down to the fields under Journal and click Title.

   This automatically fills in code that uses the title value.

4. Surround the code with H2 heading HTML tags (<h2>), like this:

   <h2>${.vars["reserved-article-title"].data}</h2>
   

5. Press Enter twice to add two new lines and add an HTML tag for a new line (<br>) to separate the title from the list of FAQs.

6. Press Enter twice to add two new lines and, from the list of fields in the Elements menu, click FAQ.

   Because the FAQ group is a repeatable field, this adds a FreeMarker list that iterates over each instance in the displayed content.

   

7. Copy this segment in the middle of the inner FreeMarker <#list></#list> tags:

   <#if (cur_FAQ.QuestionText.getData())??>
      ${cur_FAQ.QuestionText.getData()}
   </#if>
   
   <#if (cur_FAQ.AnswerText.getData())??>
      ${cur_FAQ.AnswerText.getData()}
   </#if>
   

   This is similar to clicking both the Question and Answer fields from the fields list, but it uses cur_FAQ to reference each specific question and answer in the list, each time it iterates.

8. Surround the whole line with the question field’s text (${cur_FAQ.QuestionText.getData()}) in bold text HTML tags (<b>), like this example:

   <b>${cur_FAQ.QuestionText.getData()}</b>
   

9. Press Enter twice to add two new lines and add an HTML tag for a new line (<br>) after each of the question and answer blocks of FreeMarker tags. Wrap up by pressing Enter once again.

   

10. Click Save.

Now you have a template that displays each question and answer wherever you display a FAQs article, and you can display both of your new types of web content properly on your site.

Next, import a second template for the FAQs structure.

Import Another Template

While you’re still on the Templates page, make sure the top of the page reads “Templates for Structure: FAQs”

1. Still on the Templates page, click Add () to create another new template.

   Note

   The top of the Templates page reads “Templates for Structure: FAQs” to remind you that adding a new template still associates it with the FAQs template. If you access the Templates tab normally (without clicking Manage Templates for the structure), you need to set the structure manually when you’re creating it.

2. Download and unzip the template resource:

   curl https://resources.learn.liferay.com/courses/latest/en/liferay-c8m2.zip -O
   

   unzip liferay-c8m2.zip
   

3. At the top of the page, click Actions () → Import Script.

   

4. Upload the FreeMarker template you downloaded (faq-web-content-template.ftl) and click Open.

   The template body is filled with the new template’s FreeMarker code. This template uses the same techniques as the previous template you added, but it also includes Clay components and an embedded button component.

5. Enter “Collapsible FAQs” as the new template’s name.

6. Click Save.

Now you have a template that collapses the answers by default, for a cleaner look and feel.

Next: add some articles with your new content types.

Relevant Concepts

• Creating Web Content Templates

• Mapping Web Content Templates to Fragments