Making Mustache widgets look good in the Designer - tooltwist/documentation GitHub Wiki

All Mustache widget receive a property named DESIGNER_MODE that can be used to determine if they are being rendered for the Designer. This gives the template to ability to produce output specific to the Designer:

• Has no interaction, so it will not interfere with the Designer's drag and drop. (e.g. fields are disabled)
• Only uses classes available in the Designer.

The appearance may not be exactly the same as in production, but it best if it looks at least similar.

[#DESIGNER_MODE](/tooltwist/documentation/wiki/#DESIGNER_MODE)
    <!-- HTML for the Designer -->
    <input type="text" placeholder="Username" size="35" disabled="disabled">
[/DESIGNER_MODE](/tooltwist/documentation/wiki//DESIGNER_MODE)
[^DESIGNER_MODE](/tooltwist/documentation/wiki/^DESIGNER_MODE)
    <!-- HTML for Production -->
    <input type="text" placeholder="Username" size="35" class="form-control" name="search" id="search" value="{{username}}">
[/DESIGNER_MODE](/tooltwist/documentation/wiki//DESIGNER_MODE)

Note that for the mustache template to be used in the Designer, if you are using a custom widget you must not have a renderForDesigner() function.

Prerequisites

This fix works since ttWbd-8.4.0-20150307.042014-14.jar.

For prior versions, use PAGE:DESIGNER_MODE instead of DESIGNER_MODE.

---