Supporting Dynamic Data

Introduction to Dynamic Properties in Element Studio

This guide explores how to enable and configure dynamic properties for controls within Element Studio. This functionality allows you to dynamically update content based on external data sources.

Setting Up Dynamic Properties

Enabling Dynamic Properties for Controls

1. Open Element Studio and select the element with the controls you wish to make dynamic.
2. For a text control, access the control settings and enable the dynamic property option. Set the accepted dynamic property type to ‘string’.
3. Similarly, for an image control, enable the dynamic property and set it to accept an ‘image url’.

Applying Dynamic Data to Controls

1. Clear any static values previously set in the controls.
2. Insert dynamic data for the text control by selecting ‘post title’ from the available dynamic data options.
3. For the image control, select ‘post featured image’ to dynamically set the image based on the featured image of the post.
4. Preview the changes to see the dynamic content in action, such as displaying the title and featured image of a ‘Hello World’ post.

Understanding Dynamic Property Paths

The changes made to enable dynamic properties are reflected in the ‘dynamic property paths’ section of Element Studio. This section confirms that the text control accepts strings and the image control accepts image URLs. If you modify the position of a control or its settings, these paths need to be updated manually to ensure the dynamic settings are applied correctly.

Managing Control Modifications

If a control with dynamic properties is copied and pasted within Element Studio, the dynamic properties need to be re-enabled and configured for the new instance of the control. It’s essential to verify that the dynamic property paths are correctly set in the ‘dynamic property paths’ section, which serves as the source of truth for these settings.

Additional Notes

This tutorial provides a basic walkthrough on setting dynamic properties for controls within Element Studio, enabling content such as text and images to be dynamically updated based on external data. Remember to regularly check and update the dynamic property paths if controls are moved or their settings are altered to maintain proper functionality.