Skip to main content

When opening a page include via a Modal, when the modal closes the page include unloads so opening the modal a second time results in a fresh include. When opening a page include via a Sliding Panel, the content doesn’t unload so reopening the panel has a stale include. I expect the behavior of the Modal, and don’t see a reason it would differ, but I don’t have any older environments to test in.


Repro via UI-Only

Page


<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false">
<models/>
<components>
<skuid__text contents="1. Click Open Include in Panel&lt;br /&gt;&#10;2. Close via Close button top right&lt;br /&gt;&#10;3. in console, run skuid.debug.modelMap() and see the model still exists (only 1 possible is on the include)&lt;br /&gt;&#10;4. Click Open Include in Panel again, Panel opens&lt;br /&gt;&#10;ER: Shows form for editing records&lt;br /&gt;&#10;AR: Blank page shows (just close button)&lt;br /&gt;&#10;5. Click Open Include in Modal&lt;br /&gt;&#10;6. Close via Close button top right&lt;br /&gt;&#10;7. in console, run skuid.debug.modelMap() and see the model no longer exists&amp;nbsp;(only 1 possible is on the include)&lt;br /&gt;&#10;8. Click Open Include in Panel again, Panel opens&lt;br /&gt;&#10;AR + ER: Shows form for editing records" uniqueid="sk-3g7o-23891"/>
<skuid__buttonSet uniqueid="sk-3g6E-9686" position="center">
<groups>
<skuid__buttonGroup uniqueId="sk-3g6E-9684">
<buttons>
<skuid__button label="Open Include in Panel" uniqueId="sk-3g6E-9685">
<actions>
<action type="openSlidingPanel" openbehavior="open">
<skuid__slidingPanel uniqueid="sk-3g74-13987" size="100%" origin="bottom" behavior="overlay" closeOnPageClick="false">
<components>
<skuid__pageInclude includeType="skuid" uniqueid="sk-3g75-14447" pageName="PanelvsModalIssue_Include"/>
</components>
</skuid__slidingPanel>
</action>
</actions>
</skuid__button>
</buttons>
</skuid__buttonGroup>
<skuid__buttonGroup uniqueId="sk-3g6G-10652">
<buttons>
<skuid__button label="Open Include in Modal" uniqueId="sk-3g6G-10653">
<actions>
<action type="showModal">
<skuid__modal title="New Modal" width="640px" ariaRole="dialog" showHeader="false" showFooter="false" showCloseIcon="false">
<components>
<skuid__pageInclude includeType="skuid" uniqueid="sk-3g6z-12107" pageName="PanelvsModalIssue_Include"/>
</components>
</skuid__modal>
</action>
</actions>
</skuid__button>
</buttons>
</skuid__buttonGroup>
</groups>
<styles>
<spacing/>
</styles>
</skuid__buttonSet>
</components>
<resources>
<labels/>
<javascript/>
<actionsequences>
<actionsequence id="0919be0e-d3d8-4c58-aab2-3a1742a6ef4c" label="panel.close" type="event-triggered" event-scope="skuid" event-name="panel.close">
<description/>
<actions>
<action type="closeSlidingPanel" closebehavior="close"/>
</actions>
</actionsequence>
<actionsequence id="97157dd1-3a4f-4645-9e30-dcf15f56eb17" label="modal.close" type="event-triggered" event-scope="skuid" event-name="modal.close">
<description/>
<actions>
<action type="closeModals" closebehavior="close"/>
</actions>
</actionsequence>
</actionsequences>
</resources>
<background/>
<interactions/>
<surfaces/>
</skuid__page>

Include


<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false">
<models>
<model id="CreateRecord" limit="20" query="true" datasource="Ui-Only" createrowifnonefound="true">
<fields>
<field id="firstname" displaytype="TEXT" length="255" label="First name"/>
<field id="lastname" displaytype="TEXT" length="255" label="Last Name"/>
<field id="age" displaytype="DOUBLE" length="255" label="Age" ogdisplaytype="TEXT" precision="9" scale="0"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<skuid__buttonSet model="CreateRecord" uniqueid="sk-3g6b-17501">
<groups>
<skuid__buttonGroup uniqueId="sk-3g6b-17499">
<buttons>
<skuid__button label="Close" uniqueId="sk-3g6b-17500">
<actions>
<action type="cancel">
<models>
<model>CreateRecord</model>
</models>
</action>
<action type="publish" scope="skuid" event="panel.close">
<params/>
</action>
<action type="publish" scope="skuid" event="modal.close">
<params/>
</action>
</actions>
</skuid__button>
</buttons>
</skuid__buttonGroup>
</groups>
</skuid__buttonSet>
<skuid__form showErrorsInline="true" model="CreateRecord" uniqueid="sk-3g6Z-16073" mode="edit">
<columns>
<column>
<sections>
<section title="New Section" showHeading="false">
<fields>
<skuid__field id="firstname" uniqueId="sk-3g6Z-16074"/>
<skuid__field id="lastname" uniqueId="sk-3g6Z-16075"/>
<skuid__field id="age" uniqueId="sk-3g6Z-16076"/>
</fields>
</section>
</sections>
</column>
</columns>
</skuid__form>
</components>
<resources>
<labels/>
<javascript/>
<actionsequences/>
</resources>
<background/>
<interactions/>
<surfaces/>
</skuid__page>

I use a lot of sliding panels in V1 and they don’t unload components by default. You need to add an action to hide the component and then a separate action to show the component to get it to “refresh”. This is good in a way because if gives you options for different use cases.

It would be cool if the sliding panel had a setting of “unload components on close” to make it more obvious.


That makes sense, and agreed that having a setting would make it more obvious and easier to use. It would also be nice to have a combined modal/panel component with the ability to choose unloading and what to render content as a modal vs sliding panel for mobile.


Yes, I have standardized on using sliding panels at 100% width with close topmost sliding panel buttons at the top. Work great on desktop and mobile and everything in between.


Reply