Optimize PowerApps Performance (Improve Performance of your app)

 In many enterprises, the slow performance of Power Apps has statistically been related to:

1. The way of implementing the app
2. the bottleneck in data sources
3. usage patterns like browser types
4. geographical location of on-prem data gateway and environment
5. throttling in a gigantic volume of requests onto a backend within a brief period

Below are some more points to consider on how we can improve performance of our app by focusing more on the 1st point mentioned above (The way of implementing the app) when you build an app.

1. Try to limit the number of controls on the screen. The time taken to render the page in PowerApps screen has a direct relation with the number of controls on the screen. There is not a defined limit but at around 300-400 controls, there have been experiences of slow loading times.
2. Use Components rather whenever you need to reuse certain blocks like header or footer. Components also reduce duplication of efforts by eliminating the need to copy/paste controls and improve performance.
3. Have the right data source for the task you’re looking to process through your low-code app.
4. Loading Data on App Start, On Visible, and within individual controls like the gallery control.
5. User Pre-loader animation to sets user expectations while data is loading.
6. Fetch data in such a way that the required data are loaded at first and while user interaction is happening call the remaining data in the background.
7. Use Concurrent Call in cases when you don’t have to do serial calls. Concurrent function evaluates multiple formulas at the same time
8. User Monitor tool to find events and logs that could help diagnose performance and functional issues.
9. Use compressed images to minimize the time to download them.
10. Update view of the data in such a way that users see data updates reflected in the user interface while actual save (Patch/Submit) is done in the background.
11. Avoid passing context variables between screens when a global variable is more appropriate.
12. If you have multiple formulas or rules that reference the value of a Text input control, set the DelayOutput property of that control to true.
13. Use inline expressions in control properties instead of putting logic in the OnVisible event in your PowerApp’s first screen. 
14. Limit your use of collections, try to use them only when absolutely necessary.
15. Limit your use of context variables, try to use them only when absolutely necessary.
16. Use ClearCollect instead of Clear;Collect().
17. Use CountIf instead of Count(Filter()).
18. Update all necessary context variables in a single UpdateContext call
19. Avoid using unnecessary DataCards or Canvases if they have nested galleries, which will not work in the future.
20. Don’t use multiple variables when you could just use a single one.
21. Don’t ‘nest’ secondary logical tests by explicitly writing If after the initial statement.
22. User one control’s styling properties like color, fill, x, y, width, height properties as the master to style other controls.
23. Use galleries whenever there is repetitive data instead of using multiple repeated controls to show as if it is a grid.
24. Use a single screen to handle edit/insert operations.
25. Use a CardGallery to handle updating data instead of referencing individual controls in a Patch function.
26. When working with an Excel sheet as a data source, use one DataTable per worksheet.
27. Don’t connect to more than 30 data sources from the same app.
28. Use the ClearCollect function to cache data locally if it doesn’t change during the user session.
29. Use the Set function to cache data from lookup tables locally to avoid repeatedly retrieving data from the source.
30. Use functions that delegate data processing to the data source instead of retrieving data to the local device for processing.
31. Republish your apps to get performance improvements and additional features from the Power Apps platform.
32. Avoid repeating the same formulas in multiple places
33. Don’t use Set to create a context variable, which holds a piece of information scoped to single-screen use UpdateContext instead.
34. Use IsError for exception handling wherever possible
35. Handle SubmitForm failure or success using onFailure or onSuccess.
36. Ensure no delegation warnings from the app checker.
37. where you can try a new formula bar experience with improved speed and usability features informed by some of the requested improvements from the community.
38. Use HTML control to display images or displaying images to lessen the load on the Media
39. If you are using custom APIs in your apps, you should enable server-side caching as you would do normally three tier applications.
40. Maintain your app quality by continually validating that your app works as expected when new changes or updates are deployed using Test Studio. 

Power Automate Limitations

Power Automate -- There are some Limit which you might not know.

1. No. of flow user can create -- 250

There is a limit of 250 flows that a single user can create. After this you simply get the error and you can’t save any more flows. If you hit the 250 limit you can raise a support ticket and then the limit will be raised.

2. Do Until Loops -- 60 runs by default

When running Do Until loops Flow will only run 60 times through the actions inside a Do until.  Luckily it is possible to change this limit within the flow editor.

Powershell script to update All Lists and Library to Modern Experience in SharePoint Online Site.

#This script uses PnPPowerShell commands, hence ensure you have already installed #SharePointPnPPowerShellOnline

#Import module
#Import-Module SharePointPnPPowerShellOnline -ErrorAction "stop"


#Specify tenant admin and site URL, credentials
$OlUser =  "adminaccountemail@domain.com"
$OlPassword = "password"
$securePassword = ConvertTo-SecureString $OlPassword -AsPlainText -Force
$OlSiteURL = "https://Online site url"

#Bind to site collection
$OlCreds = new-object -typename System.Management.Automation.PSCredential -argumentlist $OlUser, $securePassword
$SPOnlineConnection = Connect-PnPOnline -Url $OlSiteURL -Credentials $OlCreds
$OlContext = Get-PnPContext

#Disable feature at site collection level to enable modern experience at SC level
Disable-PnPFeature -Identity E3540C7D-6BEA-403C-A224-1A12EAFEE4C4 -Scope Site -Force

#Disable feature at web level to enable modern experience at web level
Disable-PnPFeature -Identity 52E14B6F-B1BB-4969-B89B-C4FAA56745EF -Scope Web -Force

#Enable new experience for all lists
$allLists = Get-PnPList
foreach($list in $allLists)
{
$OlContext.Load($list)
$OlContext.ExecuteQuery()
$list.ListExperienceOptions = "NewExperience"

$list.Update()
$OlContext.ExecuteQuery()
Write-host $list.Title -ForegroundColor Green     
}

Export ClientComponent of Page

Set DenyAddAndCustomizePages to Disabled for modern Sharepoint sites via PowerShell PnP cmdlet

$usr = "userid@domain.com"
$pwd = "password"
$secpasswd = ConvertTo-SecureString $pwd -AsPlainText -Force
$mycreds = New-Object System.Management.Automation.PSCredential ($usr, $secpasswd)

$adminUrl = "tenant admin url"
Connect-PnPOnline -url $adminUrl -Credentials $mycreds      // pass credentials
$pnpSite = Get-PnPTenantSite -Url $fullSiteUrl -Detailed
$pnpSite.DenyAddAndCustomizePages = "Disabled"
$pnpSite.Update()
$pnpSite.Context.ExecuteQuery()

We are setting Custom scripts disabled through above script. Hence we can add/upload custom css and scripts file to document library

SPO list Color Formatting using JSON

Conditional formatting using JSON in a SharePoint online list. I just tried to format my list items with some color code and here is my code by which the background color will get changed based on the item values.

I have created one list with one column called colors and I have entered some color name, so based on the color name, it will change the background color.

 

 Here is the JSON code to change the background color and text color as well. You can just copy and paste it.

{ 
  "elmType": "div", 
  "txtContent": "@currentField", 
  "style": { 
    "color": "#fff", 
    "padding-left": "14px", 
    "background-color": { 
      "operator": "?", 
      "operands": [ 
        { 
          "operator": "==", 
          "operands": [ 
            "@currentField", 
            "Green" 
          ] 
        }, 
        "#2ECC71", 
        { 
          "operator": "?", 
          "operands": [ 
            { 
              "operator": "==", 
              "operands": [ 
                "@currentField", 
                "Red" 
              ] 
            }, 
            "#E74C3C", 
            { 
              "operator": "?", 
              "operands": [ 
                { 
                 "operator": "==", 
                  "operands": [ 
                    "@currentField", 
                    "Yellow" 
                  ] 
                }, 
                "#F1C40F", 
                { 
                  "operator": "?", 
                  "operands": [ 
                    { 
                      "operator": "==", 
                      "operands": [ 
                        "@currentField", 
                        "Purple" 
                      ] 
                    }, 
                    "#76448A", 
                    "" 
                  ] 
                } 
              ] 
            } 
          ] 
        } 
      ] 
    } 
  } 
} 

You can add the JSON code in that particular column in two ways,

• Navigate to list setting -> column -> then add JSON code
• You can click the title of column in list view itself then column setting and format this column and JSON code editor will open on  the right of the screen

And the final view of the list would be like below.

SPFx - Issue and resolution about changing Webpart ID

In one of the scenarios, we needed to change the web part id, so I created a new GUID and replaced with the original Id in the ”WebPart.manifest.json” file as mentioned below.

Web Part with original GUID

Fig1: Office 365 – SharePoint Online: SPFX web part - webpart.manifests.json file with original Id

Web Part with new GUID

Fig2: Office 365 – SharePoint Online: SPFX web part: webpart.manifests.json file with new Id

I didn’t realize the warning coming under the new replaced GUID, as shown in the below figure.

Fig3: Office 365 – SharePoint Online: SPFX web part – warning for the new GUID replaced with the original one

I started with the following commands.

gulp clean = > Successfully executed
gulp build = > Successfully executed
gulp bundle –ship =>Failed with following error:
The string does not match the pattern of”^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$”.

ID

It is a universally unique component id. Each client-side component is required to have this id. Once an id has been used for a component, it cannot be changed. A change in this value is treated the same as the creation of a new component. Two components are never expected to have the same id.

[11:31:59]Error – [write-manifests] Manifest validation error(./src/webparts/followedSites/FollowedSitesWebPart.manifest.json):
(#/)Data does not match any schemas from ‘oneOf’
(#/)Missing required property: description
(#/)Missing required property: extensionType
(#/component Type)No enum match for: WebPart
(#/id)String does not match pattern^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$:ABA304B8-E7DE-4CC0-A2CC-083E07AC5E2A
(#/)Missing required property: items
(#/)Missing required property: root ComponentId
About to exit with code: 0
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1

Solution

As gulp bundle –ship command failed with the above issue.

Then, I looked into the warning and realized the issue. I noticed the difference between web part IDs.
The original ID of the web part was in lowercase letters and the ID that I manually updated was in uppercase letters. Then, I saw the regular expression which threw the error and a warning as well – ^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$ So, I changed the new ID in lowercase letters.

Well, that worked! I could execute the gulp bundle –ship command successfully.
This seems to be a weird issue but it’s by design. I didn’t understand the logic behind this anyway.

Conclusion/Takeaway

Always use GUID in lowercase letters.