Forum Academy Marketplace Showcase Pricing Features

Element templates

is it possible to save element templates?

Inside your app? Yeah, that’s what reusable elements are for.

@emmanuel there are two things, reusable elements and elements templates. I understand the difference between them and also see how to create reusable elements but how do you create elements templates like the builtin ‘Tab Element’ and ‘Signup login Form’?

3 Likes

Just wondering if theres any update on this?

Nudge. Does anyone know how to create these? Or is that a potential feature request?

47

1 Like

@rico.trevisan This is currently on the Bubble team’s roadmap under “Reusable element plugins” :slight_smile:

1 Like

Thanks for looking that up!

It is awesome to see their roadmap. It is like xmas will come every week (sprint? month?).

1 Like

I seem to remember seeing it under “Next” too awhile back on the roadmap. It looks like it disappeared from it altogether now. I am wondering if the thought behind removing it was that “Reusable elements”, or even copying/pasting, could fit that use case as a workaround, but the use case for element templates is actually quite different. At the very least, it would be nice to “break sync” of reusable elements so they can be edited independently. It is also a little weird to see a permanent template list with only two items in it and no way to add to it. Element templates is the only list that is “off-limits.”

Here’s an outline of the element types in attempts to show the gap being left by Element Templates, as well as some of the advantages as it relates to the other element types.

Visual Elements - the building blocks, also known as “atoms” in atomic design methodology. E.g. buttons. Saves time copying and pasting widely used objects with similar styles but different content. User can apply a set style or break away and edit them independently.

Reusable Element - A group of solidified “atom” elements that make up a larger element (molecule or organism) and serve a very specific and rigid purpose. Only editable on a dedicated page in which changes are applied globally without the ability to break sync.

The Missing Link: Element Templates
Since these already exist, the petition is for the user’s ability to make additions to the list much like the user makes additions to an application’s “reusable elements” table. There are integral development and design goals that can not be accomplished currently without building the same organisms repeatedly, or copying and pasting. However, copying and pasting organisms makes for even less efficiency than copying/pasting atoms (e.g. buttons).
Use Cases for Additional & Custom Element Templates:

  • Ex: Popup Dialogues - organisms used multiple times throughout an app and with a consistent custom theme but with varying content. (e.g. delete confirmations).
  • Ex: Data Tables - Any good content or contact management system is a master at displaying lists… Lists of contacts, lists of invoices, lists of products… A reusable element is less than useful in this scenario due to its lack of flexibility to edit items like the width of columns and column titles and content types. Drawing an Element Template on the page would allow the basic elements to be rendered and then edited to contain the right dynamic content.
  • Ex: Forms & Fields - Labeling fields and and measuring distances to get can be laborious. How much time it would save to be able to draw the molecules you need in only a few clicks, without hunting on different pages for groups to copy for pasting.
4 Likes

I don’t. Can someone explain the difference between element templates and reusable elements?

@shot Element templates are a collection of pre-designed elements with workflows like a signup/login form that you can use in your app to speed up development. Bubble gives you these and we aim to support them in the marketplace too. A reusable element, can be built by you for your app and creates an element that contains other elements, like a group, that can be used in more than one place.

1 Like

Thanks for the explanation, @neerja. So if I understand correctly, the main differences are that, unlike reusable elements, element templates are 1) predefined by the system and 2) can include workflows. IOW, element templates are not purely visual; they can contain functionality. And Bubble users cannot create element templates of their own - just reusable elements.

I think I got it now. Thanks.

Just wondering, will this be re-added to the roadmap anytime soon? Even just having the option of “un-syncing” a reusable element, so that it can then be edited independently would be an extraordinary time saver. Currently, if following a design system, the same modules often need to be rebuilt each time they are used, and it would be really really awesome if the patterns could be dragged/dropped in like the already existing element templates, (and if we could add to that list).

4 Likes

I have a very clunky workaround, for those in-need…

Let’s say you want to create an element template for a pop-up. This popup template will have a title, close button, some body text and an action button.

Here’s what I’d do:

  1. Create the pop-up and save it as a Reusable Element.
  2. Within the Reusable Pop-up Element, create a group of all the elements (title, close button, etc.).
  3. When you want to use this template, a) add a Pop-up to the new page, b) go to the Reusable Pop-up Element, and copy the element group. c) paste it into the Pop-up on the new page.

It’s terribly clunky, and none of the workflows transfer. But it may still save time on designing a group of standard components and store it in an easy-to-access location.

An “un-sync” button from a reusable element would be much nicer.

You should be able to transfer the workflows as well if you right click > “copy with workflows” and “paste with workflows.” I do something similar using a separate page in my app dedicated to my design system.

