Visual clear marking in design canvas - developer notes

0
I would like to mark a widget (container) as a developer note in a page.So make a class that colors the background and set a border, maybe also an icon ....When i design a page and I have to design something that is not always completely clear for other developers (like why is this layout designed this way or why is some widget placed here or ??) I would like to add a container with that class on the page.This way every developer that looks at this page can see why some things are done on this page.Ofcourse this is a developer note so I want to see this coloring/border in design canvas (so while designing the page) but it looks like during designing the coloring is not applied.It works perfect when the application is runned but not when designing.Does somebody know if this is possible and how.I do not want to use Styles or just bold text or just a text widget, or a groupbox, I really want to have a clearly visible different widget so with a colored background is the clearest I can think of.regards
asked
3 answers
0

Hi Didier,

You’re right, classes and design properties only show up in Design mode, so that doesn’t help a team that works in Structure mode.

You mentioned a custom widget as your next try, so I built one. It’s called Dev Note, and it shows in Structure mode.

How it works:

  • Drag Dev Note from the toolbox (Structure category) onto any page. No data view needed.
  • Pick a Type: Note (yellow), Warning (red) or To do (blue).
  • Enter a title and your note text.
  • It shows as a colored box in both Structure mode and Design mode.
  • At runtime it renders nothing, so end users never see it and you don’t need any visibility settings.
  • In the Page Explorer it shows as “DEV NOTE: your text”, so notes are easy to find.


In Structure mode: It is Visible

I have attached image for your reference.

The same page at runtime, with no note visible:


One thing to know: it’s a note you place next to the part of the page you want to explain, not a container you wrap around other widgets. I did that on purpose, because a container that renders nothing at runtime would also hide everything inside it.

I’ve published it on the Marketplace: Dev Note - Developer Notes in Structure Mode

Hope this helps.

answered
0

Hi Janakan,

Thanks for this but these are also all the things that i did to make it work.
With 1 exeption and that is the Mode.

So you mean that I can only accomplisch something like that in Design mode (and not in Structure mode)
That's a pity because we never work in Design mode, always in Structure mode so that is also the place where I would like to see this visual marking.

Remark: I will wait a few days before I mark this as correct answer (maybe i get a few other reactions that can also help me with this)

Thanks

answered
0

Hi Didier,

As far as I know, Structure Mode does not render custom styling at all. It is intended to show the page hierarchy and widget structure, not the visual appearance, so CSS classes, background colors, borders, icons, etc. won't be displayed there.

That's why your solution works in Design Mode and at runtime but not in Structure Mode.

For developer-only annotations, I've seen teams use a few alternatives:

  • A dedicated container with a naming convention such as:
DEV NOTE - Do not remove, required for responsive tablet layout
  • A comment/text widget styled for Design Mode.
  • Widget names/captions that start with [DEV] or [NOTE].
  • Documentation directly on the microflow/page/widget where applicable.

Unfortunately, there is no equivalent of a "highlight this container in Structure Mode" feature that I'm aware of. Structure Mode only shows the widget tree and properties, not custom visual rendering.

One workaround I've used is to create a container named:

🔶 DEV NOTE

and place the explanation inside it. The icon/text is visible in Structure Mode even when styling isn't.

So I think your original idea is technically possible only in Design Mode. If your team works exclusively in Structure Mode, then the note needs to be conveyed through widget names, captions, or documentation rather than CSS-based visual cues.

It would actually be a nice Studio Pro enhancement request to have a dedicated Developer Note widget that is visible in Structure Mode but ignored at runtime.


answered