Editing feature layer values from custom widget

[HarryBonshor-Mayes]

Hello,

I've been working on producing a custom widget which allows the user to use tick boxes to select images for a future use down the line. Currently I have the widget generate divs for each object with attachments and produce a number of tick boxes equivalent to attachments.

What I now want to do is be able to edit values in a given field using these tick boxes. There isn't an easy solution for my end goal so I'm intending to do it like one of these two methods:

Method 1 - Using an array like this [0,0,0]

In this method, if a user clicked the 2nd attachment tickbox I would like the value to update to 0,1,0

Method 2 - Creating an array like this [1,3]

In this method, the values are added as shown above when the user clicks box 1 and box 3.

I'm not sure how to go about editing the values. Below is my current code for generating the data render:

import { React, IMDataSourceInfo, DataSource, DataSourceManager, DataSourceStatus, FeatureLayerQueryParams, AllWidgetProps, DataSourceComponent } from 'jimu-core';
const { useState, useEffect, useRef } = React;

export default function Widget(props: AllWidgetProps<{}>){
  const [query, setQuery] = useState<FeatureLayerQueryParams>(null);
  const cityNameRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    queryFunc();
  }, []);

  const isDsConfigured = () => {
    if (props.useDataSources &&
      props.useDataSources.length === 1 &&
      props.useDataSources[0].fields &&
      props.useDataSources[0].fields.length === 1) {
      return true;
    }
    return false;
  }

  const queryFunc = () => {
    if (!isDsConfigured()) {
      return;
    }
    const fieldName = props.useDataSources[0].fields[0];
    const w = cityNameRef.current && cityNameRef.current.value ?
      `${fieldName} like '%${cityNameRef.current.value}%'` : '1=1';
    setQuery({
      where: w,
      outFields: ['*'],
      pageSize: 10
    });
  }

  // EDIT BELOW HERE

  const dataRender = (ds: DataSource, info: IMDataSourceInfo) => {
    const areaCommentsName = 'Comments'; 
    const objectIdFieldName = 'OBJECTID';
    const attachmentFieldName = 'attachment_count';
  
    const generateAttachmentCheckboxes = (count: number) => {
      const checkboxes = [];
      for (let i = 0; i < count; i++) {
        checkboxes.push(<input type="checkbox" key={i} style={attachmentCheckboxStyle} />);
      }
      return checkboxes;
    };
  
    return (
      <>
        <div className="record-list" style={recordListStyle}>
          {ds && ds.getStatus() === DataSourceStatus.Loaded ? (
            ds.getRecords().map((r, i) => {
              const objectIdValue = r.getData()[objectIdFieldName];
              const commentValue = r.getData()[areaCommentsName];
              const attachmentValue = r.getData()[attachmentFieldName];
              return (
                <div key={i} style={recordRowStyle}>
                  <div style={recordItemStylePoint}><strong>Point:</strong> {objectIdValue}</div>
                  <div style={recordItemStyle}><strong>Comment:</strong> {commentValue}</div>
                  <div style={recordItemStyle}><strong>Photos to include:</strong> {generateAttachmentCheckboxes(attachmentValue)}</div>
                </div>
              );
            })
          ) : null}
        </div>
      </>
    );
  };

  // EDIT ABOVE HERE


  if (!isDsConfigured()) {
    return <h3>
      <br />
      Configure the data source.
    </h3>;
  }
  return <div className="widget-use-feature-layer" style={{ width: '100%', height: '100%', maxHeight: '800px', overflow: 'auto' }}>

    <DataSourceComponent useDataSource={props.useDataSources[0]} query={query} widgetId={props.id} queryCount>
      {dataRender}
    </DataSourceComponent>
  </div>;
}

 Any guidance on this would be appreciated,  thanks!