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

1053
4
Jump to solution
05-06-2022 12:58 PM
JustinKirtz1
New Contributor III

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.

JustinKirtz1_0-1651866824466.png

 

<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>
        <!-- FIRST PANEL, ON LEFT SIDE OF MAP -->
        <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>
            <!-- map-specific panels (each one provides a div for a ArcGIS JavaScript API widget) -->
            <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>
        <!-- SECOND PANEL, ON RIGHT SIDE OF MAP -->
        <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>
            <!-- map-specific panels (each one provides a div for a ArcGIS JavaScript API widget) -->
            <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">
            <!-- Overview Map Div -->
            <div id='extentIndicator'></div>
        </div>
    </calcite-shell>
    <div id="tableContainer" class="container hideElement">
        <!-- Attribute table div -->
        <div id="tableDiv"></div>
    </div>
    <!-- Load the jQuery library -->
    <script src="./node_modules/jquery/jquery-3.6.0.min.js"></script>
    <!-- Load the jQuery UI library for the data range calendar pickers -->
    <script src="./node_modules/jquery-ui/jquery-ui.min.js"></script>
    <!-- JQuery Query Builder JS File -->
    <script src="./node_modules/jquery-builder/query-builder.standalone.min.js"></script>
    <!-- Bootstrap JS File -->
    <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>
    <!-- Load the ESRI API library -->
    <script src="https://js.arcgis.com/4.23/"></script>
    <!-- Project JS Code -->
    <script src="js/config.min.js"></script>
</body>

 

  

GIS Supervisor for Greenville Water
0 Kudos
1 Solution

Accepted Solutions
BenElan
Esri Contributor

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

 

 

View solution in original post

4 Replies
LefterisKoumis
Occasional Contributor III

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>
0 Kudos
JustinKirtz1
New Contributor III

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

GIS Supervisor for Greenville Water
0 Kudos
BenElan
Esri Contributor

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

 

 

JustinKirtz1
New Contributor III

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

GIS Supervisor for Greenville Water