Powerapps Control handling and performance issues

[tp55]

Hi all,

I have created an App that pulls data from a SharePoint List and within the App the user fills in a questionnaire that writes back to the SharePoint list. Depending on what the user submits, different icons/images are loaded (as shown in the Main Screen picture attached). 

This page is set up with a gallery and each button has 4 images behind it - each of these images has simple code in the 'Fill' and 'Visible' properties to pull the correct data into the questionnaire (a different sheet) but also to reflect the correct images. 

As you can imagine the issue that I am having is performance due to the number of controls on the Main Screen. 

*Disclaimer this is my App that I have created so I am sure there is a more efficient way of doing this*

I have run the monitor to check performance and 2 things stand out - even though I click on one button (i.e. A1) the Visible and Fill code is run for all images linked to every button (twice during the run of the app - on opening and on submit) e.g. A1,A2,A3,B1,B2,B3.... F10,F11...

All of these controls are needed in my opinion but the run time is not acceptable - some 2.5 mins for clicking the button, filling in the questionnaire, saving back to SharePoint and then updating the images. 

Please help!! I am really hoping some of you kind people know of a way to speed this up? One idea I had was to try and partition it i.e. so if you click the button for A1, only the fill & visible code for A1 is run but I'm not even sure if this is possible. 

Thank you in advance for any help you can provide!

Thanks

PT

[poweractivate]

@tp55 

1. Try to implement it with simple list or Gallery and text labels with colors indicators and see if the performance issue goes away after that if no images are used at all anywhere in main screen.

2. If it has to be like this with the images, try to have rectangles in the beginning and put a colored letter inside in lieu of an image and see if the  performance issue goes away after that.

3. If the images are absolutely needed, use #2 and then use one or more custom repeating Timer(s) to gradually replace the stuff loaded immediately in the version above #2 with the real images iteratively in chunks of time,, such as one tile of images each X millisecons of the repeating timer when images are left  - with #2 still keeping instant visual feedback, but custom timers gradually making the app load the real images for the indicators to look "better". If the screen is not changed to another screen when a tile is clicked, make sure the Timer stops when the tile is clicked so it doesn't keep loading the images when they are not needed or not even possible to be in view, and that the timer is resumed only when the mode has been resumed of being in the main screen. If the screen is changed, then maybe you don't have to worry about this.

Check if something like above helps as starting point. 

[AmDev]

Hi @tp55 

I see that in the screenshot of the app only 1 image is ever displayed once the button is revealed and you mentioned that you have four images in behind each button.

If you will only ever reveal one image, rather than use visibility on 4 images, 1 refinement would be to use 1 image behind your button and add logic to change what image the image control renders such as Switch:

Switch(varPic, 1, image1, 2, image2, 3, image3, 4, image)

This code would go in the image property of your image control - in this example the image changes to one of 4 images subject to the value of variable, varPic.

Also. as you suggested, ideally you don't want to be unnecessarily running code in your app, so you could just run it for chosen squares. What is the data source behind your grid? - is it a collection or direct to your data? - and what happens at present when you click a button, i.e. does this open a questionaire that relates only to teh square you have clicked or can the answers to questions from one button click result in other buttons being removed and images shown subject to the answers given?

[tp55]

Hi AmDev,

Thanks for your response. Please see my responses below:

1) The green tick only ever appears by itself. However, the Exclamation point and the lightbulb can appear together in the same square (Screenshot A attached)- the images & fill are based on records entered into the SharePoint list.

2) The records are entered into the SharePoint list by the questionnaire (Screenshot Q attached). If there is no record already in the Sharepoint list, the user answers all of the questions and then clicks submit. This submits the data into the SharePoint list and subsequently the Main screen updates the visible icon & fill based on the list. 

3) If there is already a record in the SharePoint list, the questionnaire is pre-populated with all of the relevant information that the user can change if required. Again, based on any changes, the icons & fill will be updated in the main screen. 

I think the main issues are two-fold - the number of controls but also the number of times that the Sharepoint List is being referred to. A lot of the the lag time i am seeing is at points where the app needs to refer to the sharepoint list I think.

Ideally, only squares that have been clicked on would have their images/fill updated but I'm not sure how to do this unfortunately. 

Any help you can provide would be greatly appreciated. 

Thanks.

tp

[AmDev]

Hi @tp55 

Is it one record per row of squares, or is it one record per square? - When you say the user answers all the questions, I take it that isn't all the questions in the grid, it's only the questions relating to the item they have selected?

Without seeing your code and assuming users have to click through each record, it should be possible to directly patch the data source, when submitting the form just for the selected record, which could then be used to format the button/images for that record in your Gallery as the user works through it.

