Add ShowSaveButton on Directiosn Widget arcgis api 3.38

281
8
10-27-2021 04:38 AM
benchikh
New Contributor III

Im working with Directions Widget with arcgis JS version 3.38 and want to display the Save button on the widget, so I have added the ShowSabeButton parameter. But still can't displayed on the widget!

 var directionsW = new Directions({
            map: map,
            routeTaskUrl:                   
             "https://192.168.7.45:6443/arcgis/rest/services/CALCUL_ITINERAIRE/NAServer/Route",
            **showSaveButton: true**

Can anyone help me with this please?

0 Kudos
8 Replies
AndyWhitaker1
New Contributor III

Not sure if this helps, but the save button sounds like it will be shown if your network service is on ArcGIS Online or Portal.


https://developers.arcgis.com/javascript/3/jsapi/directions-amd.html#showsavebutton
"Applicable if the widget works with a Network Analyst Server federated with ArcGIS Online or Portal. In addition, the widget may display this button in instances where it's needed to save and share routes with Navigator or other client applications. (Added at v3.17)"

You could always create your own save button in JavaScript that mimics the default ArcGIS one by applying the same CSS.  Something like this:

 

const savePrintButtonContainer = this.map.directions._savePrintBtnContainer;
const savebtn = domConstruct.toDom(
							"<div tabIndex='0' role='button' class='esriResultsSave esriDirectionsButton esriDirectionsTabButton' data-blur-on-click='true' data-dojo-attach-point='saveBtn' title='Save Route' id='saveButton' style='display: none;'> \
						</div>");
this._saveButton = domConstruct.place(savebtn, savePrintButtonContainer, "last");
						
$(this._saveButton).on("click", this.saveRoute.bind(this));

 

benchikh
New Contributor III

Many thanks for your reply, I will try doing your suggestions and let you know !

0 Kudos
benchikh
New Contributor III

Thanks again for your help, I have tried your code above, but got the following error "domConstruct.toDom is not a function"

below is my declaration, Im a beginner so your help would be much appreciated

require([ "esri/map", "esri/dijit/Directions", "dojo/parser", "esri/tasks/locator", "esri/tasks/FeatureSet", "esri/tasks/DirectionsFeatureSet", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/domReady!" ], function ( Map, Directions, parser, Locator, FeatureSet, DirectionsFeatureSet, domConstruct, dom, on

0 Kudos
KenBuja
MVP Honored Contributor

The function arguments have to be in the same order as the require modules:

require([ "esri/map", "esri/dijit/Directions", "dojo/parser", "esri/tasks/locator", "esri/tasks/FeatureSet", "esri/tasks/DirectionsFeatureSet", "dojo/dom-construct", "dojo/dom", "dojo/on", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], 
function ( Map, Directions, parser, Locator, FeatureSet, DirectionsFeatureSet, domConstruct, dom, on
benchikh
New Contributor III

Many thanks looks like the error message now is changed to  "_savePrintBtnContainer" is not recognized in the below instruction : (knowing that I have a div with "_savePrintBtnContainer" class name)

const savePrintButtonContainer = this.map.directions._savePrintBtnContainer;

ERROR : Cannot read properties of undefined (reading '_savePrintBtnContainer')

0 Kudos
KenBuja
MVP Honored Contributor

This code works in the sample. It gets the container directly from the widget, but has to wait until the widget is loaded

 

directions.on("load", function(){
  const savePrintButtonContainer = directions._savePrintBtnContainer;
  console.log(savePrintButtonContainer);
});

 

 

Noah-Sager
Esri Regular Contributor

Another option is to try your route service in the sample below to make sure it works (uncomment line 51).

https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=widget_directions_basic

 

0 Kudos
benchikh
New Contributor III

Yes, My route service works fine, except that I cannot see the savebtn .

0 Kudos