Two calcite-shell-panels in same app? Panel not displaying

JustinKirtz1 — Fri, 06 May 2022 19:58:12 GMT

I'm trying to add expandable toolbars on both sides of my map. I've been able to get the toolbars to show up but I'm not able to use the calcite-action buttons to open their respective panel from the second toolbar.

As shown below, both toolbars are present. When I click the calcite action on the left toolbar, the resulting panel displays just fine (Measure, in this example). However, when I click on the calcite action on the right toolbar the panel never displays (test panel, in this example). How can I get the panel to show for the toolbar on the right? I included my condensed code below.

<body> <calcite-loader active></calcite-loader> <calcite-shell content-behind hidden> <h2 id="header-title" slot="header"><img src="img/gwlogo.png" style="width:30px;height:30px;"></h2>  <calcite-shell-panel slot="primary-panel" width-scale='' detached> <calcite-action-bar id="appToolbar" slot="action-bar" expanded> <calcite-action data-action-id="measure" icon="measure" text="Measure" title="Measure"></calcite-action> </calcite-action-bar>  <calcite-panel id='measurePanel' heading="Measure" height-scale="l" data-panel-id="measure" hidden> <div id="measure-container"> <div id="distanceBlock"> <button id="distanceButton" type="button" title="Measure distance between two or more points" class="action-button esri-icon-measure-line" style='display:inline;'></button> <p style='display:inline;'>Measure A Distance</p> </div> <div id="areaBlock"> <button id="areaButton" type="button" title="Measure area" class="action-button esri-icon-measure-area" style='display:inline;'></button> <p style='display:inline;'>Measure An Area</p> </div> <div id="distanceBlock3d" class="noDisplay"> <button id="distanceButton3d" type="button" title="Measure distance between two or more points" class="action-button esri-icon-measure-line" style='display:inline;'></button> <p style='display:inline;'>Measure A Distance</p> </div> <div id="areaBlock3d" class="noDisplay"> <button id="areaButton3d" type="button" title="Measure area" class="action-button esri-icon-measure-area" style='display:inline;'></button> <p style='display:inline;'>Measure An Area</p> </div> </div> </calcite-panel> </calcite-shell-panel>  <calcite-shell-panel slot="primary-panel" width-scale='' detached position="end"> <calcite-action-bar id="appToolbar2" slot="action-bar" expanded> <calcite-action data-action-id="TEST" icon="layers" text="TEST PANEL" title="TEST PANEL"> </calcite-action> </calcite-action-bar>  <calcite-panel id='TESTPanel' heading="TEST" height-scale="l" data-panel-id="TEST" hidden> <div id="TEST-container"></div> </calcite-panel> </calcite-shell-panel> <div id="viewDiv"></div> <div id='overviewMapDiv' style="display:none">  <div id='extentIndicator'></div> </div> </calcite-shell> <div id="tableContainer" class="container hideElement">  <div id="tableDiv"></div> </div>  <script src="./node_modules/jquery/jquery-3.6.0.min.js"></script>  <script src="./node_modules/jquery-ui/jquery-ui.min.js"></script>  <script src="./node_modules/jquery-builder/query-builder.standalone.min.js"></script>  <script src="./node_modules/bootstrap/bootstrap.min.js"></script> <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.77/calcite.esm.js" type="module"></script>  <script src="https://js.arcgis.com/4.23/"></script>  <script src="js/config.min.js"></script> </body>

Re: Two calcite-shell-panels in same app? Panel not displaying

LefterisKoumis — Fri, 06 May 2022 20:01:36 GMT

THe panel on the left is the primary and on the right is the

<calcite-shell-panel slot="contextual-panel" position="end" width-scale="l" detached>

Re: Two calcite-shell-panels in same app? Panel not displaying

JustinKirtz1 — Fri, 06 May 2022 20:08:43 GMT

Thanks for the quick reply but unfortunately that did not fix the issue. It still isn't unhiding the panel.

Re: Two calcite-shell-panels in same app? Panel not displaying

BenElan — Fri, 06 May 2022 20:17:40 GMT

Can you provide the JavaScript code snippet where you add the event listener? My guess is you're only adding the listener to one of the calcite-action-bar elements. You can use querySelectorAll to add an event listener to all of the calcite-action-bar elements.

document .querySelectorAll("calcite-action-bar") .forEach((element) => element.addEventListener("click", handleActionBarClick) );

Or you could add ids to the action bars and use those.

[ document.querySelector("#action-bar1"), document.querySelector("#action-bar2"), ].forEach((element) => element.addEventListener("click", handleActionBarClick));

Re: Two calcite-shell-panels in same app? Panel not displaying

JustinKirtz1 — Fri, 06 May 2022 20:20:57 GMT

I feel so stupid, that is exactly what my problem was! Thanks y'all for such quick responses!

topic Re: Two calcite-shell-panels in same app? Panel not displaying in Calcite Design System Questions

Two calcite-shell-panels in same app? Panel not displaying

Re: Two calcite-shell-panels in same app? Panel not displaying

Re: Two calcite-shell-panels in same app? Panel not displaying

Re: Two calcite-shell-panels in same app? Panel not displaying

Re: Two calcite-shell-panels in same app? Panel not displaying