Hello. While developing, I would like to be able to add a visual element to the hierarchy purely for preview/placeholder purposes.
An example might be a social media home page.
The home page has a Title and a scroll view where posts would go.
A post contains some text, and a scroll view where comments would go.
And a comment contains some text.
Each of these are their own UXML’s.
It would be really convenient if I could add a placeholder comment template inside of the post UXML, and then a placeholder post template inside of the home page UXML.
This way, when working on the home page UXML inside of UIBuilder, I can see some placeholder content. Similarly, when I am working on the Post UXML, I can see a placeholder comment.
Currently I am doing this manually, where I have to open up all 3 UXMLs, add my placeholders, go back to Home Page UXML and do my work, then open all 3 UXML’s up again to delete my placeholders.
I don’t know what the workflow for this would look like. Maybe its a dumb idea and maybe I just need to find a new workflow for myself?
This is a feature we’ve had on our roadmap for a while. It’s just something we need to get at.
That said, until the future arrives, let’s talk about workarounds. One recommendation I have is to just leave the placeholder in there all the time. Give it a USS class so you can identify it as a placeholder (and maybe use Opacity to make it look like a placeholder in your USS). Then, when populating with real content at runtime, do a quick query first for any elements with “placeholder” class and delete them. It’s not ideal, but should get the job done.
Thanks for the information and the workaround, great idea! Hearing from one of the Devs on how they would tackle a problem with their own system is really insightful. I’m really thankful that you take the time to reply to people here on the forum! Cheers.
I don’t have any workflow ideas to add, but I also struggle with this issue in the builder. Basically, the builder is a great tool to design a complex large screen with lots of text, buttons, elements and cool styling. However, in practice, most of these elements need to be composed at edit/runtime: populate lists, instantiate the same button multiple times, set texts, etc.
I guess there’s not much to do about properties that are modified via script, e.g. when setting text labels. I can simply set default text in the builder to design. But then I’d like to instantiate templates within the builder that are marked as temporary and are best not even saved to the actual UXML, but instead separately only for the builder. Using the workaround with a custom “placeholder” class would work, but has the overhead of loading all elements, just to delete them. Also, it would be nice to have visual feedback in the builder which elements are placeholders, e.g. by either toggling them completely on and off via the menu or setting their opacity (as a user setting that is not saved over sessions probably).