Latest Contributions by EricRuberson1

Cody, if it can be a CSV, check out the Select Widget first, and maybe the Geoprocessing Widget Select widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers  If it needs to be excel, I refer you to my post above on this thread. I don't think Javascript will let you attempt to open any software on the user's computer, so opening automatically is out. Auto downloading is handled by this code: var link = document.createElement("A"); link.href = uri + base64(workbookXML); link.download = wbname || 'Workbook.xls'; link.target = '_blank'; document.body.appendChild(link); link.click(); document.body.removeChild(link);‍‍‍‍‍‍‍ Every variation of "downloading a file via javascript" that I've seen relies on some variation of that. It's essentially a link with the download tag on it which clicks itself, prompting the user to download the file. ... View more

hoo boy. I got this to work but the trick was that you actually save an xml table, but with an excel extension. It's basically a sloppy workaround because this isn't supported without either (its been a while so I'm not 100% accurate here): a) a third party plugin doing it or b) having some kind of server side processing that generates the file and then transfers it back to the client to download. Since I couldnt do either of these things, I went this route. DISCLAIMER: This will almost 100% generate an error when opening (or maybe saving, can't recall) but the error can be ignored. Excel knows it's not a proper excel file and tells you that, but it can still be opened and re-saved within excel. HIGHLY recommend you warn your users about this or they will think you are trying to hack them. In my page we have a line of text right below the button. I have 4 parts that make this work. This is because I'm actually nesting my export to excel button in a sort of report page that my widget generates. Be prepared to alter to your needs. I'm not really going to be able to help anyone with that. 1) a button in a new page that my widget generates, but you should be able to use this like any regular html button. The button takes no input, it just triggers this bit of excel code, which passes worksheet names, the filename, and the software type (I dont know why that's needed) to the code under number 3 down below. function runTablesToExcel(){ tablesToExcel(["'+WorksheetNames.toString().replace(/,/g,'","')+'"], "filename.xls","Excel"); }‍‍‍ 2) this is where I tweak my worksheet names array. Excel has a limit on the length of the names of worksheets and characters that can be in them, or it wont accept the outputted file (I think its 33 characters or so). Because I am generating a new worksheet for every layer that I'm returning, and those are known quantities, I need to replace the names of all of the layers that were causing Excel to reject the created file. If your layernames arent known, you would probably need to trim the lengths of the worksheet names before passing them onto the script in part 3, along with removing the special characters. var wsheetName= (rowCollection[l].layer.layerName).replace(/[^a-zA-Z0-9]/g,'_').replace(/_{2,}/g,'_'); wsheetName=wsheetName.replace("String that is too long","Abbreviation1"); wsheetName=wsheetName.replace("Another String that is too long","Abbreviation2"); wsheetName=wsheetName.replace("Helicopter_Landing_Zone","Heli_LZ"); wsheetName=wsheetName.replace("National_Monument_and_Landmark","Ntl_Mnmt_and_Landmark"); WorksheetNames.push(wsheetName);‍‍‍‍‍‍ 3) This is the code that does the exporting. Check out the stack over flow question that I link to in it, this is pretty much where I got this from and modified it. I have the below javascript saved as a file called "TablesToExcel.js" in my WAB App's root directory. I do this because I need to load it up in a new page that my widget creates. You may not have to do this. Line 34 uses jquery to read the data in from an already formatted html table on the new page, while the loop starting at line 35 processes the table elements so that they can be understood by excel.  /* Source: https://stackoverflow.com/questions/26909928/export-multiple-html-tables-to-excel?noredirect=1&lq=1 so now when ever I want a page to have an option to be exported to excel i add a refference to that script and i add the following button to my page: <button onclick="tablesToExcel(['ServerInformatie', 'Relaties'], 'VirtueleMachineInfo.xls', 'Excel')">Export to Excel</button> so the method: tablesToExcel(WorksheetNames, fileName, 'Excel') Where worksheetNames is an array which needs to contain as much names (or more) as there are tables on the page. You could ofcourse chose to create the worksheet names in a different way. And where fileName is ofcourse the name of the file you'll be downloading. Not having it all in 1 worksheet is a shame but at least this will do for now. */ var tablesToExcel = (function () { var uri = 'data:application/vnd.ms-excel;base64,' , tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">' + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>' + '<Styles>' + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>' + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>' + '</Styles>' + '{worksheets}</Workbook>' , tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>' , tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>' , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) } return function (wsnames, wbname, appname) { var ctx = ""; var workbookXML = ""; var worksheetsXML = ""; var rowsXML = ""; var tables = $('table'); for (var i = 0; i < tables.length; i++) { for (var j = 0; j < tables[i].rows.length; j++) { rowsXML += '<Row>' for (var k = 0; k < tables[i].rows[j].cells.length; k++) { var dataType = tables[i].rows[j].cells[k].getAttribute("data-type"); var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style"); var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value"); dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML; var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula"); dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' && dataType == 'DateTime') ? dataValue : null; ctx = { attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : '' , nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String' , data: (dataFormula) ? '' : dataValue.replace('<br>', '') , attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : '' }; rowsXML += format(tmplCellXML, ctx); } rowsXML += '</Row>' } worksheetNameDirty = (i+1)+"_"+wsnames[i]; worksheetNameClean=worksheetNameDirty.replace(/[^a-zA-Z0-9]/g,'_').replace(/_{2,}/g,'_').slice(0,31); ctx = { rows: rowsXML, nameWS: worksheetNameClean || 'Sheet' + i }; worksheetsXML += format(tmplWorksheetXML, ctx); rowsXML = ""; } ctx = { created: (new Date()).getTime(), worksheets: worksheetsXML }; workbookXML = format(tmplWorkbookXML, ctx); console.log(workbookXML); var link = document.createElement("A"); link.href = uri + base64(workbookXML); link.download = wbname || 'Workbook.xls'; link.target = '_blank'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } })();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 4) I am adding this external javascript page to my newly generated page with this, where newWin has previously been defined as the new window:  //add "export to excel" button's required script bScript = document.createElement('script'); bScript.type = 'text/javascript'; bScript.src = 'TablesToExcel.js'; newWin.document.getElementsByTagName("head")[0].appendChild(bScript);‍‍‍‍‍ ... View more

