How to Clear Barriers in Direction Widget ?

SivaramKrishnan2 — Wed, 25 Apr 2018 10:55:06 GMT

When i tried the clear button available in the Direction widget of WAB, it is clearing all the Graphics (Routes and Barriers). But i want to clear only the Barriers, is there any possibilities to do so. If yes, please help me on this.

before clicking the clear button(with barriers)

After clicking the clear button for one time. all the graphics has gone, but i want to clear only barriers.

Thanks & Regards

Siva

Re: How to Clear Barriers in Direction Widget ?

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:32:07 GMT

Siva,

Here is what you need to customize the directions widget to do that:

In the Widget.js (lines 3-17 need to be added to the _onDirectionsActivate)

      _onDirectionsActivate: function () {
        //Add the clear barrier button
        require(['dojo/query', 'dojo/dom-construct'], lang.hitch(this, function(query,domConstruct){
          var clearLink = query('.esriStopsAddDestination')[0];
          var clearBarLink = domConstruct.create('div', {
            'class':'esriClearBarrierButton esriDirectionsButton esriDirectionsTabButton',
            title: 'Clear Barriers',
            style: 'display: inline-block;'
          }, clearLink);
          on(clearBarLink, 'click', lang.hitch(this, function(){
            if(this._dijitDirections.routeParams.polylineBarriers){
              this._dijitDirections.routeParams.polylineBarriers.features = [];
            }
            this._dijitDirections._polylineBarriersLayer.clear();
            this._dijitDirections.getDirections();
          }));
        }));

        if (this.config.defaultLocations &&
          this.config.defaultLocations.length && this.config.defaultLocations.length > 0 &&
          false === this._isInitPresetStopsFlag) {

          this._isInitPresetStopsFlag = true;
          this._dijitDirections.addStops(this.config.defaultLocations);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the css/style.css add this rule at the very bottom of that file:

.jimu-widget-directions .simpleDirections .esriClearBarrierButton {
  background-image: url(../../../jimu.js/css/images/rubbish_bin.png);
  opacity: 0.8;
  filter: alpha(opacity=80); /* For IE8 and earlier */
}‍‍‍‍‍

Re: How to Clear Barriers in Direction Widget ?

SivaramKrishnan2 — Mon, 30 Apr 2018 12:39:58 GMT

Robert,

Thank you so much for the response,

It is working without any issue at my end when i implement this code snippet into my application.

Regards

Siva

topic Re: How to Clear Barriers in Direction Widget ? in Web AppBuilder Custom Widgets Questions

How to Clear Barriers in Direction Widget ?

Re: How to Clear Barriers in Direction Widget ?

Re: How to Clear Barriers in Direction Widget ?