CRUD in Single-Page (Tablet Mode)
Monday’s Guru Best Practice:
PowerApps Group has provided an excellent Phone-Layout 3-Screens CRUD Apps and generate automatically using existing data.
For PC-Tablet Layout, it is yet to be included by PowerApps Group.
Nevertheless, 3-Screens CRUD may NOT be so practical for Big-Screen devices. Hence, I have resorted to making app for PC-Tablet Layout with ONE-SCREEN CRUD, so that it looks neat, faster response, no-navigation and hopefully, with less resources used, the apps will response much more smoothly.
Step 1:
- Create a Database, e.g: TableMMD
Typical Equipment Reg List (as of ISO 9001: 2015 QMS 7.1.5)
Step 2:
- Design a simple Layout, with:
- Title, BackButton and AddNewButton
- Headers for each fields
- Gallery with TextInputs
- Gallery with DataSource, EditButton (To cover the whole record, with No-Fill Color)
- SaveButton & CancelButton
UI Layout Concept
Step 3:
Connection to DataSource - TableMMD
Link to datasource:
Gallery.Items (DataSource😞
TableMMD
Screen.OnVisible:
UpdateContext({rst: false}); UpdateContext({rst: true, EquipMLH: 664, EquipMLY: 104, AddPopUp: false})
Gallery.Items (with TextInput):
Table(EditEquipMaster))
TextInput.Reset: rst
Y: EquipMLY
Height: EquipMLH
[Purpose: to Re-Size Gallery to show/cover Gallery(TextInput) Area]
Button.OnSelect: [Inside Gallery.Items (DS), Color: No-Fill]
UpdateContext({AddPopUp: true, EquipMLY: 166, EquipMLH: 602, EditEquipMaster: ThisItem})
Button.Fill:
If(ThisItem.IsSelected, RGBA(255, 255, 1, 0.2), RGBA(0, 0, 0, 0))
Click On (Invisible Button): Any Record (inside Gallery (DS)
- SaveButton & X Button will Show-Up (Visible)
- Edit Data inside TextInput
- The selected record will be highlighted with color (e,g. here: LightYellow)
AddButton.OnSelect:
UpdateContext({AddPopUp: true, EquipMLH: 602, EquipMLY: 166}); UpdateContext({EditEquipMaster: Defaults(TableMMD)})
Click On: Add Icon
- SaveButton & X Button will Show-Up (Visible)
- Add Data inside TextInput
SaveButton.OnSelect: [Red Font: Saving Formula; Can be Replaced with SubmitForm & other saving method]
Patch(TableMMD, EditEquipMaster, {No: If(!IsBlank(TableMMD.No), EditEquipMaster.No, Text(Max(TableMMD, No) + 1)), Serial_No: TextInput3_14.Text, Controlled_No: TextInput3_15.Text, Equipment_Name: Proper(TextInput3_21.Text), Brand: Proper(TextInput3_22.Text), Manufacturer: Proper(TextInput3_23.Text), Model_No: TextInput3_24.Text, Location: Proper(TextInput3_25.Text)}); UpdateContext({AddPopUp: false, EquipMLH: 664, EquipMLY: 104})
CrossButton.OnSelect:
UpdateContext({AddPopUp: false, EquipMLH: 664, EquipMLY: 104})
Call-Out / Bubble with explanations
Final Thought
PowerApps is the perfect tools in creating ERP / Productivity Program in manufacturing. Combination with Mobile Apps to expedite workaround input will expedite the whole data capturing and data analysis process.
Challenge Point....
- DeleteButton: may interested parties add a DeleteButton (next to Save Button and Cancel Button) with formula to deleted selected record.
Comments
-
CRUD in Single-Page (Tablet Mode)
Hi @Anonymous @jarrystowe @Audrie-MSFT
Thanks and appreciate your reference to my blog.
As pointed out and advice from @Audrie-MSFT, I should have complete explanation instead of giving challanges..
Here it is:
Save Button & Cancel (X) Button are stand-alone, but Delete Button must be bound to the database.
So, here it is.the Delete Function
:
Add a Gallery, have the Items set to:
- Gallery.Items = Table(EditEquipMaster)
- Gallery.Visible = AddPopUp
Insert a DELETE button or Trash Icon or anything you wish and set
- Button.OnSelect = Remove(TableMMD, ThisItem)
Rational:
- When you click inside "Data Gallery, "+" button", all of them (Delete, Save & X) will pop-up
- In this case, Delete Button will be append the selected record into "Delete Gallery - but invisible" (This is what I mean as a trick to create Delete to make it look better) - Table(EditEquipMaster)
- So, when you click on any record, you can EDIT and also DEELTE with Remove(TableMMD, ThisItem).
So it is dynamics and you don;t have to navigate different scressn nor hassle in select and unselect different records to delete.
I hope this is my reply to my own question in the nlog.
Note:
If you are wish to have second thought before deleting, you can have extra action:
- Set the *Gallery.Visible = AddPopUp1 (different visible variable)
- Modify the Gallery to have extra Cancel / Back Button inside the same area, with
Button.OnSelect = UpdateContext({AddPopUp1: false, EquipMLH: 664, EquipMLY: 104})
Insert another independent Delete Button / Icon / Trash next to the Save & X, and
- Set the Button.OnSelect = UpdateContext({AddPopUp1: true})
(Make sure to move the * Gallery to a better location to avoid overlapping)
TQ
-
CRUD in Single-Page (Tablet Mode)
For several days, I tried to build an application which enables users to view and edit a data in a single page but I couldn't.
This is very helpful.Great!
-
CRUD in Single-Page (Tablet Mode)
Hi @jarrystowe
You ae most welcome.
I am sorry that I should not have "Challange Point..." for DELEE function after advice from Audrie.
Anyway, once you had problem with DELETE function, do let me know.
It is a trick but quite easy.
TQ
-
CRUD in Single-Page (Tablet Mode)
Hi Audrie, really glad to have your appreciation and I wish other readers can continue to take the challenge by adding DELETE button.
Have a nice day.
-
CRUD in Single-Page (Tablet Mode)
Really love the idea of a single page app that efficiently does all CRUD operations! Bravo!
*This post is locked for comments