Select to view content in your preferred language

Delete all features on website refresh (or end of session)

232
1
Jump to solution
08-20-2024 08:54 AM
Labels (2)
bogdanpalade2
Regular Contributor

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! 

1 Solution

Accepted Solutions
bogdanpalade2
Regular Contributor

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!

View solution in original post

0 Kudos
1 Reply
bogdanpalade2
Regular Contributor

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!

0 Kudos