Custom Pages use different controls than Canvas Apps

 Those who've worked with canvas apps and custom pages have probably noticed that there are some controls which are only available in canvas apps, like pen input, drop down and address input, but today I noticed that one a particular control that has been replaced.
More specifically, the text input control.

Canvas Apps has a control called Text Input, it's a basic input box with some nice properties, like Reset, and default value.
Custom Pages does not have Text Input, they instead have something called a Text Box, and it does not have the abovementioned properties.

Why is that important? Well say you've got a gallery and you use some controls to input text there, let's say you use it to be able to update multiple rows at the same time. Now you want to have any function to modify several items at the same time, in this example say we want a CLEAR button which reverts the changes you have done since last save.
With a Text Input, you can simply put a variable in the Reset property like so:

Next you add a button and put this in the OnSelect formula:

What this does is set "reset" to true, which will revert the value in the text box to the default value. Any modifications done in the text boxes that aren't reflected in the data source is now reverted for all rows.

So what about custom pages?

Unfortunately the Text Box found in custom pages do not have a reset or default value. That means the only way to edit the values in these text boxes is to edit the data source. This leads to an anti-pattern, where instead of using the actual data source to list items we start using collections to store the data. This is really ineffective and can slow down the app considerably.

To reproduce the same functionality as above, you would need to do the following.
1: Create a collection used as input for the gallery, in this case I added it in app start

2: Next I set the gallery items to that variable

3: Create a clear button, where I do another ClearCollect identical to the one in app start

Now I can reset the changes since last save, but it will also reload all the data, which can can severely affect the performance. Additionally, having data in collections can cause discrepancy between the collected and stored data, especially if they are used in several components.

Comments

Post a Comment

Popular posts from this blog

Migrate Power Pages to enhanced data model

Image
 So you want to get on the hype train... On September 29th the new enhanced data model, solutions and pipelines was made available for Power Pages. Huzzah ! Now, you might have read the small print saying  " Guidance and tooling support to help you migrate from the standard data model to the enhanced data model will be provided in a later update soon. " Microsoft, 2023   Well I am here to tell you that there's an easy way to migrate (YMMV) using the pac tool . For this I assume you've installed the latest version of the power pages packages and that you've activated the enhanced data model. If not, please see this article . First, download your old portal using the following command pac paportal download --webSiteId your-guid-here --path yourLocalFolderHere Next, upload the portal as an enhanced data model pac paportal upload --path yourLocalFolderHere --modelVersion 2 --forceUploadAll Finally, assuming everything went successfully and blissfully fine (again, YM
Read more

Adding new assets to a Power Pages solution

Image
 In case you missed it, some weeks ago Microsoft made Power Pages solution aware for everyone (NB: Only for enhanced data model (NBNB: How to convert from the old to the new data model ))  🎉🎉🎉🎉 But did you notice this text box on the page? This means that if you are a decent human being and put your Power Pages project into a solution, whenver you add mode site components to your Page it won't automatically get added to the solution (tl;dr: table rows), you have to add them manually. To make matters worse there are of course no prefixes or anything to tell you where a certain site component belongs, so it looks like this Well do not fret anymore, for I have the best of news for you. The easiest way to add all the missing components, starts by removing something, namely the site itself. Step 1: Open the solution, and remove the site from the solution (NB! Don't delete from the environment) Step 2: Add the site back into the solution Step 3: Profit, you now have all the requ
Read more

Using upsert in power fx with multiple records

There's a lot of good content to be found out there regarding Power FX and the different functions it has, but one I struggled to find (blame my lack of google-fu) was how to do upsert requests with multiple records. tl;dr For those who don't need/want any more context, here's an example on patching new and updated records using a defined collection of contacts: ClearCollect ( myContacts , Contacts @ {     'Last Name': "Wick" ,     'First Name': "John" ,     Contact: GUID ( "4d751116-985d-4fa2-ba96-cdf70511de13" ) }, Contacts @ {     'Last Name': "John" ,     'First Name': "Little" ,     Contact: Blank () }) ; Patch ( Contacts , myContacts ) ;   And here is one generating the records to be updated in the patch statement: ClearCollect ( myContacts ,     { GivenName: "Michael" , Surname: "Bolton" , Id: "a46a84cf-df57-48de-a418-a7b937a91363" },     { GivenName:
Read more