Simple effective editable Gallery

The following is a guide to constructing an editable gallery with the user able edit in-line records and save back to the data source. It has functionality to ensure only one record can be chosen and no others selected unless the target is saved or cancelled.
NOTE: This example uses Classic controls you will need on some Modern controls to change to the equivalent references. Also the example uses SharePoint.

Firstly, but this at Screen OnVisible

UpdateContext(
   {
      varEditID: 0,
      varReset: false
   }
)

Insert a blank Vertical Gallery and use a SharePoint List (or collection based on a SharePoint List) as the Items. Any normal filters can also be used. If ShowColumns are used, ensure that the ID column is included – it does not however need to be displayed in the Gallery.

For any Gallery fields not needing to be edited, use a Text Label with the Items

ThisItem.YourFieldName

For fields you need to be edited, use the appropriate control for the field type (Text Input for Text fields, Drop-down/Combo Box for Choice fields or if you want to give the user choices writing back to a Text field, DatePicker for Date/Time fields.
Set the Default / DefaultDate / DefaultSelectedItems to

ThisItem.YourFieldName

or whatever is required if different target type.

Ensure that the OnSelect of both the Gallery and all controls is false

Make the DisplayMode of all these (editable) controls

If(
   varEditID = ThisItem.ID,
   DisplayMode.Edit,
   DisplayMode.View
)

and the Reset

varReset

Now put two icons in the gallery – you may choose others, but Icon.Cancel and Icon.Edit are a good start.

Make the Visible of Icon.Cancel

varEditID = ThisItem.ID

and the OnChange

UpdateContext(
   {
      varEditID: 0,
      varReset: true
   }
)

Now the other icon (Icon.Edit), set the Icon property to

If(
   varEditID = ThisItem.ID,
   Icon.Save,
   Icon.Edit
)

the OnSelect property to

If(
   varEditID = 0,
   UpdateContext(
      {
         varEditID: ThisItem.ID,
         varReset: false
      }
   ),
   Patch(
      YourDataSourceName,
      {
         ID: ThisItem.ID,
         TextField: TextInput.Text,     //use .Value if modern control
         ChoiceField: ComboBox.Selected.Value,
         DateField: DatePicker.SelectedDate
      }
   );
   UpdateContext({varEditID: 0})
)

and the Visible property to

varEditID = ThisItem.ID || varEditID = 0

So what is happening here ?

When the gallery first opens, all fields are in View Mode and and Edit Icon is on the right side.

Pressing the Edit Icon

• Changes all the controls in that record to Edit Mode
• All controls in other records remain in View Mode and edit icons in these records are hidden – they also cannot be selected when the target record is in Edit Mode.
• Makes the Cancel Icon visible
• Changes the Edit Icon to a Save Icon

Pressing the Save Icon (actually the original Edit Icon)

• Saves the changes (if any) you have made to the record
• Puts the entire gallery back into View Mode so another record can be edited

Pressing the Cancel Icon

• Resets any editable controls
• Puts the entire gallery back into View Mode so another record can be edited