Skip to main content
Nintex Community Menu Bar
Question

Have Sliding Panels and Modals always behaved differently for unloading content?

  • July 12, 2024
  • 3 replies
  • 1 view
  • Translate

Forum|alt.badge.img+1

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>
Did this topic help you find an answer to your question?

3 replies

Forum|alt.badge.img+17

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.

Translate

Forum|alt.badge.img+1
  • Author
  • 3 replies
  • July 12, 2024

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.

Translate

Forum|alt.badge.img+17

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.

Translate

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings