Calcite map - opening one panel from another

1502
5
Jump to solution
03-08-2017 08:08 AM
TracySchloss
Frequent Contributor

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 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Tracy,

   The command that works for me is:

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

View solution in original post

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Tracy,

  Try:

dom.byId("panelSchool").collapse({toggle: false});
0 Kudos
TracySchloss
Frequent Contributor

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

0 Kudos
TracySchloss
Frequent Contributor

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

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

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();

}

}

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Tracy,

   The command that works for me is:

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

View solution in original post

0 Kudos
TracySchloss
Frequent Contributor

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

0 Kudos