Pluggable Widget with two content areas

0
Hi everybody!   I'm trying to implement a custom widget that acts as a container and has two content areas. So I followed the learning paths basically and adopted it like this:   In my component (Flyout.xml) there are the following two properties: <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> </propertyGroup> </properties>   The component constructs the ReactElement like this: return ( <div className="Flyout"> <span className="flyout-content">{flyoutContent}</span> <span className="page-content">{pageContent}</span> </div> );   In Mendix Studio Pro, the Widget can be added. I did that and it looks like this:   Then I added a text widget in both of the contents. However, running the app leads to this page:   The page content is part of the page, but the text widget, that I added to the page content, is not added. That can be verified in the browser's elements view:   Has anyone an idea what I'm missing here?   Thanks, Holger
asked
1 answers
1

Ok, I found the solution...

 

For everyone who faces this issue: I had to change the function signature in my component to:

export function Flyout({ pageContent, flyoutContent }: FlyoutContainerProps): ReactElement {

In the first place, I had two arguments of the type FlyoutContainerProps, but there is only one, of course...

 

Best,

Holger

 

answered