❓FAQs
⚠️ This documentation is shared for all FAQ components with workflows. Some screenshots may not be fully identical to the components you chose to use but the technics will be the same.
The FAQ 1 Component is a simple yet effective FAQ component. It's useful to display a list of Questions that when clicked will display their answer.
In this documentation, we'll cover how to adapt this components to your App's data.
Linking this FAQ to your app's data
Building in Accordion FAQ in Bubble is quite straightforward.
These components simply display a list of FAQ (Frequently Asked Questions) that contains two attributes :
A question
An answer
By default, the answer is hidden and is shown only when the User click on the question.
However, there are several ways to organize the data you're injecting into the FAQ component. The most common are using a Data Type, an Option Set or an arbitrary text.
Most of the time, Nocodable Components are built using an Arbitrary Text in combination with a :splitBy operator. This is purely due to technical limitations encountered by Nocodable when important a components into a user's app.
This documentation will cover all three approaches so that you can chose the one you want.
1 - Using a Data Type
This is the most used and recommended approach to build an FAQ.
It consist of creating a dedicated Data Type in your database to store your list of FAQ.
Here's how it is structured most of the time :
As you can see, this data type is only composed of two fields :
Question
Answer
Once created, you can go into your App Data to create a new entry and fill in the question and the answer that goes with it.
Simply repeat this step for each of your FAQ, and your FAQ set will be ready to use.
Now that this is done you can go back to your editor and update the Content Type and Data Source of your FAQ Component :
1 - Update the Content Type
Set the Content Type of the Repeating Group to the one you created earlier (in my case, it is called FAQ) :
You'll see several issues appearing in your app. No worries, we'll resolve them in the next steps.
Now that the Content Type is set, you can modify the Data Source so that the Repeating Group knows where to retrieve the FAQs it should display :
Now that this is done, we can go ahead and resolve all the issues by updating the Content Type of each faulty group.
To do this, you can click on this issues and Bubble will show you what you need to modify.
All you need to is to update the Content Type to the same Data Type as your Repeating Group :
Finally, all you need to do know is set the Dynamic Data on each text elements, so that they know what to display :
And there you go ! Your FAQ is now linked to your data.
2 - Using an Option Set
Another common to create your FAQ is to create an option set.
It is very similar to the first approach we used, but you need to understand that Option Set are always loaded when one of your page's app is loaded.
Therefore, most of the time your FAQs will be loaded, even if they're not needed. Which isn't the case with the first approach.
However, you may still want to use this approach so here's how it goes :
A - Create your Option Set :
The structure is pretty basic, simply create a new "FAQ" option set and give it two attributes :
1 - Question
2 - Answer
Now it's done you can create new options using the input below and modify its attributes.
1 option = 1 question/answer
Repeat for each question you want to create, and your option set will be ready to use.
All you need to do know is to inject the correct data into your FAQ Component.
1 - Update the Content Type
Set the Content Type of the Repeating Group to the option set you just created (which is FAQ in my case)
You'll see several issues appearing in your app. No worries, we'll resolve them in the next steps.
Now that the Content Type is set, you can modify the Data Source so that the Repeating Group knows where to retrieve the FAQs it should display :
Since we're using an option set, we can use the "All {{yourOptionSet}}" to retrieve our option set's data.
Now that this is done, we can go ahead and resolve all the issues by updating the Content Type of each faulty group.
To do this, you can click on this issues and Bubble will show you what you need to modify.
All you need to is to update the Content Type to the same Data Type as your Repeating Group :
Finally, all you need to do know is set the Dynamic Data on each text elements, so that they know what to display :
And there you go ! Your FAQ is now linked to your option set.
Showing/Hiding answers
Now comes the part where we need to show or hide our answer.
This step is pretty simple since it only uses one step in a single workflow.
By using the "Toggle an element" Bubble takes care of hiding or showing the answer.
If it's not visible Bubble will show it and vice-versa.
Simply note that for most FAQ components the answer is hidden by default and will therefore not be directly visible in the editor.
Regardless of the design of the component, it will more or less always work this way.
Last updated
