Developing a single-page application in Canvas Apps

I recently had a requirement to build an app that would display different information depending on user input, however, the rest of the app (background, buttons etc.) would stay the same. I didn’t want to create multiple screens (I was looking at creating 20+ screens that looked almost identical) and have to deal with the maintenance of updating each screen in case of changes.

I wanted to create a single-page application in Power Apps in which I would only need to create one screen, and the only element that would change would be the text displayed on the screen. For context, I was building an app that walked a user through a flowchart that would determine which tool a user should use for a given scenario. If the user selected ‘Yes‘, it would go to one question. If the user selected ‘No‘ it would display a different question and would keep going until an answer was reached.

I decided to use a SharePoint list as my database. This list contained the question I needed to ask the user, the next question if the user chose yes, and the next question if the user chose no. The Next Step columns were a lookup to the Title of the same list. I also classified my data into two separate types, Question and Answer.

For example, my list structure looked like this (notice the next step columns for the Answer classification didn’t have next steps associated to it):

And my new item form looked like the below image:

Now that I had my data, it was time to create the Power App. I placed the following code in the OnStart property in the App object. In the OnStart code, I created an AppQuestions collection from my SharePoint list. By creating a collection, I will only need to call my SharePoint list once. As I also needed to set the first question for the user to answer, I created three variables: varCurrentQuestion, varCurrentQuestionID and varCurrentQuestionClassification. I set these variables to the first item in my collection (you can chose your first question by filtering your collection any which way you like, however for simplicities sake of this article, I have chosen just the first item in the list). The varCurrentQuestion variable contains the question to be asked to the user, the varCurrentQuestionID contains the ID number of the item in the list which we will use for navigation, and lastly, the varCurrentQuestionClassification dictates whether the current item is a question or answer.

ClearCollect(
    AppQuestions,
    'Platform Finder Questions'
);
Set (
    varCurrentQuestion,
    First(AppQuestions).Title
);
Set (
    varCurrentQuestionID,
    First(AppQuestions).ID
);
Set (
    varCurrentQuestionClassification,
    First(AppQuestions).Classification.Value
);

Next I created a Html text element on my Home screen (I chose a Html text element over a normal Text label as I wanted the ability to display the question and answers differently). I placed the below code in the HtmlText property. The code asks whether the question classification is an answer. If it is, it will put the “Based on your answers, the best platform for your solution is:” text before the answer from the list. The answer will also be bolded. If the classification is a question, it will display the text as is.

"<p style='text-align:center'>" & 
If(varCurrentQuestionClassification = "Answer", "Based on your answers, the best platform for your solution is: </p>" & 
"<p style='text-align:center; font-weight:bold; padding-top:.3em'>" & varCurrentQuestion, varCurrentQuestion) & "</p>"

On the same screen, I also placed two buttons. These buttons were labelled with Yes and No. When a user presses either of these buttons, the varCurrentQuestion, varCurrentQuestionID and varCurrentQuestionClassification variables will change. The variables are set by looking up values in the Next Step if True/False columns in the AppQuestions collection. As you can see in the below code, the varCurrentQuestionID is used in all the lookups as this is the most accurate way of looking up an item instead of relying on a long string value. The below code is placed on the OnSelect property of the Yes button. The No button contains the same code, however instead of the lines that reference ‘Next Step if True’.Value, it would be ‘Next Step if False’.Value. Lastly, I navigate to the same screen in the app which prompts the value of the Html text element to change to the new question.

Set (
    varCurrentQuestion,
    LookUp(
        AppQuestions,
        ID = varCurrentQuestionID,
        'Next Step if True'.Value
    )
);
Set (
    varCurrentQuestionID,
    LookUp(
        AppQuestions,
        ID = varCurrentQuestionID,
        'Next Step if True'.Id
    )
);
Set (
    varCurrentQuestionClassification,
    LookUp(
        AppQuestions,
        ID = varCurrentQuestionID,
        Classification.Value
    )
);
Navigate(
    'Home Screen',
    ScreenTransition.None
);

The last thing I needed to do was to hide the Yes and No buttons if an answer was displaying in the Html text element. To do that, I set the Visible property of the Yes and No buttons to the below code. The if statement hides the button if the question classification is an answer.

If(
    varCurrentQuestionClassification = "Answer", false, true)
);

This article outlines the basic principles of creating a single-page app in Power Apps, and can be expanded upon to add more elements to the screen and dynamic interactions for the user. For example, you can add more buttons which would allow the user to go back to the last question or to start the questions from the beginning. And, as it’s a single-page, you only have to create it once!