Good afternoon,
I am trying to achieve the following:
In an application built with experience builder, using the editor widget, delete all records when the website (application) is refreshed. I know that the whole purpose of the editor widget is to keep all data between sessions (the opposite of Draw widget which I do not want to use for different reasons). I have installed the Experience builder developer edition and trying to find the best option to go about it.
I am thinking of two options:
1. Automatize it somehow "behind the scenes" to delete all data when the session is refreshed.
2. Enable a new "delete all data" button that the user can click.
I would appreciate any help to point me in the right direction!
Solved! Go to Solution.
I will reply here to my own question because I found a solution: for simplicity I chose the second option, an unique button that will delete all data from the feature layer shown in the map widget. Here s the code of the widget.tsx:
/** @jsx jsx */
import { React, jsx, AllWidgetProps } from 'jimu-core';
import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis';
import { Button } from 'jimu-ui';
import FeatureLayer from 'esri/layers/FeatureLayer';
interface State {
jimuMapView: JimuMapView;
}
export default class DeleteAllFeaturesWidget extends React.PureComponent<AllWidgetProps<{}>, State> {
constructor(props) {
super(props);
this.state = {
jimuMapView: null,
};
}
handleActiveViewChange = (jimuMapView: JimuMapView) => {
this.setState({ jimuMapView });
}
deleteAllFeatures = () => {
const { jimuMapView } = this.state;
if (jimuMapView && jimuMapView.view) {
const layer = jimuMapView.view.map.layers.find((l) => l.type === 'feature') as FeatureLayer;
if (layer) {
layer.queryFeatures().then((results) => {
const objectIds = results.features.map((feature) => feature.attributes[layer.objectIdField]);
if (objectIds.length > 0) {
layer.applyEdits({
deleteFeatures: objectIds.map((objectId) => ({ objectId })),
}).then(() => {
alert('All features deleted successfully.');
}).catch((error) => {
console.error('Failed to delete features:', error);
alert('Failed to delete features.');
});
} else {
alert('No features found to delete.');
}
}).catch((error) => {
console.error('Failed to query features:', error);
});
} else {
alert('No feature layer found in the map.');
}
} else {
alert('MapView is not ready.');
}
}
render() {
return (
<div className="widget-delete-all-features">
<JimuMapViewComponent
useMapWidgetId="widget_1"
onActiveViewChange={this.handleActiveViewChange}
/>
<Button type="primary" onClick={this.deleteAllFeatures}>Delete All</Button>
</div>
);
}
}
Cheers!
I will reply here to my own question because I found a solution: for simplicity I chose the second option, an unique button that will delete all data from the feature layer shown in the map widget. Here s the code of the widget.tsx:
/** @jsx jsx */
import { React, jsx, AllWidgetProps } from 'jimu-core';
import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis';
import { Button } from 'jimu-ui';
import FeatureLayer from 'esri/layers/FeatureLayer';
interface State {
jimuMapView: JimuMapView;
}
export default class DeleteAllFeaturesWidget extends React.PureComponent<AllWidgetProps<{}>, State> {
constructor(props) {
super(props);
this.state = {
jimuMapView: null,
};
}
handleActiveViewChange = (jimuMapView: JimuMapView) => {
this.setState({ jimuMapView });
}
deleteAllFeatures = () => {
const { jimuMapView } = this.state;
if (jimuMapView && jimuMapView.view) {
const layer = jimuMapView.view.map.layers.find((l) => l.type === 'feature') as FeatureLayer;
if (layer) {
layer.queryFeatures().then((results) => {
const objectIds = results.features.map((feature) => feature.attributes[layer.objectIdField]);
if (objectIds.length > 0) {
layer.applyEdits({
deleteFeatures: objectIds.map((objectId) => ({ objectId })),
}).then(() => {
alert('All features deleted successfully.');
}).catch((error) => {
console.error('Failed to delete features:', error);
alert('Failed to delete features.');
});
} else {
alert('No features found to delete.');
}
}).catch((error) => {
console.error('Failed to query features:', error);
});
} else {
alert('No feature layer found in the map.');
}
} else {
alert('MapView is not ready.');
}
}
render() {
return (
<div className="widget-delete-all-features">
<JimuMapViewComponent
useMapWidgetId="widget_1"
onActiveViewChange={this.handleActiveViewChange}
/>
<Button type="primary" onClick={this.deleteAllFeatures}>Delete All</Button>
</div>
);
}
}
Cheers!