Robert, thank you so much! That was exactly what we were looking for. You are correct in that we weren't looking for toggles so much as preset lists of layers to set the map to. And that change worked like a charm. Deleting the the URL from the above message. My boss will probably pull it down by the end of the day. ... View more

Robert, Please check out [Link Deleted: Robert answered the question and it is no longer needed!: 2020/02/10 by post author] We've stripped out just about every other widget that was in it. What remains is the 7 layer toggle button icons and the layer list. The app has been ported to 2.15 to rule out versioning issues. Example of problem workflow: 0) Once the page loads, it shows the default layers we want on at the start of the map, and they should correspond to the layers associated with the second widget icon (shaped like a crosshair) 1) Click the wind industry icon in the upper right (the wind turbine). A bunch of layers turn off (some that should actually be on) and it mainly shows the green wind development resources grid. 2) Click it again and it shows the grid plus the bulk of the other layers that were on. I think this is what the button is actually supposed to toggle on. 3) One more time and they all turn off. 4+)Now if you click it repeatedly, that button behaves the way it is supposed to, all assigned layers off or on. Continuing from there: Click through the layer toggle buttons until all the layers are off. Now click the button to the right of the wind turbine once (hover text calls it counties) Then click the button to the right of that once (hover text should say cities and towns). You should get remnant layers that for some reason dont get turned off. So these are examples of our syncing issue. If you click around the layer toggle buttons, layers appear to intermittently linger or only partially get turned on like they are supposed to. 2nd issue we have: Getting the group checkmarks in the layer list to turn off and on when the layers themselves are toggled on and off. I have come up with some code for that which does work (though it's doing it opposite of what the actual layer visibility shows, which, if it persists after fixing the syncing issue, should just be a matter swapping the check/uncheck lines). The main problem with my code is that it's not written using the 'node' style that I think these widgets are supposed to be written in, it's using a hard coded path up and down the node trees to work. I basically dont understand the widget/node structure enough to make this not look like sloppy code. The lines I'm refering to mainly are lines 38, 39, and 51. I'm including it, below. If you would rather I broke it out to a second thread, I would be happy to. This code is not incorporated into the code of the website linked to above, in order to keep that page as code-original as possible. This would go into LayerToggleButton's widget.js and replace the toggleLayer function toggleLayer: function(lObjs) { var bmLyrObjs = this.layerStructure.getBasemapLayerObjects(); var bmlyrIds = []; array.map(bmLyrObjs, lang.hitch(this, function(bmObj, index) { bmlyrIds.push(bmObj.id); })); if (!lObjs[0].isToggledOn() && this.isExclusive) { this.layerStructure.traversal(lang.hitch(this, function(layerNode) { if(bmlyrIds && bmlyrIds.indexOf(layerNode.id)<0){ layerNode.hide(); } })); } var onOff; array.map(lObjs, lang.hitch(this, function(lObj, index) { onOff = (lObj.isToggledOn()) ? 'On' : 'Off'; if (lObj._layerInfo && lObj._layerInfo.layerObject) { this.setBusyIndicator(lObj); } if (this.parentContainer && this.originalTitle) { html.setAttr(this.parentContainer, 'title', this.originalTitle + ': ' + onOff); } if (onOff === 'Off' && index === 0 && lObj._layerInfo && lObj._layerInfo.layerObject && lObj._layerInfo.layerObject.fullExtent) { if (this.zoomToLayer) { this.map.setExtent(lObj._layerInfo.layerObject.fullExtent.expand(1.2)); } } lObj.toggle(); var aSearchId = lObj._layerInfo.layerObject.id; var objectsElement = query("[class~='layer-tr-node-" + aSearchId + "']")[0]; if (objectsElement!=undefined){ var targetElement = query(objectsElement).parent().prev(); //the ancestor of the group's checkbox element var grpCheckbox = targetElement[0].childNodes[0].childNodes[0].childNodes[1].childNodes[0]; //the checkbox for the group var visibleCheckBox = registry.byNode(grpCheckbox); //used for setting the checkbox later if(onOff=== 'On') { //if true, layer on, we need group checkbox on visibleCheckBox.check(); } else { // before we can turn off the checkbox, we need to search to see if any of the other layers in the group are supposed to be on var targetSiblings = query(objectsElement).siblings(); var groupOnOff = false; for (var lyr in targetSiblings){//loop through all siblings in the group, checking for checkbox status var checkStatus = "no check"; try{ checkStatus = targetSiblings[lyr].childNodes[0].childNodes[1].childNodes[0].getAttribute('aria-checked'); } catch(error){ //checkStatus line throws an error if .childNodes is used on a non-existant element. If we don't catch the error, the page will break. checkStatus = "no check"; } if (checkStatus !== "no check"){ if(!groupOnOff && checkStatus ==="true"){ groupOnOff = true; } } } if(!groupOnOff) { //if none of the siblings are checked, uncheck the parent visibleCheckBox.uncheck(); } } } topic.publish('toggleChanged', lObj._layerInfo._visible, lObj); if (!lObj.isVisible() && lObj.isToggledOn()) { lObj.show(); } })); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

