Fun share: Add a FAQ to your app!

Hey Thunkers!

I just finished up creating an accordion menu for a FAQ section of an app and wanted to share it here.

Step 1: Design your Card

this will happen in the snap to place interface

To do this, you need to have the mindset that you are going to design 1 row
Screen Shot 2022-04-06 at 2.40.20 PM

and that the DVL will simply repeat the same design over and over with different content being applied to each row
Screen Shot 2022-04-06 at 2.40.22 PM

In this FAQ example I wanted the row to expand and collapse such that the reader only sees 1 answer at a time. That means a row can have 2 states, expanded or collapsed. This means that in the design, I’ll incorporate both potential states of the row.

Step 2: Build the DVL layout

When building this DVL layout, I started with a row then nested column.
Screen Shot 2022-04-06 at 3.06.08 PM
I designed this layout in a column of components that could be collapsed/hidden and shown. begin by allowing the row to be 100% width, and to fit contents height wise. The internal column is set to fit contents for height and fill container for width. This allows the content to grow vertically and consume the entire width made available.

**Note, there is some margins on the inner column. 10 for top/bottom and 5 for left/right

nested in the column are 2 rows.
Screen Shot 2022-04-06 at 3.12.31 PM

the top row set to 100% width and bottom row set to 90% width. both set to fit contents for height. and both rows set both rows horizontal alignment to space-around

In the top row, there is a label and an image.
Screen Shot 2022-04-06 at 3.16.24 PM
grab an image from and import the image to the projects assets and set it as the image background. The image is set to be an Absolute Height & Width of 50 X 50 pixels. The label is given placeholder text and set to Fit Contents for both Height and Width

In the bottom row is just a label
Screen Shot 2022-04-06 at 3.23.58 PM

the label is set to fit contents for Height and Width and set to be italic

that’s it, then click the outer most Row and save the layout

next use the layout in a DVL AND import the image asset that used in the original layout. this image doesn’t copy over.

Step 3: Bind the DVL and Build the Blocks

  • in this last step, add a DVL to a screen and set it to be the design that was just created,
  • next import the image asset to my new project
  • create a table with questions and answers then set that table to be the DVL’s data source
  • Bind the labels to the appropriate columns, this is how we give the labels the data
  • Build the logic to show a rows answer when it’s button is clicked and to hide or leave hidden irrelevant question answers if they are visible

Hi jared,

I would really like to see the instructions for this!

1 Like

hey @macleodashley Glad to see you in the community! I just wrote out some instructions. Try the above and let me know how you get along!

1 Like

Thanks Jared, I will give it a try. I am a complete beginner, so it might take a while for me to wrap my head around this :slightly_smiling_face:

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.