How to create checklists using a single vertical gallery!

Introduction - checklists using galleries

I outlined the data model for creating a checklist in a previous post that can be found here. In this post, we will review the steps needed to create an expandable checklist using a single vertical gallery. To learn more about the gallery control, click here.

Detailed Steps - using a single vertical gallery

The vertical gallery & its Items property

1. Add a flexible height gallery and call it galChecklist.
2. Extra step (for responsiveness): Set its Height to Parent.Height - Self.Y and Width to Parent.Width .
3. In the OnVisible of the screen, populate a collection using the following code:

   ClearCollect(
       colQuestions,
       AddColumns(
           Questions,
           "showQuestions",
           false
       )
   );
   

   The additional column showQuestions is added to denote which sections are expanded and which ones are not.

4. Set the Items property of galChecklist to colQuestions.

Controls inside the vertical gallery

1. Add a label to galChecklist and name it lblSectionName. Then set its Text property to:

   If(
       ThisItem.Sequence = 1,
       ThisItem.Section.Name,
       ThisItem.Name
   )

   Do this to make this label show the name of the section for the 1st question in a section (sequence = 1). And for every other question, it will show the name of the question.

2. Set its Visible property to:

   ThisItem.Sequence = 1 || (ThisItem.Sequence <> 1 && ThisItem.showQuestions)

   Do this to make lblSectionName visible for all questions that have sequence=1 (so the sections are visible even they are collapsed). It will also be visible for all questions where sequence is not equal to 1 but when showQuestions is set to zero. This is what makes this work like the nested gallery example we saw in the previous post.

3. Extra step (for responsiveness): Set the X position of the label to 15 and set its Width to Parent.Width - Self.X - 20.
4. Add another label to galChecklist and name it lblQuestionName. Then set its Text property to:

   ThisItem.Name

   to display the name of the questions.

5. This label should be visible only for those questions that have a sequence=1. This is because for all the other questions, lblSectionName will be used to display the questions.
6. So set the Visible property of lblQuestionName to:

   ThisItem.Sequence = 1 && ThisItem.showQuestions

Controls for different question types

1. Add a text input control and name it txtQuestionTypeText.
2. Then set the Visible property of txtQuestionTypeText to:

   ThisItem.Type = 'Question Types'.Text && ThisItem.showQuestions

   Do this to make txtQuestionTypeText visible only for text type questions when the associated section is expanded.

3. Also, set the Y position of txtQuestionTypeText to:

   If(
       ThisItem.Sequence = 1,
       lblQuestionName.Y + lblQuestionName.Height + 10,
       lblSectionName.Y + lblSectionName.Height + 10
   )

   Do this to position txtQuestionTypeText below lblQuestionName for questions with sequence=1. For all other questions, it should be below lblSectionName since that will be used to display the question text.

4. Extra step (for responsiveness): Set the Width of txtQuestionTypeText to Parent.Width - Self.X - 20
5. Add a combo box and name it cmbQuestionTypeChoice.
6. Then set the Visible property of cmbQuestionTypeChoice to:

   ThisItem.Type = 'Question Types'.Choice && ThisItem.showQuestions

   Do this to make cmbQuestionTypeChoice visible only for choice type questions when the associated section is expanded.

7. Also, set the Y position of cmbQuestionTypeChoice to:

   txtQuestionTypeText.Y

8. Extra step (for responsiveness): Set its Width to Parent.Width - Self.X - 20

Icon to expand/collapse the vertical gallery

1. The last step is to add an icon to allow users to expand/collapse a section. Add a Down Arrow and name it icnSectionExpand.
2. Extra step (for responsiveness): Set the Y position of icnSectionExpand to lblSectionName.Y and set its X position to Parent.Width - Self.Width - 20
3. Use the same icon for expanding and collapsing a section. To repurpose the down arrow as an up arrow as well, set its Icon property to:

   If(
       ThisItem.showQuestions,
       Icon.ArrowUp,
       Icon.ArrowDown
   )

4. Set the OnSelect property of icnSectionExpand to:

   If(
       !ThisItem.showQuestions,
       ForAll(
           Filter(
               colQuestions,
               Section.Section = ThisItem.Section.Section
           ),
           Patch(
               colQuestions,
               ThisRecord,
               {showQuestions: true}
           )
       ),
       ForAll(
           Filter(
               colQuestions,
               Section.Section = ThisItem.Section.Section
           ),
           Patch(
               colQuestions,
               ThisRecord,
               {showQuestions: false}
           )
       )
   )

   This is slightly more complicated than the one outlined in the flexible height gallery example. What this does is that when a section is expanded, ALL the questions belonging to that section are updated with showColumns set to true and vice versa.

Demo

With these steps, the galleries will look like this: