Structure mode of pluggable widget

0
Hi everybody!   I'm implementing a flyout layout as a pluggable widget. The widget itself works fine, and also the Design mode is running now. But I still struggle with the Structure mode. My widget consists maily of two panels that can contain other widgets. Here is the definition in the Flyout.xml file: <properties> <propertyGroup caption="General"> <property key="flyoutContent" type="widgets" required="false"> <caption>Flyout content</caption> <description>All widgets that are placed in the flyout section.</description> </property> <property key="pageContent" type="widgets" required="false"> <caption>Page content</caption> <description>All widgets that are placed in the main part of the page.</description> </property> <property key="flyoutSize" type="integer" defaultValue="25"> <caption>Flyout size (in percent)</caption> <description></description> </property> </propertyGroup> </properties>   The widget looks like this (here in the Design mode, but same at runtime):     In the Structure mode, it looks like this:   What I want to do is to change the layout of the Structure mode. It should not look like the design mode, I'm happy with the basic appearance. But I want to place the two contents side by side instead of below each other. I know that I can implement the function getPreview(...) in the file Flyout.editorConfig.ts. But I don't find a way how to pass all existing children of the two widget containers. The method doesn't return a React element, but a PreviewProps array. All I managed was to show two fixed elements side by side (like in the example here). But I don't know how I could pass the actual children of the containers along. Anybody got an idea? Or some other solution?   Thanks, Holger  
asked
1 answers
0

You need to use a RowLayout (for stucture) and DropZones (for widgets) in your getPreview in order to get widget content in your structure mode preview.

 

Say you have this in your MyWidget.xml file:

<property key="complexContentLeft" type="widgets" required="false">
    <caption>Content Left</caption>
    <description>Place Widgets Here</description>
</property>
<property key="complexContentRight" type="widgets" required="false">
    <caption>Content Right</caption>
    <description>Place Widgets Here</description>
</property>

You will then want to do something like this in your getPreview:

{
    type: "RowLayout",
    columnSize: "fixed",
    children: [
        {
            type: "Container",
            borders: true,
            grow: 1,
            children: [
                    {
                        type: "DropZone",
                        property: values.complexContentLeft,
                        placeholder: "Place Widgets Here",
                        grow: 1, // Adjust based on your needs
                  } as DropZoneProps
              ]
          },
          {
              type: "Container",
              borders: true,
              grow: 1,
              children: [
                  {
                          type: "DropZone",
                          property: values.complexContentRight,
                          placeholder: "Place Widgets Here",
                          grow: 1, // Adjust based on your needs
                } as DropZoneProps
            ]
        }
    ]
}

That will give you something like this in structure mode:

image.png

 

Now you will be able to put widgets inside your widget from structure mode!

answered