Editable Grid using Gallery and Modern controls in Power apps

Requirement: Power apps editable grid using Gallery and Modern controls

Create a SharePoint list “Employee List Grid”, Create columns as shown in below

• Title: Employee Name- Single line of text column
• Designation- Choice column (IT, Designer, Developer, Finance, HR,Production)
• Feedback- Choice column( Excellent, Average, Good, Bad)
• Date of joining- Date and Time column
• Improvement- Yes/ No column

Now Create a Blank canvas app. enable modern controls from settings> Upcoming feature> Preview> enable -Try out the modern controls.

Add Label to the screen. Add blank vertical gallery to the screen and select the TextInput, dropdown, dropdown2, Checkbox, datepicker, button from Modern Controls , and icon.

Add Badge, On Badge place the Text label and InfoPath, On InfoPath Content Property: Provide the Name of the column.

For Gallery on Items Property:

Sort(
    Filter(
        'Employee List Grid',
        varReset && (IsBlank(DesignationDD.Selected.Value)|| Designation.Value= DesignationDD.Selected.Value)
    ),
    Modified,
    SortOrder.Descending
)

On Gallery- 
For Textinput control-Value Property: ThisItem.Title

For dropdown control-Items property: Choices('list name', Designation)
Defaultselecteditem Property: ThisItem.Designation

For dropdown control-Items Property: Choices('list name', Feedback)
Defaultselecteditem Property: ThisItem.Feedback

For Datepicker control- Value Property: ThisItem.'Date of joining'

For Checkbox- label Property: " Improvement"

Now select all the columns on OnSelect Property: Select(buttonCanvas1)

For gallery on Button, Create a collection, and update the collection of all the items in gallery.

OnSelect property:

If(
    IsBlank(
        LookUp(
            colGridUpdates,
            ID = ThisItem.ID
        )
    ),
    Collect(
        colGridUpdates,
        ThisItem
    )
);
UpdateIf(
    colGridUpdates,
    ID = ThisItem.ID,
    {
        Title: 'Employee Name'.Value,
        Designation: Designationclmn.Selected,
        Feedback: Feedbackclmn.Selected,
        'Date of joining': 'DatePicker Dateofjoining'.Value,
        Improvement: CheckboxImprovment.Checked
    }
)

Note: ‘Employee Name’ is the textinput Modern control, Designationclmn is Dropdown of Modern control, Feedback is the dropdown Modern control , DatePicker Dateofjoining is Datepicker Modern control, CheckboxImprovment is the checkbox modern control.

Add Save Button to the screen, Showcolumns, notify success message, clear the collection and set the variable, if the items were adding or modifying then set it as true. Reset the dropdown when user save the newly added item to the gallery.

OnSelect Property:

Patch(
    'Employee List Grid',
    ShowColumns(
        colGridUpdates,
        "Title",
        "Designation",
        "Feedback",
        "Dateofjoining",
        "Improvement",
        "ID"
    )
);
Notify(
    " Grid update saved successfully",
    NotificationType.Success,
    3000
);
Clear(colGridUpdates);
Set(
    varReset,
    false
);
Set(
    varReset,
    true
);
Reset(DesignationDD)

DisplayMode Property: 

If(CountRows(colGridUpdates)=0,DisplayMode.Disabled, DisplayMode.Edit)

Add Refresh emoji to the Button by selecting Windows+Periods.

Refresh button- OnSelect property:

Clear(colGridUpdates); Set(varReset,false); Set(varReset,true);Reset(DesignationDD) 

+New Button, after adding new item to the gallery display new button after saving the data for this set variable is used on below- OnSelect Property:

Patch('Employee List Grid',Defaults('Employee List Grid'),{Title: "New Student"} ); Set(varReset,false); Set(varReset,true) 

DisplayMode Property: 
If(CountRows(colGridUpdates)=0, DisplayMode.Edit, DisplayMode.Disabled) 

Add Textlabel as Designation and Dropdown for Designation, same as Designation column in gallery.

Items property: Choices('Employee List Grid'.Designation)

Trash icon- OnSelect property:

Remove('Employee List Grid', ThisItem); Set(varReset,false); Set(varReset, true)