How to create a responsible editable grid in canvas app using containers.

We will show you how to create a Responsive Editable Grid in Canvas App as quick as possible with the Horizontal container and Vertical container.

Login D365: https://make.powerapps.com/
Create a new Canvas App, click on Edit App.

Part 1 :

Create new Screen Rename Event Screen.

Place a Vertical Container on the screen.

Height= Parent.Height

Width= Parent.Width

Place a Horizontal Container for buttons inside Vertical Container on the screen.

Flexible height off

Height =50

Place a Horizontal Container for Table Header inside Vertical Container on the screen.

Flexible height off

Height =50

Inside a Horizontal Container place Horizontal Gallery

Insert label 4 and rename the label inside of header container.

 Moving on to EditableGridContentGallery(Blank Vertical Gallery), insert 4 Text Inputs to the Container, rename all the Text Inputs accordingly and for each Text Input, we will map the X and Width property of each text input control to correspond with the Title labels in TableHeaderContainer

 

Events: Combobox Items : Choices('Event Activity')

Event Type: Textbox Default : ThisItem.'Event Date Time'

Event Date Time:  Date picker control Added

DeafultDate: ThisItem.'Event Date Time'

Onchange: ClearCollect(UpdateEvents,Patch(Events,ThisItem,{Name:"Event",'Event Activity':ComboBox2.Selected.Value,'Event Type':TextInput2_5.Text,'Event Date Time':DateValue1_1.SelectedDate + Time(

         Value(HourValue1_1.Selected.Value),

         Value(MinuteValue1_1.Selected.Value),

         0),Location:ComboBox2_1.Selected.Value}));

Hours Drop Down: Items: ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]

OnChange: ClearCollect(UpdateEvents,Patch(Events,ThisItem,{Name:"Event",'Event Activity':ComboBox2.Selected.Value,'Event Type':TextInput2_5.Text,'Event Date Time':DateValue1_1.SelectedDate + Time(

         Value(HourValue1_1.Selected.Value),

         Value(MinuteValue1_1.Selected.Value),

         0),Location:ComboBox2_1.Selected.Value}));

 

Separator: label: Text= ’:’

Time Drop Down: Items: ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59"]

OnChange: ClearCollect(UpdateEvents,Patch(Events,ThisItem,{Name:"Event",'Event Activity':ComboBox2.Selected.Value,'Event Type':TextInput2_5.Text,'Event Date Time':DateValue1_1.SelectedDate + Time(

         Value(HourValue1_1.Selected.Value),

         Value(MinuteValue1_1.Selected.Value),

         0),Location:ComboBox2_1.Selected.Value}));

Events: ComboBox Items: Choices(Location_1)

 

Part 2: For Create, Save, Delete and Update operations

i)                    For Create new Record +

OnSelect: Patch(Events,Defaults(Events),{Name:"Test event"})

i)                    For Save Record:

OnSelect: Patch(Events,UpdateEvents);

Refresh(Events);

Reset(Gallery3);

i)                    For Delete Record:

OnSelect: Remove(Events,ThisItem);
Refresh(Events);
 
iV) For Update Record:
Onselect Eye Icon:
UpdateContext({IsEditing:!IsEditing});
Icon: If(IsEditing,Icon.View,Icon.Edit);

OnSelect Edit Icon:
UpdateContext({IsEditing:!IsEditing});
Icon: If(IsEditing,Icon.View,Icon.Edit);
Note: After selection of the Icon click on Save Button the Record will update in Database.
 

Then completion of development then Save the Application and Test the scenarios.