[New Feature] Copy Elements and Style Properties to Another App

[ryan.prendergast]

We’re excited to share that you can now copy any element from one app to another, with a new copy to another app option in the context menu.

Copy to another app does a deep copy of the selected element(s) and all of their children. It replaces any properties that exist in the app (color variables, styles, font variables, and reusable definitions) with inline properties. The only exception is Bubble-defined font and color variables (“Primary contrast,” “App font,” etc), which are copied by reference and take on the value of that variable in the new app. It does a copy with workflows.

Example 1: Copy a reusable element to another app

Before we released this new feature, copying a reusable element in App A and pasting it into App B would lead to a junk state because App B would try to reference a reusable definition that does not exist, as shown in the image below.

Now, with copy to another app, you get the elements, workflows, color and font variables, and detached properties that were defined in App A, as shown in the image below.

Example 2: Copy style properties to another app

In addition to copying elements, you can also copy style properties from one app to another. Let’s say you have a custom style for buttons with a pink background, blue borders, and 24px font size. If you use a traditional method of copying this button from App A and pasting it in another App B, you get a totally different looking button. But if you use copy to another app instead, all of the style properties are copied inline. In the image of App B below, the top button was copy-and-pasted normally, while the bottom button is the result of copy to another app. You can then create a new style in App B based on this pasted button.

For more, see our documentation. Our product team is excited to hear how you use copy to another app to cut down on repetitive work and expedite development time.

[georgecollier]

This is so good!

[cmarchan]

Woot woot woot!!!

[sudsy]

Suhweeeeet!

[boston85719]

@ryan.prendergast

Now, with copy to another app, you get the elements, workflows, color and font variables, and detached properties that were defined in App A, as shown in the image below.

Does this mean that if I am in App A on a page in which I have a container element (orange) that contains another container (green) which contains a reusable element (useful Reusable Element) and I use this Copy To Another App feature, that in App B when I paste, the reusable element (useful Reusable Element) will be created in App B?

Other questions:

1. Can we copy an entire page?

2. Do the referenced option sets get copied over and pasted?

3. Does any App Text get copied and pasted?

4. Do Custom Workflow Triggers get copied and pasted?

5. Do any API calls get copied and pasted? For example, when there is an RG referencing an API Call as the datasource.

6. Do any backend workflows get copied and pasted?

7. Is there a way to copy and paste an entire set of Styles so I could copy and paste just a single time and bring into another app all 35 styles?

8. If the answers to the above are no, are there any limitations on seeing these implemented?

This New Feature does sound awesome!

[karim-nymbl]

This is fantastic! Just in time for a project we are working on internally

[devease]

Amazing, so useful!
Thanks!

How would that work if it refers to a data type or an API call?

[jai28]

I do have some concerns. Is the copy option restricted to apps in the same account or possible for apps across different accounts with access?
What is also the option to avoid someone from copying / “stealing” your app by copying everything?

[boston85719]

@jai28

What is also the option to avoid someone from copying / “stealing” your app by copying everything?

Probably the likely setup that you can not copy apps that are not in your account or at the least are set to Private

[kate.mcnally]

Hi everyone — I’m jumping back in to address some of the questions that have come up in the comments.

References in an Element’s Properties

Referenced option sets, app text, data types, custom workflow triggers, API calls, and backend workflows don’t get copied over. When you use copy to another app on an element, references that exist entirely in that element’s properties are dereferenced into their values (e.g., style properties, variables, reusable properties). This is done to avoid bringing along a tangled web of references that are invisible to the design canvas. The only exception is workflows since they are owned by the element.

User Permissions and Access

Copy to another app is an option in the context menu only available to someone on your account or someone with collaborator access. All app-editors can already copy-and-paste and export your app’s JSON, so there are no changes in permissions with this release.

Copying Styles to Another App

Currently, there isn’t a way to copy a set of Style variables, so you would need to copy them over by one. I’ve made note of this request, and I’d recommend submitting them to our Ideaboard for others to upvote.

Additional Details

Copy to another app works at the page level, so you can copy an entire page from App A and paste it into App B. Using copy to another app on a reusable in App A will copy over constituent elements but won’t create a reusable definition in App B. If you want to copy over a reusable definition, you’d use the traditional method of copying and pasting directly from the reusable element definition.

[sudsy]

@ryan.prendergast

Copy to another app does a deep copy of the selected element(s) and all of their children.

@ryan.prendergast @kate.mcnally,

I had a chance to tinker with this, and I’ve gotta say, along with reusable element properties, it’s one of the most stellar enhancements to the platform as of late.

I did find a bug, however. The good news is that it should be easy to fix (because I actually got it to work with a simple tweak). I just sent details in bug report #123132.

[espptyltd]

I tried out this feature today and have found a couple of issues :

1. Copying a page that has a reusable element in it does copy the reusable element but it adds it as a group element within the copied page, rather than as an actual reusable element

2. As a result of the reusable element being copied as a group element, the reusable element’s workflows are not copied across

3. The main page’s workflows that rely on the reusable elements custom states break as they cannot find the reusable element 's custom states

4. I would argue that the default approach for copying over styles should not be to put it in line of the element, but rather as the style defined in the source app. We can always modify later if needed, but if we are copying we should get all the setup the way it was from the source app, including the styles.

[boston85719]

How do we enable this feature? I have an app on version 26 (newest version) and I do not see this feature anywhere. Was it already removed from the platform?

[georgecollier]

@espptyltd

Copying a page that has a reusable element in it does copy the reusable element but it adds it as a group element within the copied page, rather than as an actual reusable element

This is the expected behaviour

I just tried copying a page and the reuseables were pasted as normal elements which whilst isn’t ideal is still great as opposed to not pasting at all and I’m sure the team will develop this out in future

@boston85719

I have an app on version 26 (newest version) and I do not see this feature anywhere. Was it already removed from the platform?

It works for me. Right click a page in the element tree for example - do you not see ‘Copy to another app’?

[boston85719]

@georgecollier

It works for me. Right click a page in the element tree for example - do you not see ‘Copy to another app’?

I do see it when right click via the elements tree

But not how I would have done it via the edit drop down at the top of the page

Thanks for the guidance on that. Seems like an oversight or potentially a bug that it is not available via the dropdown under the edit button at the top of the page. I didn’t even think to right click from the element tree.

[ryan.prendergast]

@boston85719

Seems like an oversight or potentially a bug that it is not available via the dropdown under the edit button at the top of the page. I didn’t even think to right click from the element tree

Total oversight, my bad. Fixing rn. (EDIT- this is fixed).

I would argue that the default approach for copying over styles should not be to put it in line of the element, but rather as the style defined in the source app. We can always modify later if needed, but if we are copying we should get all the setup the way it was from the source app, including the styles.

The philosophy here is that copy-to-another app is a pure operation without side effects. We do the deep copy at copy time, and paste creates an element from that object. The issue with bringing over referenced objects like style definitions is that they would affect your app invisibly at paste time. You’d click paste and something happens that you don’t see-- bad UX

[sudsy]

@espptyltd

the reusable element’s workflows are not copied across

I’m pretty sure that’s a bug. I see it on my test page as well. It should do the equivalent of a “Copy with workflows”, but they’re not getting pasted for some reason.

@espptyltd

I would argue that the default approach for copying over styles should not be to put it in line of the element, but rather as the style defined in the source app. We can always modify later if needed, but if we are copying we should get all the setup the way it was from the source app, including the styles.

I disagree. I think the current implementation (when it’s fixed) is the way to go. I don’t want “foreign” styles or reusable definitions appearing in my app unexpectedly. It’s quite simple to convert any element to a reusable or create a style from any element’s current formatting options.

Anyway, I hope the workflow issue and the paste issue I identified in the bug report get fixed soon. This will be a really useful feature!

EDIT

@ryan.prendergast

The philosophy here is that copy-to-another app is a pure operation without side effects.
[…]
You’d click paste and something happens that you don’t see-- bad UX

Agreed!

[gonzaecasas]

Hi @ryan.prendergast . I’ve tried using it but it’s not working for me I see the copy to another app option but when I try to paste it in another app it doesn’t work.

[sudsy]

@gonzaecasas

I try to paste it in another app it doesn’t work.

Same here. I created a simple test page containing a single reusable element. When I select the page and choose Copy to another app and then paste into another app, I get…

I can see that the data is actually there, but it’s not getting pasted as it should. I described this in the bug report I referenced.

@ryan.prendergast, any ETA on a fix for this? I’d love to actually start using this feature.

[dbom009]

This is amazing!!! Thank you guys!!