Make an element as a ghost element

[conesult]

Even though it sounds scary, the ‘Ghost element’ purpose is to display an example of an element, e.g. a user profile.

Maybe or probably there is already a term, have tried to create manual data, with the “Ghost user” data, e.g. name, profile photo, etc and than search as that particular “user” to showcase and to be the “Ghost element”. (This works just fine, if there is a better solution, please share as well :))

The last piece of the “Ghost”, is to not be clickable, e.g. “request connection” icon, etc,

Have tried to place a floating group - not responsive across different screen dimensions, would not like to add extra many conditions, nor states with respect.

How I(we) could make a Ghost element? (:

Thanks!

[phrase9]

Is this what you need?

Invisible Elements Plugin for Bubble, by No Code Co

[conesult]

Thanks @phrase9!

Is there a way without a plugin? Perhaps basic question, but majority would like to know…

[conesult]

Doesn’t work… at least for my purposes…

Any other solution?

Only other solution that I see is to create a data, and than search/link it with the element, but that also doesn’t make buttons unclickable, even though you can reach that with certain conditions, will wait little bit more, not a priority…

[phrase9]

Hey man, not that I know of but I’m no expert. Hopefully someone here will help out

[conesult]

Have found a different way around:

Instead of “hiding” an element, in this case a “member profile card” (basically a user profile element, photo, name, etc), and the ghost element would be to show “non-members” how the member profile (card) look like, so the solution is not to “hide”, rather to show in my case random member profile cards by searching for member profiles :random item. (Have additionally added a button (Next member) to repeat the process of searching for a ‘random member’, so that ‘non-member’ can have option to see even more of “examples”. (Good for inbound, or marketing in general, if that is aligned with brand and strategy)

[boston85719]

@conesult

The last piece of the “Ghost”, is to not be clickable, e.g. “request connection” icon, etc,

Just use the conditional property of ‘not clickable’ and set up the conditional dynamic expression so that it is not clickable when you don’t want it to be clicked…or just make it not clickable altogether.

Can create a single reusable element to be used as your ‘listing card’ and put a data type onto that reusable element…then keep the the data source empty and set conditionals on the elements based on when the reusable element ‘thing’ is empty to show a generic data as your ‘Ghost’. Wherever you place it on the app and want it to be ‘Ghost’ just don’t set the datasource and it will show the generic data you set in the conditionals.

Learn More

Boston85719 is an expert Bubbler with a decade experience as an educator. Real name Matthew, he has been actively building SaaS apps, marketplace apps, scheduling apps and more for clients, himself and for sale as templates.

As an official Bubble Bootcamp Instructor, he leads Bubble Bootcamps on a regular basis.

Always willing to offer advice via the Bubble Forum, Matthew also offers Private Personal and Group Training Sessions.

Through his site, NoCodeTrainer, Matthew provides a range of tutorials with editor access to help you jumpstart your Bubble development.

Always accessible you can send Matthew a private message via the forum or send an email directly with your requests.

Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.

[conesult]

Thanks for the solution(s)!

Not clickable is not optional, than would need to create conditions, only for that one small feature…

Same with new data for the element, search will take too long, even as for the ID search, as thinking long term.

Have found the solution, just stated previously before you reply!

Thanks!

[boston85719]

@conesult

Not clickable is not optional, than would need to create conditions, only for that one small feature…

That is a single condition on a single element…when you start to understand the power of reusing things (reusable elements/custom workflows) you will understand the benefits of using conditions as it opens up a whole new level of development possibilities.

@conesult

Same with new data for the element, search will take too long, even as for the ID search, as thinking long term.

I thought you were creating a ghost element that doesn’t require a search. Maybe I am completely missing the point of your “Ghost Element”.

@conesult

Have found the solution, just stated previously before you reply!

Also multiple avenues to get to the same end, just sometimes a particular way of doing things might be more inline with performance optimization and overall sense of optimizing the application.

@conesult

Instead of “hiding” an element, in this case a “member profile card” (basically a user profile element, photo, name, etc), and the ghost element would be to show “non-members” how the member profile (card) look like, so the solution is not to “hide”, rather to show in my case random member profile cards by searching for member profiles :random item. (Have additionally added a button (Next member) to repeat the process of searching for a ‘random member’, so that ‘non-member’ can have option to see even more of “examples”. (Good for inbound, or marketing in general, if that is aligned with brand and strategy)

If the type of User data you are displaying is not sensitive at all and you expect your users do not mind there data being used as an ‘example’ than that is fine.

If however, you expect users to be unhappy with having their data utilized as an example, then you may think about a different approach like the one I suggested of actually having the example data on the element in a condition.

I had actually seen and read your solution and thought I’d offer advice from another perspective.

[conesult]

Yes, definitely!

We have outlined the few ideas how one can create a ‘ghost element’, hope others will find it valuable and usable!

Thanks @boston85719 for participating!