About this post

Ironically, this question gets asked a lot, so I thought I would show you how simple and easy it is to create an FAQs page in Umbraco using the Archetype package, in 7 easy steps.

1. Install Archetype if you haven't already.

To install Archetype, go to the developer tab, click on Packages in the menu and in the search bar type in 'Archetype'

Next you want to click on the package that is just called 'Archetype'. It was created by Kevin Giszewski. https://our.umbraco.org/projects/backoffice-extensions/archetype/

Then click on the button titled 'Install package', tick to accept terms and click on install. Once it has installed, click Finish.

2. Create a new custom data type called 'FAQ List Control' using the Archetype Property editor.

Go to Developer Tab, right click on Data Types and choose Create > New data type



Put the name as FAQ List Control



Property editor: Archetype



Enter the following:



Label: FAQ List Control

Alias: faqListControl

Label Template: {{question}}

Properties:



Add one for question

Label: Question

Alias: question

Help Text: Enter the question

DataType: TextArea

Required: Yes



Add another one for answer

Label: Answer

Alias: answer

Help Text: Enter the answer for this question

DataType: Rich Text Editor

Required: Yes



Click on Global Fieldset Options and tick the Start With Add Button checkbox. Then click on close in the bottom right corner.



Finally click on save.

3. Create a template called FAQs

Click on the Settings tab

Expand the templates folder

Right click on the master template and choose create.

Enter the name FAQs and then press save in the bottom right corner.

4. Create a document type called FAQs

Right click on document types, choos create.

Choose the second option 'Document Type without a template'

Enter the name as FAQs Controls

Add a tab called FAQs

Add a property called FAQ List

Enter a description 'Add the frequently asked questions here'

Click on Add editor and then click on the Reuse tab

In the search bar above the Reuse tab, start typing FAQ

Choose the FAQ List Control

Click on Submit and then click on Save

Staying on this page, click on the Templates icon in the top right corner

Click on Choose default template and choose the FAQs template you created. This will make it the default template for this document type.

Click save in the bottom right corner.

5. Add this code to the FAQs template to render the FAQs.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage @using Archetype.Models @{ Layout = "Master.cshtml"; List<KeyValuePair<string,string>> faqs = GetFAQsModel(); } @if(faqs != null && faqs.Count > 0) { <div class="container"> <h2>See our FAQs</h2> <div id="accordion"> @foreach(KeyValuePair<string,string> faq in faqs) { <h3>@faq.Key</h3> <div> @Html.Raw(faq.Value) </div> } </div> </div> } @* To get this to work, you need to define it in the master template under the last script tag like this: @RenderSection("ScriptsBottom", false) *@ @section ScriptsBottom{ <!-- find out more about the accordion in jquery-ui here http://api.jqueryui.com/accordion/ --> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#accordion" ).accordion({ collapsible: true, active: false }); } ); </script> } @* I've used a function in the template here so it is easier to take it out and put it into a separate helper class *@ @functions { public List<KeyValuePair<string, string>> GetFAQsModel() { List<KeyValuePair<string, string>> model = null; if(Model.Content.HasProperty("fAQList")) { model = new List<KeyValuePair<string, string>>(); ArchetypeModel faqList = Model.Content.GetPropertyValue<ArchetypeModel>("fAQList"); foreach(ArchetypeFieldsetModel faq in faqList) { string question = faq.GetValue<string>("question"); string answer = faq.GetValue<string>("answer"); model.Add(new KeyValuePair<string, string>(question, answer)); } } return model; } }

NOTE

You will need to reference jQueryUi for this demo to work. You may want to do it differently, but to make this demo work you need to add this to your Master template under the last script tag.

@RenderSection("ScriptsBottom", false)

6. Allow the FAQs template under the home doc type.

Go to document types

Click on Home

In the top right, click on the permissions icon.

Then click on Add child and choose FAQs

click on save in the bottom right corner

7. Add the FAQs page under Home in the content section

Click on Content in the left menu.

Right click on home, choose Create and then choose FAQs

Enter the name FAQs

Click on add an item

Put in your first question and answer

Use the plus symbol in the top right to add more questions and answers.

Click on Save and Publish

All Done

You should be able to go the FAQs page on the front end and see them. Click on the question links and see the answers expand.

You can work on the styling yourself, and move the code into a separate controller and classes. I just wanted to get the basic premise across.