How to create checklists using a single horizontal 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 a checklist/survey/questionnaire using a single horizontal gallery. To learn more about the gallery control, click here.

Detailed Steps - using a single horizontal gallery

The horizontal gallery & its Items property

1. 1. Add a horizontal gallery and call it galSurvey.
   2. Set its Width and TemplateSize to

      Parent.Width

   3. Set its TemplatePadding to 0.
   4. Extra step (for responsiveness): Set its Height to Parent.Height - Self.Y
   5. 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.

   6. Set the Items property of galChecklist to colQuestions.
   7. Also, set its ShowScrollbar to false and ShowNavigation to true.
   8. Set a variable locCurrentQuestion to 0 in the OnVisible of the screen:

      UpdateContext({locCurrentQuestion: 0});

Controls inside the horizontal gallery

1. Add a label to galSurvey and name it lblSurveySectionName. Then set its Text property to:

   ThisItem.Section.Name

2. Extra step (for responsiveness): Set the X position of the label to 0 and set its Width to Parent.Width set its Y position to (Parent.TemplateHeight - Self.Height) / 2 - 100.
3. Add another label to galSurvey and name it lblSurveyQuestionName. Then set its Text property to:

   ThisItem.Name

   to display the name of the questions.

Controls for different question types

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

   ThisItem.Type = 'Question Types'.Text

   Do this to make txtQuestionTypeText visible only for text type questions.

3. Extra step (for responsiveness): Set the X position to (Parent.Width - Self.Width) / 2 and Y position to lblSurveyQuestionName.Y + lblSurveyQuestionName.Height + 20
4. Add a combo box and name it cmbSurveyChoiceResponse.
5. Then set the Visible property of cmbSurveyChoiceResponse to:

   ThisItem.Type = 'Question Types'.Choice

   Do this to make cmbSurveyChoiceResponse visible only for choice type questions.

6. Extra step (for responsiveness): Set its X position to txtSurveyTextResponse.X and Y position to txtSurveyTextResponse.Y

Icon to progress to the next question (optional)

1. Let's say you have the following additional requirements:
   1. You don't want to allow users to go back to a previous question
   2. You dont want to allow users to progress to the next question until they have responded to the current question
2. Add two labels and name them lblHideLeftNav and lblHideRightNav.
3. These will be used to hide the navigation controls of the gallery.
4. Set the Width and Height of both the labels to 76.
5. Then set the X position of lblHideLeftNav to 2 and set its Y position to

   (galSurvey.TemplateHeight - Self.Height) / 2 + 68

6. Next set the X position of lblHideRightNav to

   Parent.Width - Self.Width - 2

   and set its Y position to lblHideLeftNav.Y

7. Set the Visible property of lblHideLeftNav to true as we don't want to allow users to go back to a previous question.
8. Set the Visible property of lblHideRightNav to:

   locCurrentQuestion <> galSurvey.VisibleIndex

   I will explain this in the next couple of points.

9. To start off with, locCurrentQuestion is 0 and galSurvey.VisibleIndex = 1. VisibleIndex property of a gallery tells you which record in the gallery is visible at the moment. Since our gallery's Width and TemplateSize are the same, only one record will be visible at any point in time. So lblHideRightNav is visible to being with. This hides the right navigation control of the gallery.
10. Set the OnChange of txtSurveryTextResponse and cmbSurveyChoiceResponse to:

    UpdateContext({locCurrentQuestion: galSurvey.VisibleIndex})

11. As soon as a question is answered, locCurrentQuestion is updated to the VisibleIndex of the gallery, which means lblHideRightNav becomes hidden. This allows the user to progress to the next question.

Demo

With these steps, the galleries will look like this: