Power User, Developer, O365 & SharePoint: Survey / Feedback Power Apps with required field validation

Power Apps provides the Gallery control for navigation type view however we could not add a field validation on item navigation. Lets see how we can build navigation UI without Gallery control.

I had a functional requirement where user have to go through the multiple questions and each question will have some required fields to fill up before proceeding to next question.

I tried to utilize the Gallery control, it worked well except the requirement fill validation. Gallery control do not expose the Back / Next navigation action hence we can't apply the field validation.

I have achieved the same functionality using a collection, variables and some controls. To start with create the Canvas Blank App with Phone Layout. You can choose the other layout but it should be blank without template so that we can customize it as we wish.

Screen 1 (Welcome / App Start) Initialize your collection and variables as below:

Set(
_guideStep,
1
);
Reset(TextInput1);
Reset(Rating1);
ClearCollect(
Questions,
{
QuestionID: 1,
QuestionText: "First Question 1 can be bing enough to fit in the given space",
QuestionCategory: "Category 1",
Note: "",
Rating: ""
},
{
QuestionID: 2,
QuestionText: "First Question 2",
QuestionCategory: "Category 2",
Note: "",
Rating: ""
},
{
QuestionID: 3,
QuestionText: "First Question 3 can be bing enough to fit in the given space",
QuestionCategory: "Category 3",
Note: "",
Rating: ""
},
{
QuestionID: 4,
QuestionText: "First Question 4",
QuestionCategory: "Category 4",
Note: "",
Rating: ""
},
{
QuestionID: 5,
QuestionText: "First Question 5",
QuestionCategory: "Category 5",
Note: "",
Rating: ""
},
{
QuestionID: 6,
QuestionText: "First Question 6 can be bing enough to fit in the given space",
QuestionCategory: "Category 6",
Note: "",
Rating: ""
}
)

Screen 1, Add button with OnSelect = Navigation to next screen where we will display the questions.

Navigate(scrSurvey,ScreenTransition.None)

Screen 2, create the Layout similar to the screen shot below, you can add other controls as per your requirement.

Below are the details of each control and purpose.

Screen 2 OnVisible: We have to get the first item of the collection to display. Add the following code in OnVisible

UpdateContext(
{
thisItem: LookUp(
Questions,
QuestionID = _guideStep
)
}
)

Header Text: add the following code in "Text" field.

"Question: " & thisItem.QuestionID & "/" & CountRows(Questions)"

Category Text: add the following code in "Text" field.

thisItem.QuestionCategory

Question Text: add the following code in "Text" field.

thisItem.QuestionText

Rating control: add the following code in "BorderColor", "BorderThinkness"

If( Rating1.Value = 0 ,Color.Red, RGBA(166, 166, 166, 1))
If( Rating1.Value = 0 ,1, 0)

TextInput control: add the following code in "BorderColor"

If( IsBlank(TextInput1.Text),Color.Red, RGBA(166, 166, 166, 1))

Next Button Control: Add the following code in "OnSelect" and "Disabled Mode"

Patch(
Questions,
thisItem,
{
Note: TextInput1.Text,
Rating: Rating1.Value
}
);
Reset(TextInput1);
Reset(Rating1);
If(
_guideStep = CountRows(Questions),
Navigate(
scrFinal,
ScreenTransition.None
),
Set(
_guideStep,
_guideStep + 1
);
UpdateContext(
{
thisItem: LookUp(
Questions,
QuestionID = _guideStep
)
}
)
)
If(IsBlank(TextInput1.Text), DisplayMode.Disabled, DisplayMode.Edit)

Back Button Control: Add the following code in "OnSelect"

If(
_guideStep = 1,
Navigate(
scrWelcome,
ScreenTransition.None
),
Set(
_guideStep,
_guideStep - 1
);
UpdateContext(
{
thisItem: LookUp(
Questions,
QuestionID = _guideStep
)
}
)
)

Additionally, if you want a cool progress indicator follow the steps below: