Conditional FAQ list
#Overview
Join our community to suggest new recipe ideas!
This guide shows how to create an FAQ model that lets you create lists of Q&A pairs of different types based on condition.
You'll create sample models to store the Q&A pairs with data, an enumeration to use as a category selector, and a model that lets you add the Q&A pairs through reference fields.
Conditional FAQ List
This recipe is a great option if you prefer to work on Q&A pairs as individual content pieces that you can easily add to another model to create the FAQ list. It is also a great option if you need to create different FAQ landing pages covering different topics.
This image shows what a frontend using this setup could look like:
Potential frontend display
#Prerequisites
REQUIRED:You need to have a Hygraph account. If you don't have one, you can sign up here.REQUIRED:You need to have a Hygraph project. Look into the following section to learn more about your options.
#What you can do
Use this guide to create a Conditional FAQ List model. You have two options:
OPTION 1:Create a project. This is the way to go if you want to follow the entire tutorial for learning purposes.OPTION 2:Use an existing project of yours. This is the way to go if you already have a project and want to add this model. In this case, you may need to adjust parts of the tutorial to your own project schema.
- Take plan limits into consideration when adding a recipe to your own project.
- Are you new to Hygraph? You may want to check out our Getting Started Tutorial!
#Not in the mood to start building?
This is the way to go if you're curious about how we built the FAQ recipes but don't want to follow the step-by-step creation process. This project contains the entire FAQ Cookbook so you can compare recipes or look into what instances they contain.
#Core concepts
In this guide, you'll work with different schema elements to create a Conditional FAQ List model. Let's look into them:
- Model: Your schema is the content structure of your project. You can define your schema by creating models, adding fields, reusable components, and sidebar widgets, integrating remote sources, and establishing relationships with other models.
- Enumerations: An enumeration is a predefined set of values representing a list of possible options. You can use them to group values within a type.
- References: References are relations between two or more content entries in your project. With references, you can reuse content entries by connecting them. Once the relation is configured, you can also create related content directly from the content form.
#Step-by-step guide
This video follows the same step-by-step tutorial offered in this document.
#1. Create the FAQ category models
We will create 3 models that will let you create Q&A pairs as content entries.
To create the first model, navigate to the Schema builder and click +Add next to Models. Use the following information:
| Field | Input |
|---|---|
| Display name | FAQ Category General |
| API ID | FaqCategoryGeneral |
| API ID Plural | FaqCategoryGenerals |
Click Add Model to save.
Let's add fields to this model. We will add a Single line text field to use as question, and a Rich Text field for the answer, since it allows some formatting.
For the question, add a Single line text field from the right sidebar, and use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | Question |
| Settings | API ID | question |
| Settings | Description | Write the question here |
| Settings | Use as title field | Leave this checkbox selected |
| Validations | Make field required | Select this checkbox |
| Validations | Set field as unique | Select this checkbox |
Click Add to save.
This configuration ensures all entries are created with their questions as title, for quick identification in the content form. These titles must also be unique, which will contribute to a good user experience for editors creating FAQ lists.
Next, you want include a rich text field for the answer, which will also allow some formatting. Add a Rich text field from the right sidebar, using the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | Answer |
| Settings | API ID | answer |
| Settings | Description | Write the answer here |
| Validations | Make field required | Select this checkbox |
Click Add to save.
In this case, we're not enabling embedding because we don't need to insert content from other Q&A pairs or even from other models in our simple setup. Consider enabling embedding if your content can benefit from it.
Since our 3 FAQ category models will contain the same set of fields - a Single line text field and a Rich Text field - we will go ahead, and duplicate the model that we've just created, and then edit its details.
In the FAQ category General model, click the 3 dots context menu at the top of the screen, and select Duplicate.
Duplicate the model
The system will duplicate the model and will rename it to Copy of FAQ Category General.
Click on the Settings tab at the top and replace the existing information with the following:
| Field | Input |
|---|---|
| Display name | FAQ Category Billing |
| API ID | FaqCategoryBilling |
| API ID Plural | FaqCategoryBillings |
Click Update Model to save.
You'll now duplicate this model following the same process as before, and replace the information under Settings with the following:
| Field | Input |
|---|---|
| Display name | FAQ Category Technical |
| API ID | FaqCategoryTechnical |
| API ID Plural | FaqCategoryTechnicals |
Click Update Model to save.
We chose to create these category models because we want to create question & answer sets as content entries that can be easily referenced in other models and components later on. Having three separate models, allows us to keep the Q&A pairs separated by topic.
In the next step, we will create an enumeration that will allow content editors to select a category using a dropdown menu.
#2. Create the enumeration
To create the component, navigate to the Schema builder and click +Add next to Enumerations. Use the following information:
| Field | Input |
|---|---|
| Display name | Category selector |
| API ID | CategorySelector |
Before we can save, we need to add enumeration values, which are the options editors will get when using this later as a dropdown menu.
For every enumeration value, you need to enter a Display name, an API ID, and click Add.
We'll add the following values:
| Display name | API ID |
|---|---|
| General | general |
| Technical | technical |
| Billing | billing |
Finally, click Add enumeration to save.
In the next step, we will create the final model, and we'll use this enumeration to set conditional visibility for reference fields that will link to the FAQ category models.
#3. Create the final model
To create this model, navigate to the Schema builder and click +Add next to Models. Use the following information:
| Field | Input |
|---|---|
| Display name | Conditional FAQ List |
| API ID | ConditionalFaqList |
| API ID Plural | ConditionalFaqLists |
Click Add Model to save.
This model will contain a Single line text field for the page title, an enumeration to set conditional visibility, and 3 reference fields linking to the FAQ category models you created earlier.
First, we'll add the title. Add a Single line text field from the right sidebar, and use the following information:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | Title |
| Settings | API ID | title |
| Settings | Description | Write a title here |
| Settings | Use as title field | Leave this checkbox selected |
| Validations | Make field required | Select this checkbox |
Click Add to save.
This configuration ensures that all FAQ Page entries contain a title that will allow easy identification in the content form.
Next, you will add the enumeration. Find the Enumeration field on the right sidebar, click Add, and use the following information to create the enumeration:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | FAQ |
| Settings | API ID | faq |
| Settings | Enumeration | Use the dropdown menu to select Category selector. |
| Settings | Description | Use this dropdown menu to select an FAQ category |
Click Add to save.
For the purpose of this example, we're not allowing multiple values. If your FAQ landing pages need to add Q&A pairs from more than one category model, you should allow multiple values here.
This enumeration field will allow us to set conditions for the 3 reference fields we're about to add. We did not make this field required because conditional visibility does not support required fields.
Add a Reference field from the right sidebar, using the following information:
| Tab | Field | Input |
|---|---|---|
| Define | Allow only one model to be referenced | Select this radio button. |
| Define | Model to reference | Use the dropdown to select FAQ Category Billing. |
| Define | Reference direction | Use the radio button to select One-way reference |
| Define | Relation cardinality | One to many |
| Define | Allow multiple (…) | Select this checkbox |
| Configure | Display name | FAQ Category Billing |
| Configure | API ID | faqCategoryBilling |
| Configure | Description | Select Q&A pairs |
| Configure | Show based on condition | Select this checkbox and then under “Show field if” use the dropdown menus to select FAQ is Billing. |
Click Add to save.
This reference configuration will allow editors to add links to multiple content entries, but only from the selected model. The way we configured conditional visibility means that this field will only be visible in the content form if the editor selects Billing from the dropdown menu that we configured in the previous step.
Now let's add a reference field for the FAQ Category General model, using the following information:
| Tab | Field | Input |
|---|---|---|
| Define | Allow only one model to be referenced | Select this radio button. |
| Define | Model to reference | Use the dropdown to select FAQ Category General. |
| Define | Reference direction | Use the radio button to select One-way reference |
| Define | Relation cardinality | One to many |
| Define | Allow multiple (…) | Select this checkbox |
| Configure | Display name | FAQ Category General |
| Configure | API ID | faqCategoryGeneral |
| Configure | Description | Select Q&A pairs |
| Configure | Show based on condition | Select this checkbox and then under “Show field if” use the dropdown menus to select FAQ is General. |
Click Add to save.
We'll add one final reference field for the FAQ Category Technical model, using the following information:
| Tab | Field | Input |
|---|---|---|
| Define | Allow only one model to be referenced | Select this radio button. |
| Define | Model to reference | Use the dropdown to select FAQ Category Technical. |
| Define | Reference direction | Use the radio button to select One-way reference |
| Define | Relation cardinality | One to many |
| Define | Allow multiple (…) | Select this checkbox |
| Configure | Display name | FAQ Category Technical |
| Configure | API ID | faqCategoryTechnical |
| Configure | Description | Select Q&A pairs |
| Configure | Show based on condition | Select this checkbox and then under “Show field if” use the dropdown menus to select FAQ is Technical. |
Click Add to save.
Your model is ready! You've built a landing page for FAQ where editors can use a dropdown menu to select a category that will enable reference fields to add lists of Q&A pairs.
#Resulting content form
If you followed this tutorial, your resulting content form should look like this:
Resulting content form
Editors will be able to select a category, which will display the related reference field. They will then be able to use that reference field to link Q&A pairs and create a list.