Creating editable table in PowerApps
Nowadays Microsoft is forcing its products from Power Automate range everywhere. PowerApps is one among them/
PowerApps allows to create/design quite enhanced user application with almost no development skills. It has got nice visual constructor, lots of different controls and connector to variety of datasources. In 30 minutes time you are able to create user friendly application, which being coded could take you couple of days. And this is amazing.
However, life is not perfect and everything has got its back side. PowerApps isn't an exception - in case you want to create some enhanced logic, you would definitely faced with lots of limitations. The main problem is related to PowerApps declarative language.
This time I created the app for entering main planned identificators in a way of excel table
The logic is pretty much simple - I had Common Data Service (aka CDS) to store the data, SharePoint Online lists were used as dictionaries. In couple of hours I crated main UI: table landing, all the controls, data connection and so on.
Once the app was ready, I decided to make it a bit more interactive - to make table editable. In network and YouTube tons of different solutions, however all of those allow to edit entire table at once. My idea was to edit one single row at a time.
So I added added tow controls - "Save" icon and "Edit" icon for each record in the gallery. While the record is in view mode - we see only "Edit" buttons. But once you click on "Edit" button, the record turns to edit mode and the "Edit" button goes hidden, but the "Save" button becomes visible.
The landing (width, height and X/Y coordinates) for two icons are the same so they could overlay each other. The "Visible" properties of them are opposite (if one is visible, another is not). This is achieved by assigning the variable to the properties - If(EditItemStatus.Value,true,false) for "Save" button and
If(!EditItemStatus.Value,true,false) for "Edit" button.
So far so easy. But how to make only one record to be editable?!! Solution is very obvious:
- add to the gallery hidden text label to have record ID
Text = Text(ThisItem.PlannedIndicators)
- add to the gallery hidden toggle to to indicate whether this record should be edited or not
Default = If(ItemGuid.Text = curItemID,true,false)
- set all controls of the gallery to be "disabled" by default
DisplayMode = If(EditItemStatus.Value && First(UsersCollection).UserRole.Value="Employee",DisplayMode.Edit,DisplayMode.View)
- set an action for "Edit" button to assign current record ID (we know what record is set to edit mode)
OnSelect = Select(Parent);Set(curItemID,Text(ThisItem.PlannedIndicators))
And here is the overall logic of the solution.
- by default set all record's controls to "view" mode (by assigning the value to the variable);
- variable assign to true if ID of selected item equals ID of current item;
- hidden control "Status" set to off;
- hide "Save" button and display "Edit" button;
- once "Save" is clicked, set current item ID to selected item ID
- enable editing and hide "Edit" button, display "Save" button.
So, all is straight forward, but needed to spend some time to come up with this idea.
Hope, this might help some one in his/her projects.