Latest Contributions by EricRuberson1

We have an existing WAB app that has a Latitude box, Longitude box, and a 3rd box for structure height. It has a calculate button. You can either click on the button or click on the map and it will update the lat/long boxes and use the structure height value to run a brief analysis by getting a pixel value from a hosted raster image service layer.  It works great, we've used it for several projects with various tweaks over the years. But now we need to move it to Experience Builder.  I was starting from scratch but realized that one of Robert Scheitlin's Feature Panel Widget did much of the base stuff we needed. So I started with it and heavily modified it. Commented out all of the attribute stuff. Replaced its disabled popup with a new one that returns the values from the raster. I recreated our lat/long/height boxes in the side panel. I've got half the stuff I needed done. But I can't figure out how to pass variables or values around between parts of the code. Which is what I need to do to get the Calculate button to trigger the popup based on the entered lat/long.  In WAB I would have inspected the DOM elements and modified their values. But in React this is apparently Very Bad To Do. All of the stuff I've read says to use States and particularly 'useState', but I cannot get them to work.    Here's my lat/long/height boxes and calculate button. This code is in the render section. They all show up and exist. You can use the arrow buttons or enter numbers and those change the values in the boxes.               Latitude: <input type="number" id="LatTextBox" defaultValue="34.7" style={this.latlongboxStyles} onChange={this.updateInputLat} value={this.state.latTextBoxvalue}/> Decimal Degrees             Longitude: <input type="number" id="LongTextBox" defaultValue="-86.9" style={this.latlongboxStyles} onChange={this.updateInputLong}/> Decimal Degrees             <br></br>             <div className="StructureHeightDiv">               Structure Height:               <input type="number" id="StructureHeightTextBox" defaultValue="0" style={this.latlongboxStyles} onChange={this.updateInputStructHeight}/> Feet             </div>             <div className="CalculateButtnDiv">               <button className="CalculateButton" type="button" onClick={this.handleCalculateButton}>Calculate</button>             </div>     and my updateInputLat listener passes the event value succesfully  updateInputLat=(event)=>{     console.log("event.target.value : ");     console.log(event.target.value  || "undefined"); //this does get the right value.   } But I cannot figure out how to pass that value to a variable that I can access outside of updateInputLat    try{     {       console.log("this.latTextBoxvalue: ")       console.log(this.state.latTextBoxvalue)     }}     catch{       console.log("this.latTextBoxvalue is undefined")     }     try{       {         console.log("trying setlatTextBoxValue(event.target.value);: ")         //console.log(this.latTextBoxvalue)         this.setlatTextBoxValue(event.target.value);         console.log("returning setlatTextBoxValue")         console.log(setlatTextBoxValue)         console.log("returning latTextBoxValue")         console.log(latTextBoxValue)       }}       catch{         console.log("error between 337 to 341")       }     this.setState({latTextBoxValue: event.target.value})     console.log("2: latTextBoxValue???")     console.log(latTextBoxValue)     So in short, I have no idea how to define a global variable to pass around the... classes? functions? what are they even called? And I cant find any esri documentation on this. Eveyrthing I find for react doesnt work. I've tried declaring these variables all over the place and just cant figure it out.  Thanks for any help!   ... View more

We added an on screen widget and made the button invisible per client request; they want it to open from somewhere else. Client has 2 sets of layers they want showing, in separate layer lists/table of contents (TOC) widgets. We got that working, basically by adding a second widget and configuring it to the second set of layers.  We added a button to the bottom of the second TOC widget.  So right now you can click the first TOC widget icon, see its layers listed, then click the second TOC widget icon, and it's layers also get listed, but it has a 'launch report' button at the bottom which launches our custom widget. The problem is once you click that button, after succesfully launching the custom widget, it closes the 2nd TOC list and switches back to the 1st TOC widget, since they shared the same panel. How we made the button work: 1) added code to the 2nd TOC's html file <a style="float:left; margin-right:10px; font-weight: bold; font-size: large;" href="#" data-dojo-attach-point="btnLaunchReport">Launch Report</a>   2) added code to the TOC's widget.js file //under bindEvents this.own(on(this.btnLaunchReport, 'click', lang.hitch(this, this._reportWidget))); //new function _reportWidget: function() { var widgetCfg = this._getWidgetConfig('reportWidget'); widgetCfg.visible = true; var headerCfg = this._getWidgetConfig('HeaderController'); var headerWidget = this.widgetManager.getWidgetByLabel(headerCfg.label); //This is need to show the widgets icon in the header headerWidget.resize(); //This actually open the widget headerWidget.setOpenedIds([widgetCfg.id]); console.log(widgetCfg.id); },   this initially gave us errors saying that the config object was missing so we added code (lines 10-12, and 15) to the header controller widget.js below.  //this is in themes/FoldableTheme/widgets/HeaderController //we tweaked the original setOpenedIds function to look for our widget's config if it gets here and cant find one setOpenedIds: function(ids) { console.log("This is the ID test " + ids); if (ids.length === 0) { return; } var config = this.getConfigById(ids[0]); if(ids[0] == "_49"){ // set to our widget ID number config = this._getWidgetConfig('reportWidget'); } if (!config) { console.log("No config found for " + ids[0]); return; } if(this.openedId){ this._switchNodeToClose(this.openedId); } this.openedId = ids[0]; if (config.widgets && config.openType === 'openAll') { this._switchNodeToOpen(config.id); } else if (!config.widgets) { if(this._getIconNodeById(config.id)){ this._switchNodeToOpen(config.id); }else{ this._showIconContent(config); } } }, It worked, successfully launching the custom widget, but side effect is it closes the TOC widget which shows all the layers, so the user would have to open it again. Minor bug but still a bug. It also launches an error in the console "TypeError:can't access property "className", b is null in the _showIconContent line, which implies that the code is hitting the header controller widget again after launching the custom report widget. So I'm not sure what's going on there.   I'm sure we're doing it wrong. Any help would be appreciated. ... View more

Hello. I've been trying to figure out how to launch a splash screen repeatably from other widgets or buttons.  Splash screen being defined as either the splash widget or something else that is customizable with images + texts + "I agree" checkbox. The client asked us to isolate some layers into a seperate table of contents/layer list widget. We did that and got that mostly working. But the client wants a disclaimer/splash screen to pop up when the button which launches that seperate list is clicked. Additionally they want the disclaimer/splash to launch when another custom reporting widget is launched. So this splash screen a) is not supposed to launch at the start of the app like the default splash widget, b) has to launch when a button in the headercontroller is clicked which launches the TOC widget and c) when a custom 'button' we added to the TOC is clicked, which launches yet another widget. I looked at the default Esri splash widget.js code to try and figure out what makes it tick and couldnt quite figure it out. I saw that theres .focus and .blur (commenting .blur out did nothing), and various places that check for if the requires checkbox setup has been toggled on, but I'm not sure what like, actually locks off the rest of the screen from working or requires the checkbox be hit.  So I don't really know how to proceed. Non Web-App-Builder javascript guides basically say just show a div over your screen and/or put the rest of your page in another div and hide it while the splash screen is up. I'm afraid trying that would break everything and am hesitant to try a non-WAB/non-Dojo solution if there is actually a WAB/Dojo solution out there. While I wait and see if anyone here has suggestions I'm going to look into 'help dialogue' boxes because I recall making one of those in the past and those are kinda similar. ... View more