topic Re: Calcite Maps - Shell Panel in Calcite Design System Questions

Calcite Maps - Shell Panel

DerrickLim — Sat, 23 Oct 2021 13:20:42 GMT

Hi esri community! I am trying currently trying to use the calcite-action-bar to open/close a calcite-panel using calcite-flow. So far i do not have much luck in doing so. Is there a button i need to create in the action bar container and write a JS code for this sort of interactivity? if so, how? See below for the script under the <body>....</body> section of my html script:-

<calcite-shell content-behind calcite-hydrated>

<calcite-shell-panel slot="primary-panel" position="start" expand>

<calcite-action-bar slot="action-bar" class="calcite-theme-dark" >

<calcite-action text="Add" icon="plus"></calcite-action>

<calcite-action text="Save" icon="save"></calcite-action>

<calcite-action text="Layers" icon="layers"></calcite-action>

</calcite-action-bar>

<calcite-flow id="layer-list-flow" calcite hydrated>

<calcite-panel heading="Layers" intl-back="Back" dismissible calcite hydrated>

<calcite-tip heading="No layers" non-dismissible calcite-hydrated>

<p>Add layers to your map and they will appear here</p>

</calcite-tip>

</calcite-panel>

</calcite-flow>

</calcite-shell-panel>

</calcite-shell>

</div>

</body>

Thank you!

Re: Calcite Maps - Shell Panel

BenElan — Wed, 17 Nov 2021 19:02:20 GMT

Hi @DerrickLim, I apologize for the delayed response. In the sample below, clicking on the "info" action will toggle the panel. Let me know if you have any additional questions!

https://codepen.io/benesri/pen/JjywgXy?editors=1010

Re: Calcite Maps - Shell Panel

DerrickLim — Thu, 18 Nov 2021 12:30:02 GMT

Hi Ben, no worries and thanks for the solution. It works! Also, do you have any idea how to encapsulate shell panels into one single panel when i click the other tabs on the left? Currently mine is resulting with two panels with the action button enabled which is not what i am looking for. thanks

Re: Calcite Maps - Shell Panel

BenElan — Thu, 18 Nov 2021 17:54:05 GMT

I'm not sure how you set that up, but if you have two separate panels then you should make sure to collapse one when you open the other.

Re: Calcite Maps - Shell Panel

BenElan — Wed, 22 Dec 2021 18:22:47 GMT

To follow up on this question, I just released a tutorial that will help with this workflow:

https://developers.arcgis.com/calcite-design-system/tutorials/create-a-mapping-app/