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 (Site Menu) → Content & DataWeb Content.

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

  4. In the Properties menu (Properties icon) (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.

    Select a structure when creating a template to associate them.

  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 (Elements icon) 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.

    Clicking a repeatable field adds FreeMarker tags that iterate over each instance in the 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.

    The completed template iterates over each question and answer with new lines between each.

  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.

The Simple FAQ List template applied to a FAQ web content article.

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 (Add icon) 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 (Actions icon) → Import Script.

    Click Import Script to import the FreeMarker template you downloaded.

  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.

The Collapsible FAQs template applied to a FAQ web content article.

Next: add some articles with your new content types.

Relevant Concepts

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy