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
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).
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
Hi. New user here. I wanted to chime in to confirm that I was also expecting the “duplicate” functionality to copy the logic with the UI and would suggest that for future improvement. I also need to make copies of something, but make small changes to the logic in each copy.
You can copy Codeless Logic between screens with the combination CTRL/CMD + CCTRL/CMD + V and also you can use “copy” button in context menu on a codeless block
Hi Vladimir. I did notice that, but I can only copy and paste one chunk of logic at-a-time. Shift click doesn’t seem to multi-select and there doesn’t seem to be any way to make reusable logic I can pass different variables to. I would love to be corrected if I missed it though. I anticipate having 100+ items of logic that I reuse in multiple places with different variables.
just to make sure we talk about the same copy ability, you can copy one block with connected blocks on the left and underneath, see the screenshot below:
As a workaround You can for a brief moment place them in a block that over-arches all the logic, like if statement block or try/catch, then copy it, afterwards you can move logic back as it wast, i.e. pull topmost logic block (as it drags with him all the rest blocks) back into handler/event and delete the remaining one block.
Afterwards you can proceed as Vlad already mentioned.
according to reuse logic you can create a custom function, you can configure input arguments and then use it everywhere you need with diff values.
here is a sample in cloud code (server logic), in the UI builder it almost the same
