Constraining a UX with Panels to an Element

Description

When a UX component that uses Panels is rendered, by default it consumes the entire window (this is only true if UX uses Panels).

A UX with Panel Cards inside a div tag.

That means that if you have created an .a5w page to render the component and placed HTML markup on the page that you would like to be rendered in addition to the UX component, that markup will be overwritten by the UX. An advanced property of the UX now allows you to specify that the UX should be constrained to an element, rather than the entire window.

To see how an .a5w page can be defined with a DIV to contain the UX and how the UX can be configured so that it is constrained to this DIV element. (Requires build 4411 or above) follow the guide below or watch this video. You can also download the component.

Adding a UX Component with Panels to a DIV in an .a5w Page.

In the UX Builder create a UX Component that uses Panels and Panel Cards. This guide uses the component created on the the Storing and Restoring Panels page.
If using the Storing and Restoring Panels example, open the UX Controls page for the component and uncheck the 'Mobile' checkbox from the Controls page toolbar.
Open the UX Properties page. Scroll down the properties list to the Advanced section. Find the 'Render position type for UX component with Panels' and select the 'element' option from the dropdown.
Set the 'Render target element' to be 'mydiv' or something similar. This will id the div where the component will live.
Save the Component.
Open the Web Projects Control Panel.
From the 'Create a new' dropdown in the Web Projects Control Panel toolbar select 'A5W page'.
Save the A5W page
Open the A5W page's 'Source' pane.
Click on the 'Insert Component' button.
Click the 'Select' button.
Choose the UX Panels component that you want to place in a div and Click OK.
Click OK
Click the Copy Code to Clipboard button for the HEAD Section. Keep the "Xbasic/HTML to Insert a Component" dialog open.
Use 'Paste' to add the code inside the a5w page's <head></head> tags.

Add the following <div></div> tags to the <body></body> section of the A5W page.

<div style="border: solid 3px blue; display:inline-block; padding: 20px;">
     <div id="mydiv" style="height: 6in; width: 4in;"


     </div>
</div>

Click the Copy Code to Clipboard button in the BODY Section.

Click 'Paste' to add the 'Body Section' of the UX Component inside the second pair of div tags, like this:

<div style="border: solid 3px blue; display:inline-block; padding: 20px;">
     <div id="mydiv" style="height: 6in; width: 4in;"
     <%a5 ?x_SAVE_RESTORE.Output.Body.Dialog2_HTML %>
     <%a5 ?a5dialogHelper_generateCORSHeaders() %>
     </div>
</div>

Optionally click the 'Copy Code to Clipboard' in the BODY TAG section of the Xbasic/HTML to Insert dialog.
Paste the code inside the <body></body> tags on the A5W page.
Click the 'Run' button in the A5W toolbar.
Test the functionality of the component.
A 'Save_Restore' UX component in a dix

Report an issue with this page