I'm assuming based on your form layout, that it isn't a Form control, you have created this form with separate controls and are patching manually?

To patch the currently selected record upon submission of response for that record:

Patch(YourData, Gallery1.Selected, {Field1: TextInput1.Text, Field2: Dropdown1.Selected.Value, Field3: etc etc etc })

If the current set up involves users answering all questions for the entire grid and then pressing the button for the big reveal at the end - you could still set it up so that it patches per row / updates the images for each row/item completed as the users works through the process, but I assume you don't want the user seeing their answers to the end? - if so you could re wire the button visibility to a final 'reveal your result' button, by which time all the patching and image updates have already been done and all that final step would do is hide the respective buttons that meet your logic.

I hope my understanding is correct and this is of some assistance, but if not, I would be happy to look at the code you are using and provide further guidance

[tp55]

Hi @AmDev, Apologies if you see this message multiple times - when I've sent it initially it's disappeared from the conversation so trying again.

Your understanding is correct. The user is updating one record per square. I.e. if they click square A1, what the user is doing is creating a record for that one square only (via the questionnaire). If square A1 has already been populated previously, when the user clicks the square, the questionnaire is pre-populated with previous responses for the record from the SharePoint list (which the user can then change and resubmit). 

The desired effect is for only the Visible and Fill code (see my code below) to be run related to the square that has been selected (i.e. A10). However, my app is currently checking all squares versus the records in the Sharepoint

and updating them each and every time the main screen is loaded (i.e. when first loaded and also when a questionnaire has been submitted). 

One concern that I would have if I was able to update for square only is that we will have multiple users (10-15) who could all be using the app at the same time. Thankfully, they would never click on the same square (one user owns column 1, one user owns column 2 for example) so that's not a major issue but it would be good if they could have visibility on what everyone has done (possibly achieved by refreshing the data source periodically).

The layout of my app is a gallery (see ScreenshotTree attached). Code is in the attached word document. 

Please can you explain a bit more about how the Patch code you shared would work? 

As previously mentioned, all of the above code appears to be getting run twice (regardless of which square the user clicks on) - all code runs once upon opening of the screen and again when the user submits a questionnaire.

I know there must be a more efficient way of doing this but every day is a school day as they say and I am still learning haha.

Thanks again for any guidance you can provide. 

[AmDev]

Hi @tp55  - Thanks for the info. I see there are a lot of filter calls happening across the board for all your controls which appears to be the issue with performance.

Just thinking about how to improve this - would something like the following work for you?

 - to have your Gallery tied to your back end dataset1,

 - with each square/button representing one row of your dataset

 - columns along that row representing the questions. Y

 - You could have a live list and audit list.

 - The live list is what's tied to your gallery, which has a set nr of rows that does not change and this alway displays the most up-to-date status in your gallery.

 - As a user completes the questionnaire, the row is updated, but no rows are added.

However, as a user makes changes, these changes are logged as new rows in your audit list, Dataset2. This would give you the option to go back and show historical data/details of changes etc if required.

Structuring it like this would make it easy to achieve what you want without running multiple filter calls and the status updates would happen instantaneously, just for the square that has been edited.

Would something like this work for your usecase? - if so, I can provide more info or let me know if I'm way off the mark

[tp55]

Hi AmDev,

Thanks for your suggestion on a structure - I would be very interested to see how this would work in practice and how this is achieved. 

I have added a couple of further points in bold below that are important to note: 

 - to have your Gallery tied to your back end dataset1,

      By tied to, do you mean this is the data source for the Gallery? 

 - with each square/button representing one row of your dataset

     Correct. Each square represents a row of the dataset due to the axis - the y axis on the left  represents the project name (e.g. A in my example). The X across the top represents the team (e.g. 1 in my example)

 - columns along that row representing the questions. Y

   The rows in the mainscreen are not linked to the majority of questions in the questionnaire. If a user clicks button A1, these 2 fields are pre-defined in the questionnaire. This is the only link between the main screen and the data that is written in the Sharepoint by the questionnaire. Answers to all of the other questions are added to the record in the Data Set when the user submits.

The Yes/No questions in the questionnaire only drive whether the user sees a Lightbulb, Exclamation or Tick in the mainscreen (hope that makes sense) 

 - You could have a live list and audit list.

 - The live list is what's tied to your gallery, which has a set nr of rows that does not change and this alway displays the most up-to-date status in your gallery.

