[New feature] Canvas placeholder for text and image elements

Hey everyone,

We added a new feature that allows you to input a “Canvas placeholder” for dynamic text and image element inputs. This means that instead of the expression inside the text/image element, you can specify what the input should look like in the editor (ie. instead of “Current User’s profile picture”, input a dummy picture for styling on the editor canvas). The “Canvas placeholder” will only be visible in the editor, and run-mode elements will evaluate to the dynamic expression input. We hope this helps!


46 Likes

Looking forward to trying this out. Should be really nice for building out templates for people. :blush:

3 Likes

Amazing :slight_smile: (making the editor so much cleaner and easier to work with visually).

5 Likes

Yeah this is a great UI change - Going to make it easier for me to organize my pages and what’s on them. Some of my expressions are a mile long… and almost impossible to read. Good update!

5 Likes

Nice update! Looking forward to trying it

1 Like

Great stuff, much neater and visually less cluttered.

Any chance this could be available and expand into link and button elements @sravani?

Cheers

2 Likes

Nice!

Nice!

I am also hoping one day we are able to select preloaders which are displayed immediately on page load until data is loaded. Right now I have to do some workarounds with custom css, html and js.

2 Likes

This is a feature long overdue - I’d been using a bunch of conditionals to achieve similar functionality, but it was a total nightmare maintaining the logic around it. This will simplify things quite a bit, and hopefully reduce a few WU units by not having to evaluate a bunch of conditionals.

Will give it a try in my next release.

1 Like

@sravani Great QOL feature. I noticed if you use the placeholder, then remove dynamic data in the data source, the placeholder box gets hidden but it continues to use it still. So you have to add dynamic data back, remove placeholder, remove dynamic data to see any static text you typed.

Also this might be a similar issue that has been around for a long time: If you set an input to some default dynamic value, then use autobinding it still displays the previously used dynamic value even though it’s not using it.

2 Likes

Fantastic!!! Love these quality of life improvements that have been coming.

1 Like

@sravani, any chance you’d consider changing the name to Data placeholder? To my way of thinking, it’s a more accurate label since it’s taking the place of dynamic data. Or if you want the name to reflect the context in which it’s used (instead of the thing it’s taking the place of), then maybe Design placeholder (since it’s visible only on the design tab).

I know “Canvas” is the internal name for a Bubble page in design mode, but it’s not the most common usage. Plus, it makes me think of AirDev.

(C’mon, come clean. How much are they paying you for that placement? :smirk:)

3 Likes

@sudsy It replaces not just dynamic data portions but the entire text element’s text

Yes, @tylerboodman , I understand what it does. It’s a placeholder for “actual data” (dynamic or combo static/dynamic - i.e. whatever’s referenced by the dynamic expression field) - hence my suggested label change.

“Canvas” just makes no sense to me, as that word doesn’t even appear in the editor UI. If the “Design” tab was labeled “Canvas” instead, then maybe it would make a bit more sense.

4 Likes

Hey I’d love to get an insight into how you do this

1 Like

Nice one! :rocket:

1 Like

Sorry I meant that when you add in any kind of dynamic data and static text, put some text in the Canvas placeholder, it will override the entire text element’s text, not just the dynamic data portion of the text element’s text.

2 Likes

Yes!! this feature i’ve been waiting for a long time! thank you :slight_smile: this is so much better than the full dynamic expression especially in the smaller groups.

Hi @sravani !

Looks very cool! Does it consume WU?

1 Like

Thanks for pointing this out! We are working on a fix for this now, and will let you know when it is live.

1 Like