topic Re: Directions Widget WAB Customize in ArcGIS Web AppBuilder Questions

Directions Widget WAB Customize

AlbertoLópez — Wed, 06 Sep 2017 08:14:00 GMT

Hello;

I have to make some modifications to the WAB 2.3 Developer Edition Directions widget and I do not know if it is possible.

The URL of the route tasks web service is set into the options parameter of the constructor of the directions class:

var options = {

...

routeTaskUrl: this.config.routeTaskUrl,

...

}

this._dijitDirections = new Directions (options, directionContainer);

After of the creation of the widget with this._dijitDirections.startup (); the travel modes select element is displayed and you can select diferents travel models: driving distance, driving time, rural driving time, etc.

I need to change the URL of the Route Task service depending on which travel mode has been selected in the select element, but I do not know if it is possible because the ULR is set into the widget before the select element is displayed.

Any ideas?.

Best regards.

Re: Directions Widget WAB Customize

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:30:45 GMT

Alberto,

I have not tested this but this should work in theory (added lines 64 thru 69 in the Widget.js):

      startup: function(){
        this.inherited(arguments);
        this.portal = portalUtils.getPortal(this.appConfig.portalUrl);

        this._preProcessConfig().then(lang.hitch(this, function(){
          var routeParams = new RouteParameters();
          var routeOptions = this.config.routeOptions;
          if(routeOptions){
            if(routeOptions.directionsLanguage){
              routeParams.directionsLanguage = routeOptions.directionsLanguage;
            }
            else{
              routeParams.directionsLanguage = dojoConfig.locale || "en_us";
            }
            routeParams.directionsLengthUnits = routeOptions.directionsLengthUnits;
            routeParams.directionsOutputType = routeOptions.directionsOutputType;
            if(routeOptions.impedanceAttribute){
              routeParams.impedanceAttribute = routeOptions.impedanceAttribute;
            }
          }

          var options = {
            map: this.map,
            searchOptions: this.config.searchOptions,
            routeParams: routeParams,
            routeTaskUrl: this.config.routeTaskUrl,
            dragging: true,
            showClearButton: true,
            mapClickActive: true
          };

          //set units on root for API-3.20
          if(this.config.routeOptions && this.config.routeOptions.directionsLengthUnits) {
            options.directionsLengthUnits = this.config.routeOptions.directionsLengthUnits;
          }
          if(this.config.trafficLayerUrl){
            this._trafficLayer = new ArcGISDynamicMapServiceLayer(this.config.trafficLayerUrl);
            options.trafficLayer = this._trafficLayer;
            options.traffic = true;
          }else{
            options.traffic = false;
            options.showTrafficOption = false;
          }

          this.setDoNotFetchTravelModes(options).then(lang.hitch(this, function() {
            html.empty(this.directionController);
            var directionContainer = html.create('div', {}, this.directionController);
            //Only init Directions dijit when we can access the route task url.
            esriRequest({
              url: options.routeTaskUrl,
              content: {
                f: 'json'
              },
              handleAs: 'json',
              callbackParamName: 'callback'
            }).then(lang.hitch(this, function() {
              this._dijitDirections = new Directions(options, directionContainer);
              //html.place(this._dijitDirections.domNode, this.directionController);
              this._dijitDirections.startup();
              console.info(this._dijitDirections);

              this.own(on(this._dijitDirections, 'load', lang.hitch(this, this._onDirectionsActivate)));

              this.own(on(this._dijitDirections._travelModeSelector, 'change', lang.hitch(this, function(evt){
                //Now destroy the this._dijitDirections
                this.config.routeTaskUrl = "ypur new url";
                this.destroy();
                this.startup();
              })));
......‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Directions Widget WAB Customize

RobertScheitlin__GISP — Tue, 05 Dec 2017 14:42:30 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: Directions Widget WAB Customize

RufusBobcat — Tue, 20 Sep 2022 19:44:39 GMT

Perhaps this is not entirely related to the original post, but I am going to attempt to piggyback on this:

Are you able to limit which modes of travel are available on the directions widget?