|
POST
|
Robert, Your right, this was quite a challenge, but I got it to work. My form was a lot different than yours, because it needs to take user input as well as query result values. I am posting some code snippets from the relevant places just in case any one else is trying to do something similar. Thanks again, I never would have figured this out! //from the widget.js file
_createICSReport: function(siteID, clayer){
//this.closeOpenReports();
this.shelter.show();
window.resultsLength = this.queryResults.features.length;
var qr = this.queryResults.features;
var defs = [];
var props = {
height: 1000,
titleLabel: "ICS 232-CG Report",
map: this.map,
layer: clayer||this.currentLayerAdded,
folderurl: this.folderUrl
};
//console.log("features ", results);
for(var i = 0; i < qr.length; i++) {
var atts = qr[i].attributes;
//console.log("feature " + i + " = ", atts);
defs.push(atts);
}
if(defs) {
var Site, Priority, Name;
let count = 0;
let results = defs;
for(var i = 0; i < defs.length; i++) {
let key = "json" + count;
let value = "results[" + i + "],";
props[key] = results[i];
//console.log("result = ", results);
count ++;
}
}
//console.log("test report ", props);
this.shelter.hide();
all(defs).then(lang.hitch(this, function (results) {
this.icsReport = new ICSReport(props);
}), lang.hitch(this, function(err){
this.shelter.hide();
console.info(err);
}));
},
//////// from the ICSReport.js file//////////
_dataMixin: function(){
let json0 = this.json0;
let json1 = this.json1;
let json2 = this.json2;
let json3 = this.json3;
let json4 = this.json4;
let json5 = this.json5;
let json6 = this.json6;
let json7 = this.json7;
let json8 = this.json8;
let json9 = this.json9;
let valArray = [json0, json1, json2, json3, json4, json5, json6, json7, json8,
json9];
//console.log("results length ", resultsLength);
if(resultsLength <= 10) {
for(let i = 0; i < resultsLength; i++) {
//console.log("results: ", valArray);
dom.byId('Site' + i).setAttribute("value", valArray[i].ID);
dom.byId('Priority' + i).setAttribute("value", valArray[i].SUMMER_PRI);
dom.byId('Name' + i).innerHTML = valArray[i].NAME;
}
} else {
for(let i = 0; i < 10; i++) {
dom.byId('Site' + i).setAttribute("value", valArray[i].ID);
dom.byId('Priority' + i).setAttribute("value", valArray[i].SUMMER_PRI);
dom.byId('Name' + i).innerHTML = valArray[i].NAME;
}
let msg = "Maximum record count exceeded. " + (resultsLength-10) + "
records will be missing from report."
this._showMessage(msg);
}
let dt = new Date();
let dtm = (("0"+dt.getMonth()+1).slice(-2)) +"."+ (("0"+
(dt.getDate())).slice(-2)) +"."+ (dt.getFullYear()) +" "+
(("0"+dt.getHours()).slice(-2)) +":"+
(("0"+dt.getMinutes()).slice(-2));
dom.byId('dateTime').setAttribute("value", dtm);
var spacer = domConstruct.toDom('<div style="height:10px;width:740px;">
</div>');
domConstruct.place(spacer, dom.byId('map'), 'last');
this.map.infoWindow.hide();
var oWid = this.map.width;
var oHgt = this.map.height;
var printTask = new PrintTask('https://ocean.floridamarine.org/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task');
var template = new PrintTemplate();
//this.imgHeight = (740/oWid) * oHgt;
template.exportOptions = {
width: 1542,
height: (1542/oWid) * oHgt,
dpi: 200
};
template.format = "jpg";
template.layout = "MAP_ONLY";
template.preserveScale = false;
template.showAttribution = false;
var params = new PrintParameters();
//params.map = this.map;
params.template = template;
printTask.execute(params, lang.hitch(this, this.printResult));
},
... View more
02-07-2019
10:45 AM
|
0
|
0
|
4095
|
|
POST
|
Robert, Thanks for your input! This will be a challenge, but after looking at your website (and code), It gives me a clear direction. I do like the idea of a popup in the map vs the browser tab, so I will give it a try. I may come back to you with a question or two if I get stuck, and will definitely refer to your code it that is ok. Thanks again, Franklin(Gene) Alexander Research Assistant/Web Developer
... View more
01-22-2019
07:49 AM
|
1
|
1
|
4095
|
|
POST
|
Yep, got it. I tried it with the <a> tag, but that just opens the form in another window, which is fine but doesn't solve my problem. So if I use domConstruct, I would be creating the report dynamically in the javascript file, such as on the onClick event? So when the 'report' button is clicked, the report would be created, populated, and opened in a new window. Am I on the right track?
... View more
01-18-2019
01:13 PM
|
0
|
3
|
4095
|
|
POST
|
Yes, this is exactly the challenge so far. I have tried this.icsForm and I get the div element, but not seeing any of the elements inside the form template. I have also tried dojoQuery, dom.byId, and even document.forms["ics232cg"] and all return either null or undefined. I also tried locating the form template in the main app folder, but no luck so far. I have a feeling this is probably just a syntax issue, unless there is a better way to go about this?
... View more
01-18-2019
12:42 PM
|
0
|
5
|
4095
|
|
POST
|
In one of our old flex viewer apps, we had a custom widget that fetched results from a spatial query and created a report in the form of a .swf file which is basically deprecated now. I am trying to re-create the widget, using the eSearch widget to fetch results, then just add a button to the results pane to send to the report. I created a new report template html doc and placed it in the eSearch widget folder, but am having difficulty figuring out how to access it in order to programmatically ad the search results to the fields in the form. I thought that maybe placing a reference to the form template in the widget.html doc would be the best way, but I am still missing something, because when I try and call the form elements, I just get undefined or null. I am attaching a snippet from the form template as well as my relevant widget.html code. I know I am close, but need a little push!! Here is a snippet from my Form: (the form works fine. It opens in a new window and takes input) <form class="icsForm" data-dojo-type="dijit/form/Form" id="ics..." data-dojo-id="ics...">
<link rel="stylesheet" href="css/style_ics.css">
<div class="ics-section" id="sect1">
<table class="ics-subsection" style="paddingLeft:10px">
<tr>
<th class style="font-size:18px"><b>1. Incident Name</b></th>
<th class style="font-size:18px; padding-left:10px">2. Operational Period (Date/Time)</th>
<th style="text-align:right; font-size:20px; padding-right:20px">RESOURCES AT RISK SUMMARY</th>
</tr>
<tr>
<td><input style="width:280px; height:30px; padding-left:10px" id="incidentName" maxChars="100" class="inputText"></td>
<td style="padding-left:10px">
<span><b>From:</b></span>
<span><input style="width:135px; height:30px; padding-left:10px" id="opPeriodFrom" maxChars="15" class="inputText"></input>
<span><b> To:</b></span>
<span><input style="width:135px; height:30px; padding-left:10px" id="opPeriodTo" maxChars="15" class="inputText"></input>
</td>
<th style="text-align:right; font-size:20px; padding-right:20px">ICS 232-CG</th>
</tr>
</table>
</div>
<div class="ics-section" id="sect2" style= "width:100%; margin-top:5px; border-bottom:3px solid #000000">
<div class="ics-subsection" style="width:100%; paddingLeft:10px">
<span style="margin-top:10px; font-size:18px"><b>3. Environmentally-Sensitive Areas...</b></span>
<div class="ics-label" style="width:100%; margin-top:10px">
<label style="margin-left:2em; margin-right:2em">Site #</label>
<label>Priority</label>
<label style="margin-left:3.2em; margin-right:3.5em">Site Name and/or Physical Location</label>
<label style="margin-left:13em">Site Issues</label>
</div>
</div>
<div class="ics-subsection">
<input class="ics-site" id="Site0" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
<input class="ics-priority" id="Priority0" name="Priority0" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
<input class="ics-name" id="Name0" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
<input class="ics-issues" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
</div>
<div class="ics-subsection">
<input class="ics-site" id="Site1" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
<input class="ics-priority" id="Priority1" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
<input class="ics-name" id="Name1" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
<input class="ics-issues" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
</div>
<div class="ics-subsection">
<input class="ics-site" id="Site2" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
<input class="ics-priority" id="Priority2" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
<input class="ics-name" id="Name2" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
<input class="ics-issues" type="text" value="" data-dojo-type="dijit/form/textbox"></input>
</div>
This is how I am trying to connect it to the jsavascript (from the widget.html doc) <div class="search-tab-node-hidden" data-dojo-attach-point="tabNode4" style="overflow: hidden;">
<div data-dojo-attach-point="progressbar"></div>
<div data-dojo-attach-point="divResultMessage" class="esearch-noResults"></div>
<div class="popup-menu-button esearch-result-action-button" data-dojo-attach-event="click:_onBtnMenuClicked" data-dojo-attach-point="divOptions" title="${nls.resultactions}" style="display:none;"></div>
<div data-dojo-attach-point="listDiv"></div>
<label data-dojo-attach-point="divSum" class="esearch-sum" style="display:none;"></label>
<div class="report-btn" data-dojo-attach-point="btnClear5"><a href="widgets/eSearch/ICSForm.html" target="_blank">${nls.report}</a></div>
<div data-dojo-attach-point="icsForm" href="ICSForm.html"></div>
</div>
</div> Just a note. I am not trying to submit any data, just want to fill out the report from the query results and print. I have everything else working, so once I figure out how 'see' the report elements from the javascript, the rest should be easy! Thanks!!
... View more
01-18-2019
11:47 AM
|
0
|
7
|
4358
|
|
POST
|
Thanks Stephen, You are right, I was really confused! Thanks for clearing that up. For some reason I was thinking that the compiler needed to be configured to get general messages and error reporting in the console. I guess I am still a little confused about what actually works in the IDE. I was able to get my app to run from Qt IDE, but I had to manually add AppStudio to the external tools. I don’t know if this is normal, or if it should be added automatically upon install. I also had to set up the keyboard shortcut, but everything seems to be working now. I am getting general messages, but not sure about error messaging. I do get a popup error message, but nothing in the console. Is this normal? One more thing. Context Help doesn’t appear to be working. I know F1 should bring up documentation on whatever property/type/element etc is highlighting, and I get a blank window displaying “No documentation available”. Probably not connecting to the outside site, but not sure where to go to configure. Thanks again! Franklin(Gene) Alexander Research Assistant/Web Developer
... View more
11-27-2018
06:58 AM
|
0
|
0
|
3388
|
|
POST
|
Thanks Stephen. Unfortunately I cannot install AppStudio in the users folder because I work for a state agency and they have very tight anti-virus controls in place that block any executable files from running from within the user folders. I guess that means I am kind of stuck manually configuring Qt Creator to work with AppStudio, because none of the kits, Qt Versions, compilers, debuggers, etc are being auto-detected. Also, if I am reading the documentation correctly, it appears that the QT version that came with AppStudio is 5.10.0(MSVC 2015, 32 bit), which means I need to use the CDB Debugging tools for Windows, which must be installed separately. The only debugger I can find is a 'qtcdebugger.exe' file, which is not recognized when I try and add it manually in the tool/options/Debuggers tab As far as the compiler, the only one I can find is Clang, which I configured in the tool/options/Compilers tab, but doesn't work. I still get a compiler error which seems to be looking for a "ming w32-make.exe" file that doesn't exist. I will probable open up a help ticket with esri after the holidays, because I think I will need someone to walk me through this! lol Thanks again
... View more
11-20-2018
09:00 AM
|
0
|
2
|
3388
|
|
POST
|
I recently installed the latest version of AppStudio (3.1.134) for Windows x64 with a standard license, which is bundled with Qt version 5.11.1. System specs are: Windows 7 SP1 (64bit), and the app is installed in this location: C:\Program Files\ArcGIS\AppStudio. Have I done anything wrong to this point? I ask because I am having a few issues. 1. I cannot open Qt Creator editor from inside AppStudio, when I click the 'editor' icon nothing happens. All other executable buttons are working. I am able to open Qt Creator from outside AppStudio, but I don't know if this is a problem since I can still access and edit the application files. 2. I cannot get any console output when editing in Qt Creator, I get a message under the 'Issues' tab that says 'Qt Creator needs a compiler set up to build. Configure a compiler in kit options'. When I try to add a compiler, the only compiler I can find is 'Clang', but have been unable to get it to work. The ABI configuration: custom - x86 - windows - pe - 32bit. The only other choice is 'x86-windows' in the first dropdown, but then everything gets grayed out and it defaults to msvc2013 which seems wrong ( I think it should be msvc2015 if I am reading the specs correctly about this version of Qt Creater). At any rate, neither configuration is working. Not sure where to go from here. I appreciate any guidance as I am new to mobile development and AppStudio!
... View more
11-19-2018
08:31 AM
|
0
|
5
|
3856
|
|
POST
|
According to ESRI documentation: If you want to make stand-alone apps on your development machine, you need vendor-specific development tools installed in addition to AppStudio for ArcGIS Note: The installation of development tools is not required for all AppStudio users. Most users can create app installation files using cloud Make. Creating app installation files with local Make(and hence the need to install development tools) is only required under the following circumstances: Organizational requirements prohibit you from using the ArcGIS Cloud Make service. You want to customize the installer that is created for your app. You want to add custom C++ modules to your app. This is a little misleading to me. Do you need to install development tools, ie Visual Studio, in order to extend, or create apps using ArcGIS App Studio Desktop on a local machine? Also, if I wish to create an app on my local machine, do I have to use Local Make, or is Cloud Make still an option? Thanks in advance to any clarification!!
... View more
11-08-2018
07:14 AM
|
0
|
1
|
815
|
|
POST
|
Worked like a charm, thanks again. I wish I had known about the .click() method sooner, probably would have saved me lots of time and headache. It’s weird how sometimes calling a function doesn’t work the same as a simulated mouse click. I tried calling ‘this.pManager.minimizePanel’, but nothing happened. If we ever meet, I owe you some beers! Gene Franklin(Gene) Alexander Research Assistant/Web Developer
... View more
07-02-2018
05:43 AM
|
0
|
1
|
2072
|
|
POST
|
I saw an earlier post from 2015 about this same request, but wanted to re-kindle the issue because, although the widget only hides 1/2 the screen in mobile, it still hides the selected point when zoomed in to the result (see screenshot). I thought of two ways to address the issue. In a previous app, for the 'near me' widget, I just put the following code in the _createBuffer() function: var extent;
geometryService.buffer(params, lang.hitch(this, function (
geometries) {
if (window.appInfo.isRunInMobile) {
console.log("geometries ", geometries[0].getExtent());
extent = geometries[0].getExtent();
extent.ymin = extent.ymin - (extent.ymax-extent.ymin);
console.log("new geometries ", extent);
} else {
extent = geometries[0].getExtent();
} This moved the center of the map above the widget, solving the problem. Unfortunately, I have been unable to repeat this for the current application, because the eSearch widget is a little more complex and I cannot seem to find to best location/function for the code. I also thought about the solution previously mentioned in the 2015 post, about folding the widget on 'zoom-to-result'. I really like this idea because it allows the user to see to entire screen. The challenge I am having for this solution, is that I cannot seem to access the 'foldableNode' from the Widget.js file (I think I am placing the code in the correct location. See lines 44-55, approx 3923-3933 in Widget.js): _selectResultItem: function (index, item) {
var FeatLyr = new FeatureLayer(this.resultLayers[this.currentLayerIndex]._origLayerURL);
var point = item.centerpoint;
//console.log("item center point ", point);
var layerConfig = this.config.layers[this.currentLayerIndex];
var lyrHasPopupDisabled = (layerConfig.hasOwnProperty("disablePopups") && layerConfig.disablePopups)?true:false;
var zoomScale = layerConfig.zoomScale || 10000;
//add the selection symbol
if(this.list.items.length > 1){
this.map.reorderLayer(this.selectionGL, 500);
var selGra = new Graphic(item.graphic.toJson());//item.graphic.clone();
if (item.graphic.geometry.type === "point"){
var size = this._getPointSymbolSize(item.graphic.symbol);
selGra.symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, size,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255, 1]), 2),
new Color([255, 255, 255, 0]));
}else{
if(selGra.symbol.hasOwnProperty('outline')){
selGra.symbol.setStyle(SimpleFillSymbol.STYLE_NULL);
selGra.symbol.outline.setColor(new Color([0, 255, 255, 1]));
selGra.symbol.outline.setWidth(3);
}else{
selGra.symbol.setColor(new Color([0, 255, 255, 1]));
selGra.symbol.setWidth(3);
}
}
this.selectionGL.clear();
this.selectionGL.add(selGra);
}
if (item.graphic.geometry.type === "point") {
console.log("point ", point);
if ((this.map.getScale() > zoomScale || layerConfig.forceZoomScale) && !lyrHasPopupDisabled) {
this.map.setScale(zoomScale).then(lang.hitch(this, this.map.centerAt(point).then(lang.hitch(this, function () {
if (this.map.infoWindow && this.config.enablePopupsOnResultClick) {
this.map.infoWindow.setFeatures([item.graphic]);
if (this.map.infoWindow.reposition) {
this.map.infoWindow.reposition();
}
if(layerConfig.showattachments){
this._addAttachment(item.OID);
}
if (window.appInfo.isRunInMobile) {
var swPanel = document.getElementById('_24_panel');
//returns widget panel div
console.log("search panel ", swPanel);
var fold = dojoQuery('foldable-btn', this.foldableNode);
//returns empty array
//var fold = swPanel.titleNode; //returns undefined
console.log('search panel ', fold);
//html.removeClass(this.foldableNode, 'fold-up');
//html.addClass(this.foldableNode, 'fold-down');
//this.panelManager.normalizePanel(this);
}
this._setPopupMenuItems();
this.map.infoWindow.show(point);
}
})))); I am game for either solution and I think I am close to solving both methods, but as usual I am missing something! Thanks!!
... View more
06-29-2018
06:09 AM
|
0
|
3
|
2128
|
|
POST
|
Ok, if I understand you, I should be able to use the same logic to fire off the 'change' event. I was also able to fix the issue with the 'enter' key not working by adding the 'keydown' event for the 'stringCodedValuesFS' attach point (where my select menu is located). this.own(on(this.stringCodedValuesFS, 'keydown', lang.hitch(this, function(evt){
var keyNum = evt.keyCode !== undefined ? evt.keyCode : evt.which;
if (keyNum === 13) {
this.emit('sp-enter-pressed',{});
}
}))); Thanks!
... View more
06-21-2018
07:29 AM
|
0
|
1
|
4706
|
|
POST
|
Robert, The 'change' event is working, but I get a 'function not found' error when I make another selection from the dropdown menu. The issue is that the 'FilteringSelect' element with the attached 'change' event is in the 'SingleParameter.html file, and the function I am trying to call ("change:_onSearch") is in the Widget.js file. Not sure the best way to approach this, so far I have not found a way to call the function, or would it be better to set up an event listener in the Widget.js file (since that is where the function I want to call resides)? If I go that route, then I have the difficulty of trying to access the domNode (which I can't seem to do either). I am not showing any codes examples, because I just want some advice on the best approach to take at this point, this is probably something that's is done frequently and no big deal. Thanks
... View more
06-21-2018
06:31 AM
|
0
|
3
|
4706
|
|
POST
|
The markup is pretty much out of the box, I do as much configuring as possible in developer mode, then export the app to our server. After your reply, I trying something and I think you led me in the right direction. I feel dumb, but I think I was trying the set the onchange event on the wrong tag! should be the line 5 div, not the line 3 input. I will get back to you if I have any further issues. thanks again! <div data-dojo-attach-point="allValueBoxContainer" style="width:100%;padding-bottom:2px;">
<div id="textBoxContainer" data-dojo-attach-point="stringTextBoxContainer" style="display:block;" title="Select from menu">
<input data-dojo-attach-point="stringTextBox" type="text" data-dojo-type="dijit/form/TextBox" data-dojo-attach-event="change:_onParamChange" data-dojo-props="trim:true, intermediateChanges:true"
style="display:block;width:100%;height:30px;" class="dijit-form-TextBox" >
<div data-dojo-attach-point="stringCodedValuesFS" data-dojo-type="dijit/form/FilteringSelect" data-dojo-attach-event="change:_onParamChange"
data-dojo-props="searchAttr:'name',intermediateChanges:true" class="dijit-form-FilteringSelect"></div>
</div>
... View more
06-19-2018
10:54 AM
|
0
|
0
|
4706
|
|
POST
|
The first question I have is: does 'onchange' attribure work with a dojo dijit/form/TextBox? If not, is 'intermediateChanges:true' the replacement, and if so, how do I connect it to my function? I can't seem to get 'onchange' to work, and I can't seem to find much info by googling 'intermediateChanges'. <input data-dojo-attach-point="stringTextBox" type="text" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, intermediateChanges:true"
style="display:block;width:100%;height:30px;" class="dijit-form-TextBox" > I am using the eSearch widget in an app built using WAB v2.8. I have an input element( that is a dropdown menu which selects from predefined values) and I want the 'search' function to execute on input change. The html for the input tag is in the SingleParameter.html file and the 'Search' function I want to execute is in the Widget.js file. I set the intermediateChanges:true property in the input tag, but there must be something else I have to do to get it to work. I think I have to use something like this: on(stringTextBox, "change", lang.hitch(this, this.Search)); but I am not sure where to drop this in the widget.js file. Also, I am not sure how to access the input element's attach point since it is in the SingleParameter.html file, not the Widget.html file. I know I am probable making it more difficult that it should be, but any help/suggestions would be greatly appreciated. Thanks!
... View more
06-19-2018
08:49 AM
|
0
|
6
|
6773
|
| Title | Kudos | Posted |
|---|---|---|
| 8 | 10-28-2025 10:15 AM | |
| 2 | 10-14-2025 06:36 AM | |
| 1 | 09-16-2022 09:31 AM | |
| 1 | 06-13-2024 05:45 AM | |
| 1 | 06-26-2025 06:28 AM |
| Online Status |
Offline
|
| Date Last Visited |
a month ago
|