Copying and Pasting Elements with Actions in Claro and Flow

Make page design work easier and quicker by re-using elements already-set up with actions

Both Claro and Flow offer a wide range of powerful and flexible Actions that you can use to create custom learning interactions.

Often, you’ll have a page design where the learner is going to do the same basic thing multiple times, for example, offering several buttons they can click to show them more information on different subtopics.

In those cases it’s faster to create the first interaction then duplicate it and make adjustments for the rest of the uses on the page than making each interaction from scratch.

You can do this in both Claro and Flow, but there are some functional differences between them.

Copy and Paste with Actions in Claro

In Claro when you Copy an element, you can choose to Paste or Paste with Actions.

The Paste option adds a copy of the element on your page. It does not copy any actions.

The Paste with Actions option will add a copy of the element plus copies of any other elements that are targets of actions set on the element you have copied, for example other elements that are shown when the learner clicks on a button. It also preserves all other actions set on the copied element, such as setting a variable or a player control action like enabling the Next button.

Here’s an example. In this page, the map icon has been set up with Show actions to show two text elements.

We have other information we want the learner to reveal by clicking but in the same design as what we’ve set up on the thumbs up icon.

To copy and paste with actions:

Select the element on the page (1)
In the top of the interface select Edit (2)
Select Copy (3). (The Edit menu will close.)
Select Edit again then select Paste with Actions (4).

On the page, copies of the map icon element and the two connected text elements have been pasted.

The thumbs up icon also has a show action targeting the two new (copied) text elements.

Copy and Paste Elements that are Triggers for Actions in Flow

In Flow, there is a Copy function and only a Paste function.

If you are copying an individual element the Paste function will copy all actions set on the copied element that do not target other elements on the page.

Some examples of actions that will be copied:

Player Control actions like Go to Next Page
Page in a Lightbox, Images in a Lightbox, Show Popup actions
Actions that set variables
Links to files or websites

If the action targets other individual elements on the page, the action won't be set on the copied element. This includes:

Show, Hide, Toggle and Swap actions
Media control actions
Animations and effects targeting other elements
Scroll to an element

In other words, copying an element then choosing Paste won’t also copy and paste other elements that are targets of these types of actions like a Paste with Actions does in Claro.

This is because the structure of Flow pages is different than Claro pages. Flow pages are built as a framework of containers and this more-complex structure means the copy/paste process can’t apply to multiple individual elements.

However, if the trigger element and the target element are both contained in the same item being copied, the paste will preserve these types of actions.

Here are some examples:

If you copy a Section and the trigger element and its target are both in that same Section, then the copied Section (which will contain a copy of the trigger element and the target element) will preserve Show, Hide, Toggle and Swap and similar actions. This includes Sections you’ve added as Favorites, which is great for creating interactive sections for use as templates. Here’s more information on Saving Flow Sections as Favorites (Templates) for Use as Design Layouts
If you copy a Panel element that has a trigger element and its target as sub-elements in that Panel, then the copied Panel will preserve Show, Hide, Toggle and Swap and similar actions.