How to copy components WITH logic

A frustrating thing has been that in UI Builder, we cannot copy a component WITH all of its logic, to make a duplicate. When clicking on the “make a copy” button for a particular component, all the visual aspects and data binding names are copied into the new component… but any explicit logic that may have existed in the original component is lost (logic in the event handlers for example).

Therefore, if a component if very complex (with lots of sub-components and a ton of logic), if we want to use it as a basis for another component, our only options was either to reproduce all the logic bit-by-bit… or make the original component a re-usable component and then clone that reusable component to create yet another re-usable component.

However, I have stumbled upon a work-around that seems to allow for a “copy component WITH logic” operation. I think it might be useful for others so I’m describing it here:

How to duplicate components WITH logic — the trick

Create a block, make it reusable. Let’s call the reusable component “copy_block”.
Edit the reusable “copy_block” component. Place a block inside of it and check the box “pod container” for this child block (maybe give it an id “copyBlock”).

Now, on any page that contains the reusable “copy_block”, we see a POD block into which we can drop any kind of component or element:

If we have a “complex original” component for which we would like to make a copy WITH all of its logic, we drop it into the POD, then make a copy (create another instance) of the “copy_block” reusable component on our page, and then simply drag the cloned content of it’s POD back into the page… voila! We now have a copy of the original complex component on our page, with all of its logic :grinning:

@Backendless_Support : do you see anything wrong with this approach?

How about publishing the component in the marketplace as “private”? This way, you can reuse the component across all your projects (any page, any container, any app).

Regards,
Mark

Yes except we don’t want an actual exact copy… just have a “starting point” that makes it easy to chop and modify (for exact copies, re-usable makes the most sense so as not to duplicate a lot of code).

Also (addendum): this trick only works for copying components with logic on the same page. It is not possible to use this to copy components from one page to another.

When you publish a component privately, future installations from the marketplace cannot edit the logic of the original component. If I understood you correctly, you want to be able to get access to the logic and make changes to it. Did I understand you correctly?

Yes, basically. It’s really just a case of “often we want to build a component that is very similar to another component” and starting with a copy of the original makes the work fast and easy :grinning:

Hi @Alex_Klein,

there is no way to copy components with its logic, however any component can be converted into a reusable component.

Regards,
Olha

Hi @olhadanylova there is a way, as described above :grinning:

1 Like