cancel
Showing results for 
Search instead for 
Did you mean: 

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

 

Excel.pngTypical 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

 

Frame.pngUI 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})

 

CRUD.PNGCall-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

Really love the idea of a single page app that efficiently does all CRUD operations! Bravo!

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.

Thanks a ton @hpkeong - I was tinkering building my own CRUD based applications and having easily viewable information like this really helps the learning curve!

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

Anonymous

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!Smiley Happy

 

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

 

 

 

 

Meet Our Blog Authors
  • PowerApps Community Mentor 2018
  • I am the Owner/Principal Architect at Don't Pa..Panic Consulting. I've been working in the information technology industry for over 30 years, and have played key roles in several enterprise SharePoint architectural design review, Intranet deployment, application development, and migration projects. I've been a Microsoft Most Valuable Professional (MVP) 12 consecutive years and am also a Microsoft Certified SharePoint Masters (MCSM) since 2013.
  • My name is Timothy Shaw and I create digital solutions using the Power Platform, Office 365, and Azure SQL and handle the IT for a small company in the energy sector. When not building the future :), I enjoy playing guitar, good (or really bad!) sci-fi, Xbox therapy, and hanging with my wife and son. Twitter: @ShortForTim