Simple effective editable Gallery

Views (15)

WarrenBelz

153,049 Most Valuable Professional

Like(0)

Report

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.

Firstly, put 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 Text 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 and make the DisplayMode of all these (editable) controls

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

and the Reset to varReset

Now put two icons in the gallery - you may choose others, but Icon.Cancel and Icon.Edit are a good start. and set 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(
      {
         varEdit: ThisItem.ID,
         varReset: false
      }
   ),
   Patch(
      SPList,
      {
         ID: ThisItem.ID,
         TextField: TextInput.Text,     //use .Value if modern control
         ChoiceField: ComboBox.Selected.Value,
         DateField: DatePicker.SelectedDate
      }
   );
   UpdateContext({varEdit: 0})
)

and the Visible property to varEdit = ThisItem.ID || varEdit = 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