How to create checklists using nested galleries!

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 nested galleries. To learn more about the gallery control, click here.

Detailed Steps - using nested gallery

Here are the steps:

The two nested galleries & their Items property

1. Add a flexible height gallery and call it galParent.
2. Extra step (for responsiveness): Set its Height to Parent.Height - Self.Y and Width to Parent.Width .
3. Nest/add another flexible height gallery in the 1st gallery and call it galChild.
4. In the OnVisible of the screen, populate a collection using the following code:

   ClearCollect(
       colSections,
       AddColumns(
           Sections,
           "showQuestions",
           false
       )
   );
   

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

5. Set the Items property of galParent to colSections.
6. Add a label to galParent. Name it lblSectionName set its Text property to:

   ThisItem.Name

   to display the name of the sections.

7. Extra step (for responsiveness): Set the X position of the label to 15 and set its Width to Parent.Width - Self.X - 20.
8. Set the X position of galChild to 15 (to show indentation) and the Y position to lblSectionName.Y + lblSectionName.Height
9. Set the Items property of galChild to

   ThisItem.Questions

   This is so that the child gallery will show the questions that are related to the particlar section. In other words, questions that have the lookup column on them populated with the particular section.

Controls inside the nested gallery

1. Add a label to galChild. Name it lblQuestionName and set its Text property to:

   ThisItem.Name

   to display the name of the questions.

2. Add a text input control and name it txtQuestionTypeText.
3. Set the Visible property of txtQuestionTypeText to:

   ThisItem.Type = 'Question Types'.Text

   This ensures that the it will be visible only for questions that have the type set to text.

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

   ThisItem.Type = 'Question Types'.Choice

   This ensures that the it will be visible only for questions that have the type set to choice.

7. Extra step (for responsiveness): Set the Y position of cmbQuestionTypeChoice to lblQuestionName.Y + lblQuestionName.Height + 10 and set its Width to Parent.Width - Self.X - 20

Height of the nested flexible height gallery

1. We need to ensure that galChild doesn't have scroll bars as that would not look good. For that, we will add a label lblHeight to galChild.
2. Set its X and Y to 0 and Width and Height to 1. Set its Text color to White or Transparent.
3. Update the Text property of lblHeight to:

   txtQuestionTypeText.Y + txtQuestionTypeText.Height + 10

4. Set the Height property of galChild to:

   Sum(
       Self.AllItems,
       lblHeight.Text
   )

   The steps to calculate the height of a flexible height gallery so as to not have a scrollbar are outlined here.

5. Set the Visible property of galChild to:

   ThisItem.showQuestions

   This is to ensure that the nested gallery will be visible only when a section is expanded.

Icon to expand/collapse the nested 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. We will 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
   )

   df

4. Set the OnSelect property of icnSectionExpand to:

   If(
       !ThisItem.showQuestions,
       Patch(
           colSections,
           ThisItem,
           {showQuestions: true}
       ),
       Patch(
           colSections,
           ThisItem,
           {showQuestions: false}
       )
   )

   This means that if the showQuestions column of a given section is set to true (which means the section is expanded), it will update it to false so the section will get collapsed and vice versa.

Demo

With these steps, the galleries will look like this: