Skip to main content

Dynamically duplicate text content

info

If you are not familiar with the concept of middleware, make sure to check the middlewares explanation. Also, make sure that you are familiar with the Actions concept.

Duplicating Text element content in multiple Text elements is very easy to achieve using the Loopic API. The goal is to add a new middleware that will set the text content of as many Text elements as we want to the value received. Middleware will be triggered once the template receives the desired key-data values, and the Text element content will be changed using the API.

Prerequisites​

For this example, we will need at least two Text elements, but you can create more if you want to. We will create one Text element with the key _original and one Text element with the key _copy. You can do whatever you want with the styling and animation as it won't affect the middleware logic which we are going to add.

Adding new update middleware​

In your Composition action, add new update middleware. Set the key you want to be used for updating the Text element content. In this example, we will choose _original as the key which will trigger the middleware.

info

Don't mix the key we are setting in our middleware and the key that is assigned to the element. They can be the same, but they don't have to. The key used in the middleware is the key that will trigger our middleware to execute, and the key of the element is used for looking for that specific element. When relying on default middleware, your middleware key should be the same as the one set for the element, but in this case, we are not relying on the default middlewares.

Now the empty middleware should look like this.

loopic.useOnUpdate("_original", (key, value, next) => {
  // Middleware code
});

Setting the content of the text element to a dynamic value​

Now in our middleware, we should write the code that will set the content of the both _original and _copy text elements.

Let's first get the references to our _original and _copy elements.

const originalElement = this.findElementByKey("_original");
const copyElement = this.findElementByKey("_copy");

Once we got the elements, let's set their content to the value received.

originalElement.setContent(value);
copyElement.setContent(value);

Final middleware​

Our final middleware should look like this.

loopic.useOnUpdate("_original", (key, value, next) => {
  const originalElement = this.findElementByKey("_original");
  const copyElement = this.findElementByKey("_copy");

  originalElement.setContent(value);
  copyElement.setContent(value);
});

And that's it!

Using the default middleware​

Now please note that this middleware could be simplified even more. Since the key used to trigger our middleware is _original, and the same key is the key of the original text element, the default text middleware can do the job of setting the value of the original text element. Let's remove parts of the code that are related to the original text element.

loopic.useOnUpdate("_original", (key, value, next) => {
  const copyElement = this.findElementByKey("_copy");
  copyElement.setContent(value);
});

Now the only thing we need to do is to tell Loopic to execute the default text middleware by calling the next() method. If this concept is not clear to you, please check our middleware explanation.