topic Re: Calcite map - opening one panel from another in ArcGIS JavaScript Maps SDK Questions

Calcite map - opening one panel from another

TracySchloss — Wed, 08 Mar 2017 16:08:31 GMT

I have been converting some code to use the calcite map styling, from my previous style of 'everything goes into a side panel'.

Originally I had a series of Title Panes, stacked vertically. Now I want each of these to be a collapsible panel, following the example shown on the gitHub site: GitHub - Esri/calcite-maps: A Bootstrap theme for designing, styling and creating modern map apps

I'm having a problem understand how I might programmatically open a panel. For example, the user is allowed to search from a dropdown of school districts. This is the panel:

<div id="panelDistrictSearch" class="panel collapse in">
<div id="headingDistrictSearch" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseDistrictSearch" aria-expanded="true" aria-controls="collapseDistrictSearch"><span class="glyphicon glyphicon-info-search" aria-hidden="true"></span><span class="panel-label">District Search</span></a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#panelDistrictSearch"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseDistrictSearch" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingDistrictSearch">
<div class="panel-body calcite-body-expander">
<div class="panel-body">
<div id="searchDiv">
<h4>Select a District:</h4>
<input id='distSelect'>
</input>

</div>
</div>
</div>
</div>
</div>

The input is populated from JavaScript based on the values of the district field. Once the user selects a specific district, then the list of schools will be shown. When laid out in the sidebar panel, it was all just stacked. I want the schools to be in their own collapsible panel now. The problem is I'm not sure how to open the school list panel programmatically. The documentation is sparse for this. Collapse - Dojo Bootstrap

It tells me I can either enable manually:

query(".collapse").collapse()

query('#myCollapsible').collapse({   toggle: false })

Is this a dojo query? I assume I need to specify which panel I want to open, but so far I haven't got this right. I can manually open the school list panel and see the list is populated, it just doesn't open.

Here's the function:

// THIS IS WHERE I'M ATTEMPTING TO OPEN THE PANEL
var node = dom.byId("panelSchool");
nl = query(".collapse", node);
nl[0].collapse('toggle') ({
toggle: false
});
}

This is public facing: Missouri School Directory

Re: Calcite map - opening one panel from another

RobertScheitlin__GISP — Wed, 08 Mar 2017 16:54:41 GMT

Tracy,

Try:

dom.byId("panelSchool").collapse({toggle: false});‍

Re: Calcite map - opening one panel from another

TracySchloss — Wed, 08 Mar 2017 17:38:06 GMT

I did try that. It gives me TypeError: dom.byId(..) collapse is not a function. Because it's a dom object, I guess?

Re: Calcite map - opening one panel from another

TracySchloss — Wed, 08 Mar 2017 21:22:18 GMT

This somewhat works:

query("#panelSchool").collapse();

query("#collapseSchool").collapse();

However, I allow the either pick from a drop down list of districts, OR if they don't know their district, they can pick first from a list of counties and that looks up the districts available within it. Both call selectSchoolbyDistrict. If I start from the district list, the collapsed panel containing the list of schools within it opens properly. If instead I start from the county list, then pick a district from the short list, the panel does not open. I've tried using

query('#panelSchool').collapse({
show: true
})

which seems to be supported, but it doesn't do anything.

selectSchoolsByDistrict: function(distCode){

var schoolQueryTask = new QueryTask(app.schoolLayer.url);//public schools

var schoolQuery = new Query();

schoolQuery.outSpatialReference = app.spatialReference;

schoolQuery.returnGeometry = true;

schoolQuery.outFields = ['*'];

schoolQuery.where = app.schFieldPath+".CtyDist = '" + distCode + "'";

schoolQueryTask.execute(schoolQuery).then(function(results){

if (results) {

myGridHandler.updateSchoolGrid(results);//populate the school list

zoomDistrict(distCode);//zoom to the school district

}

});

function zoomDistrict(distCode){

// common.switchDomClass('schoolGridDiv', 'show');

if (domClass.contains('schoolGridDiv', 'div-visible')) {

domClass.toggle('schoolGridDiv', 'div-visible');

}

// var distCode = registry.byId("distSelect").value;

var distQueryTask = new QueryTask(app.districtLayer.url);//school districts

distQuery = new Query();

distQuery.returnGeometry = true;

distQuery.outFields = ['*'];

distQuery.outSpatialReference = app.spatialReference;

distQuery.where = "CtyDist = '" + distCode + "'";

distQueryTask.on('error', function(err){

console.log("Error in queryDistrict " + err.Error)

});

distQueryTask.execute(distQuery).then(function(results){

if (results.features.length > 0) {

var distName = results.features[0].attributes[app.distFieldPath+'.DIST_NAME'];

dom.byId('subHeader').innerHTML = 'Missouri Public School Directory - ' + distName;

dom.byId('listHeader').innerHTML = "Schools in " + distName + ":";

var distExtent = results.features[0].geometry.getExtent().expand(1.5);

app.currentExtent = distExtent;

app.map.setExtent(distExtent);

}

else {

dom.byId('subHeader').innerHTML = "Missouri Public School Directory";

}

});

console.log ("in zoomDistrict of mySelectHandler");

query("#panelSchool").collapse();

query("#collapseSchool").collapse();

}

Re: Calcite map - opening one panel from another

RobertScheitlin__GISP — Wed, 08 Mar 2017 23:08:12 GMT

Tracy,

The command that works for me is:

query("#panelSchool").collapse("show");‍‍‍

Re: Calcite map - opening one panel from another

TracySchloss — Thu, 09 Mar 2017 14:21:15 GMT

I thought I'd tried that variation, but apparently not. That was it! Thanks.