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!
