Change the preview of the custom/pluggable widget

Hello, When we create a custom/pluggable widget, we have the option of including a preview of our widget when using Mendix Studio or when using "Design Mode" in Mendix Studio Pro with the editorPreview.(tsx|jsx) files. However, the preview is not “friendly”. I created a simple button to illustrate. “Design Mode”: “Design Mode” Questions: My custom widget has three different styles, similar to standard buttons. How can I change the view in “Design Mode” to use these variations, simulating the same result with the standard buttons shown in the image above? Still using the same image, how do I change the way the buttons are displayed? I mean, here we see that they behave like block-level elements, but I would like them to be rendered as inline-block elements.   “Structure Mode”: “Structure Mode” Questions: As far as I know, the editorPreview.(tsx|jsx) files are used to define how custom widgets are previewed using the “Design Mode”, however, do we have any chance of seeing the same results using “Structure Mode”? All custom widgets are displayed using the same layout when using "Structure Mode", the gray rectangle that occupies 100% of the available width with the standard icon used for each custom widget and its name on the right… I would like to see these three elements side by side, like the standard buttons below them.   Application running in the browser:   Comparing the three stages above, it is difficult to build a page and imagine how it will be displayed, because the styles used to preview it are different in each mode.   Thanks in advance for any help. Kind regards, Paulo de Tarso
2 answers

FYI, about what I asked, this is not possible to do. The "Design Mode" is WYSIWYG, the "Structure Mode" is for development.

For the developer's point of view, it is a good idea to work in "Design Mode" to configure the page and then cross-reference "Design Mode" to check the final design. You will find it easier to use "Structure Mode" with limited visual resources when you have a lot of components on the page, because it will have fewer "distractions" and this will help to identify which components you have on the page.


Hey Paulo, thanks for shraring with your outcome here.

To clarify for you and others who find this in the future:

  • You can adjust the way your widget looks in design mode by using the props passed to the widget. Any static props (like the button type) should be available to you in the editorPreview file when you render the widget
  • For structure mode, you are correct that you cannot change the way it looks (as for Mendix 9.1). Look out for more in this area as new versions are released!