Editing feature layer values from custom widget

HarryBonshor-Mayes — Wed, 17 Apr 2024 13:56:43 GMT

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!

Re: Editing feature layer values from custom widget

Jesan90 — Tue, 25 Jun 2024 23:27:25 GMT

Hi, I am doing something similar, have you found any solution?

topic Re: Editing feature layer values from custom widget in ArcGIS Experience Builder Questions

Editing feature layer values from custom widget

Re: Editing feature layer values from custom widget