Understood. ... View more

Robert, I'm going to have to edit the URL out later... particularly since its supposed to end up password protected eventually. [url deleted] This is the live version of our site. Click through the splash screen and check out the hot buttons. I'm sure there are other issues. I know that I'm not properly closing one of the widgets because I have something in the menu code triggering something to do with it. I think that's the Add Data thing. ... View more

Robert, I'm marking your answer as correct. I dont actually know if it fixes the issue I was having, but we've moved completely off of this direction and into having icons up in the Header Controller. We're having other issues with that which I may put into another question. In looking into those issues, I checked line-by-line the code that you had updated. It looks like the bulk of it was in the HeaderController's widget, which I hadn't pushed into the version 17 folder indicated above, so I definitely hadn't applied your fix. ... View more

Robert, thank you for your responses. I've had to backburner this while working on other issues with our project, so it's now a good 2 forks back from my current version. When I get back onto this particular task, I will start with a fresh download of 2.14 ... View more

Robert here it is in its entirety. I canibalized the About widget for this one's template. /////////////////////////////////////////////////////////////////////////// // Copyright © Esri. All Rights Reserved. // // Licensed under the Apache License Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. /////////////////////////////////////////////////////////////////////////// define(['dojo/_base/declare', 'dojo/_base/html', 'dojo/query', 'dojo/dom-class', 'dojo/on', 'dojo/_base/lang', './common', 'dijit/_WidgetsInTemplateMixin', 'jimu/utils', 'jimu/PoolControllerMixin', 'jimu/BaseWidget' ], function(declare, html, query, domClass, on, lang, common, _WidgetsInTemplateMixin, jimuUtils, PoolControllerMixin, BaseWidget) { var clazz = declare([BaseWidget, _WidgetsInTemplateMixin, PoolControllerMixin], { baseClass: 'jimu-widget-hotbuttoncontroller', allConfigs: [], openedWidgetId: '', activeIconNode: null, postCreate: function () { this.inherited(arguments); this.allConfigs = this.getAllConfigs(); for(var i = 0; i < this.allConfigs.length; i++) { this._createIconNode(this.allConfigs[i]); } }, startup: function () { this.inherited(arguments); if (common.isDefaultContent(this.config)) { this.config.hotbuttoncontroller.hotbuttoncontrollerContent = common.setDefaultContent(this.config, this.nls); } this.isOpen = true; this.openAtStartAysn = true; this.resize(); jimuUtils.focusFirstFocusByTheme(this, this.customContentNode); this.openAtStartAysn = false; //Focus customContentNode //use firstTabNode for passing focus state to customContentNode (FF) this.own(on(this.splashContainerNode, 'focus', lang.hitch(this, function(){ this.firstTabNode.focus(); }))); this.own(on(this.firstTabNode, 'focus', lang.hitch(this, function(){ this.customContentNode.focus(); }))); jimuUtils.setWABLogoDefaultAlt(this.customContentNode); }, resize: function () { this._resizeContentImg(); }, onOpen: function(){ this.isOpen = true; //resolve issue #15086 when network is so slow. setTimeout(lang.hitch(this, function(){ this.isOpen = false; }), 50); }, _resizeContentImg: function () { //record current activeElement before resizing var _activeElement = document.activeElement; html.empty(this.customContentNode); var hotbuttoncontrollerContent = html.toDom(this.config.hotbuttoncontroller.hotbuttoncontrollerContent); html.place(hotbuttoncontrollerContent, this.customContentNode); // single node only(no DocumentFragment) if (this.customContentNode.nodeType && this.customContentNode.nodeType === 1) { var contentImgs = query('img', this.customContentNode); if (contentImgs && contentImgs.length) { contentImgs.forEach(lang.hitch(this, function (img) { var isNotLoaded = ("undefined" !== typeof img.complete && false === img.complete) ? true : false; if (isNotLoaded) { this.own(on(img, 'load', lang.hitch(this, function () { this._resizeImg(img); }))); } else { this._resizeImg(img); } })); } //Init dom's attrs and events again because doms are new after resizing. var focusableNodes = jimuUtils.getFocusNodesInDom(this.domNode); if(focusableNodes.length){ jimuUtils.initFirstFocusNode(this.domNode, focusableNodes[0]); jimuUtils.initLastFocusNode(this.domNode, focusableNodes[focusableNodes.length - 1]); } //focus firstNode if required if(this.isOpen || html.isDescendant(_activeElement, this.domNode)){ var firstNode = jimuUtils.getFirstFocusNode(this.domNode); jimuUtils.focusFirstFocusByTheme(this, firstNode); this.isOpen = false; } } }, _createIconNode: function(iconConfig, targetNode) { var iconNode, iconImage; if(!targetNode) targetNode = this.containerNode; iconNode = document.createElement('DIV'); iconNode.className = 'icon-node'; if(iconConfig.icon) { iconImage = document.createElement('img'); iconImage.src = iconConfig.icon; } if(iconConfig.label) { iconNode.title = iconConfig.label; iconImage.alt = iconConfig.label; } iconNode.appendChild(iconImage); targetNode.appendChild(iconNode); // check if the widget is set to open at start if (iconConfig.openAtStart) { this.activeIconNode = iconNode; domClass.add(iconNode, 'jimu-state-active'); this._showWidgetContent(iconConfig); } var self = this; this.own(on(iconNode, 'click', function() { query('.jimu-state-active', self.domNode).removeClass('jimu-state-active'); if(self.activeIconNode === this) { self.panelManager.closePanel(iconConfig.id + '_panel'); self.activeIconNode = null; return; } domClass.add(this, 'jimu-state-active'); self._showWidgetContent(iconConfig); self.activeIconNode = this; })); return iconNode; }, _showWidgetContent: function(iconConfig) { console.log("_showWidgetContent: iconConfig.id:"); console.log(iconConfig.id); if(this.openedWidgetId) { //this.widgetManager.openWidget(openedWidgetId); //We need to toggle the widget on because of odd behavior with the widget, before we can close it again ////this.panelManager.closePanel(this.openedWidgetId + '_panel').then(this.widgetManager.openWidget(openedWidgetId).then(this.panelManager.closePanel(this.openedWidgetId + '_panel'))); //We need to toggle the widget on because of odd behavior with the widget, before we can close it again var isLayerToggleWidget= false; if(this.widgetManager.getWidgetById(this.openedWidgetId).name="LayerToggleButton"){ isLayerToggleWidget=true; } if(isLayerToggleWidget){ this.widgetManager.openWidget(this.openedWidgetId); this.openedWidgetId= ''; } else{ this.panelManager.closePanel(this.openedWidgetId + '_panel'); } } if(!iconConfig.inPanel) { var self = this; this.widgetManager.loadWidget(iconConfig).then(function(widget) { // add code to display off-panel widgets here self.widgetManager.openWidget(widget); }); } var self = this; if ( this.config.panel != null){ this.panelManager.showPanel(iconConfig).then(function (widget) { // the panel displays successfully self.own(on.once(widget, 'close', function () { domClass.remove(self.activeIconNode, 'jimu-state-active'); self.activeIconNode = null; })); }, function (err) { // the panel failed to display console.log("the panel failed to display"); console.log(err); }); } this.openedWidgetId = iconConfig.id; }, _resizeImg: function(img) { var customBox = html.getContentBox(this.customContentNode); var imgSize = html.getContentBox(img); if (imgSize && imgSize.w && imgSize.w >= customBox.w) { html.setStyle(img, { maxWidth: (customBox.w - 20) + 'px', // prevent x scroll maxHeight: (customBox.h - 40) + 'px' }); } } }); return clazz; });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more