Unfortunately, it still doesn’t provide the ability to make changes to a master instance and have those changes be reflected in all uses of the component throughout the app.

@emmanuel, is this something that will be re-added to the roadmap? It would appear to have high value for a number of users.

In terms of use cases, think of it as the “option sets” data feature but for components, or the “symbols” feature in the Sketch App and Invision Studio. It enables design system language use.

Agile Story: (Note: a reusable element or copy/pasting does not satisfy this criteria)
As a user, I would like to be able to create and manage (CRUD with global impact on my app) my own “Element Templates” (with possible overrides per instance) so that…
1) I can avoid the redundancy of recreating the same organisms and their logic/workflows in multiple locations of my app. (e.g. all my popups have a “close” icon in the top right).
2) I don’t have to rebuild an entire organism (e.g. confirmation popup) when the difference is minor, (e.g. popups that only differ in their text content).
3) I can make workflow/logic changes to an already created organism in one place (master), and it have global impact across my app while keeping certain other variables/overrides intact (e.g. changing the label of the primary CTA button in every “confirm delete” popup modal instance of my app from “Confirm” to “Delete.” Or changing the duration of an animation on all popup modals.)

Bonus; Ability to export and import custom element templates and styles

2 Likes

This is definitely something valuable, and we’d love to do this, pretty sure we will one day, but can’t commit when we’ll get to this yet.

4 Likes

On a related note, check out what the crew at OpenBuild.io put together:

3 Likes

Yes, this is indeed part of what we are trying to solve with openBuild. And parts of what you suggest we tackle with it already.

  1. to an extend you can do this now with storing pages in openBuild (in your own library as of now). And we already offer pages with additional workflows currently. So a close button will always be tied to a ‘reset modal’ workflow for example. Where it doesn’t help yet is with dynamically creating your DB. While that is technically probably possible, there are some complexities with that. For one, we do not want to be responsible for directly altering your application at this point. It would require using the Bubble API for POST and that is something we do not want to touch right now. We want users to be in complete control of what they add. We do this slightly with for example the Form Builder which lets you add dynamic form fields to your app, using your app’s data structure. But we are not going to edit your app structure.

  2. This is something you can do yourself pretty easily. Take a single popup reusable and make it very tall. Add as many groups as you need modals for and create a simple ‘trigger’ workflow. That workflow can be triggered from anywhere in your app where that reusable is present. Add a state, push data to the group you want to show and show the modal. That way you reduce the number of popups (will help load your app) and you keep everything in the same popup for easier reference.

  3. This is currently only possible with reusable elements as you may already know. And if you do not require exceptions, changing the label for a button from Confirm to Delete will have an impact on every instance this button was used. For labels, you could utilize the App Text(?) functionality. It gives you one location to keep the ‘Confirm’ text. And by changing it in your settings, you change it everywhere. But app text has it downsides too.

Bonus: This is something we work on now. Importing element templates you can already do with openBuild. You can create your own library of elements that you can reuse in every other app you connect to openBuild and if you use the openBuild Styles (you can get those from the openBase Framework template) you can tweak those styles to whatever style you use and it would turn all the current openBuild components into your style as you copy them in your app.

This is how we are going to introduce new styles. Take the framework template (or the coming soon pro template) and change all the styles (not delete!) to match your own style guide. Then your own components should be matched to those styles and all the existing styles will match your styles when you paste them.

The beauty (if I say so myself :stuck_out_tongue: ) of this system is that when you store a component in openBuild, it stores it with styles and also with inline styles. This means that when you paste your component in an app with the openBuild Styles, it matches the dynamic styles (and you dont have the errors) but if you don’t have the openBuild styles, it pastes just with inline styles so the component looks exactly as advertised. But you lose the scalability of having unversisal styles.

You can test openBuild for free to see if it matches some of your needs!

Hi @willtaylordesign,

Just stumbled upon this thread and thought I’d add my $0.02 worth…

Not to suggest that Element Templates (ET’s) wouldn’t be a useful feature, but in my experience, reusable elements (RE’s) can go quite a long way toward achieving the functionality you describe.

With the ability to change the appearance and visibility of an RE’s “sub-elements” via workflows and Conditionals, RE’s can be made highly “configurable”. Specific custom states can be “exposed” by adding them to the RE so they can be initialized/manipulated in the context of the page on which they’re placed while keeping other custom states “private” to manage state internally. Additionally, custom events can be used to allow the “host” page to alter behavior and/or appearance.

In fact, the popup modal example you cite would be pretty straightforward to make configurable, since button visibility, caption, and appearance can all be dynamically set.

-Steve

it can be done but, in my experience at least, makes for very long workflows