The number of Projects (Y axis) will change on a monthly basis. The questionnaire is pre-populted with the Month and the year and records in the data set for prior months will no longer be overwritten (but stay in the dataset for historic entries). i.e. each month, the main screen starts 'clean' as there are no records in the dataset for the given month. This only changes as users start to complete the questions.

 - As a user completes the questionnaire, the row is updated, but no rows are added.

When you say no rows are added, do you mean no rows are added to the Dataset? If so, I'm not sure this will work as we need 'live data' results to be shown in the main screen but full history of the records in the dataset on sharepoint. Apologies if i have misunderstood. 

However, as a user makes changes, these changes are logged as new rows in your audit list, Dataset2. This would give you the option to go back and show historical data/details of changes etc if required.

Please can you explain a bit further how the 'Audit List' will work? 

Thank you so much for the help you have offered - it really is invaluable. 

tp

[AmDev]

Hi @tp55 

Sorry, I havent had time to get into this properly today as it's quite a chunky one. I will try and come back with a slimmed down msapp file and excel, which I started looking at yesterday to illustrate what I mean - you could then apply the same logic to your own app/dataset.

See my updates in red to the text above - let me know if anything is way off the mark:

 - to have your Gallery tied to your back end dataset1,

      By tied to, do you mean this is the data source for the Gallery? - yes

 - with each square/button representing one row of your dataset

     Correct. Each square represents a row of the dataset due to the axis - the y axis on the left  represents the project name (e.g. A in my example). The X across the top represents the team (e.g. 1 in my example)

 - columns along that row representing the questions. Y - I mean the columns in the underlying dataset (not the app) represent the questions. Are there different questions subject to the team that clicks on the button?

   The rows in the mainscreen are not linked to the majority of questions in the questionnaire. If a user clicks button A1, these 2 fields are pre-defined in the questionnaire. This is the only link between the main screen and the data that is written in the Sharepoint by the questionnaire. Answers to all of the other questions are added to the record in the Data Set when the user submits. - Do you mean that when selecting A1, the form for that square will pre populate with Project A and Team 1?

The Yes/No questions in the questionnaire only drive whether the user sees a Lightbulb, Exclamation or Tick in the mainscreen (hope that makes sense) 

 - You could have a live list and audit list.

 - The live list is what's tied to your gallery, which has a set nr of rows that does not change and this alway displays the most up-to-date status in your gallery.

The number of Projects (Y axis) will change on a monthly basis. The questionnaire is pre-populted with the Month and the year and records in the data set for prior months will no longer be overwritten (but stay in the dataset for historic entries). i.e. each month, the main screen starts 'clean' as there are no records in the dataset for the given month. This only changes as users start to complete the questions. - That's OK. Not sure what your plan is for this process, but you could use Power Automate to sort this for you automatically on the first day of each month, with the data from the month past being used to populate the Audit list (your record of historical months), The live list for the month ahead beijng cleared, with blank placeholders left in place for the coming month to start all over again. Also if youj have a separate project list, youj could have the grid auto generate with the correct procts down the left provided that any changes to the project list are undertaken prior to the end of the month (i.e. before the flow runs on the 1st)

 - As a user completes the questionnaire, the row is updated, but no rows are added.

When you say no rows are added, do you mean no rows are added to the Dataset? If so, I'm not sure this will work as we need 'live data' results to be shown in the main screen but full history of the records in the dataset on sharepoint. Apologies if i have misunderstood. - I mean the live list is what users work on for the current month which will have a set nr of rows each month with a quantity of 'nr projects x nr teams'. The audit list is for your historical data. may be possible to also leave it all in one list. 

However, as a user makes changes, these changes are logged as new rows in your audit list, Dataset2. This would give you the option to go back and show historical data/details of changes etc if required.

Please can you explain a bit further how the 'Audit List' will work? - historical list

[AmDev]

Hi @tp55 

See below the thinking on the structure, in order to make it a simple update upon submission of each questionnaire. The code isn't fully fleshed out, but hopefully there is enough in here to give you an idea. This is just set up based on a simple form, which is submitted and upon submission, the datasource is updated only for the modified item, which in turn removes the button and displays the correct image (when typing either 'y' or 'n' for answer 7) for the modified item.

See the notes in the app and as per screen shot below to describe Gallery / back end structure.

Also attached is the msapp file and excel tables (for ease of transport) - just put the excel in your onedrive and access them via the OD for business data connector in Power Apps - everything should connect up as is to allow you to have a play.

You could leave this all in the one list (current and historical months) and just filter the live current items to show those created in the current month, hiding the rest - or you could have power automate archive each month as it's passed into a separate historic list - in either case you would need power automate to create your new batch of empty questions for each project at the start of each month.

Hope you find this helpful.