How to insert WebContainers into a WebSDK control (e.g., Accordion)?

SDKs Web SDK
1

I’m building a custom control using Xojo WebSDK (Web 2.0). The control is a Bootstrap-based accordion, created with JavaScript in the accordion.js file, and it renders properly with section headers and collapsible panels.
Now I want each panel of the accordion to display a WebContainer, such as ContainerDatos or ContainerNombres, which are regular WebContainers already defined in my Xojo project.
Here’s what I’ve tried so far:
I create and add the containers to the page:

datos = New ContainerDatos
nombres = New ContainerNombres
Self.AddControl(datos)
Self.AddControl(nombres)

I then attempt to move them into the accordion panel DOM with JavaScript:

ExecuteJavaScript("document.getElementById('body-panel-datos').appendChild(document.getElementById('" + datos.ControlID + "'));")

The accordion shows up, but the WebContainers never render inside the panels — either they’re missing, appear outside the accordion, or nothing happens. In some cases I get errors like:
UnsupportedOperationException: You must use EmbedWithin to add a container to a WebView
Or: nothing happens, no visual result, no error
I understand WebContainers must be added with EmbedWithin, but in a custom WebSDK control I don’t have access to AddControl or EmbedWithin, and attempts like content.EmbedWithin(Self, …) fail or throw exceptions.
So my specific question is: How can I properly embed a WebContainer inside a custom WebSDK control (like an accordion), so that the container renders and works correctly as part of the panel content?

2

Hi Juan Carlos,

At the moment the Web SDK doesn’t provide a way to embed controls inside. There is already a Feature Request (Issue #64243).

The alternative at the moment is to embed the container into another WebView (i.e. a WebPage) and then move it inside your WebSDKUIControl with JavaScript.

datos = New ContainerDatos
datos.EmbedWithin(Session.CurrentPage, 0, 0, datos.Width, datos.Height)
// Now write some JavaScript to move the control inside the Accordion
3

Thanks. I already figured it out. Now I am trying to fine tune the behavior of the accordion.

4

accordions should be handled by xojo, like page or tabpanels
I find it impossible to deal with websdk, you can’t fill the accordion with xojo IDE
or am I missing something ?

5

You need to set the position: relative CSS rule when moving the div.XojoContainer to a new parent. Also helps to set the following:

position: relative !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
right: 100% !important;

You should only apply this to a specific selector that matches your control and no other. For example:

.myNiftyAccordion .XojoContainer {
  ...
}

And not something generic like:

.accordion-body .XojoContainer {
  ...
}

Using JavaScript to apply these may have unexpected results as the framework can (and will) reset styles on the elements. Additionally, I’ve had better luck using CSS than the Style property of the containers.

Of course, if you’re just looking for a good and feature-filled Accordion for Xojo Web without all of the hassle, I have GraffitiAccordion.

4 Likes