AnsweredAssumed Answered

Calcite map - opening one panel from another

Question asked by schlot on Mar 8, 2017
Latest reply on Mar 9, 2017 by schlot

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:

 

<!-- District Search 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()

Or 

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:

 

function zoomDistrict(distCode){
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";
}
});

//  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 

Outcomes