Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How do I handle dynamic data updates in TeleportHQ


How do I handle dynamic data updates in TeleportHQ


To handle dynamic data updates in TeleportHQ, follow these steps:

Binding Dynamic Data to Elements

1. Ensure CMS Integration:
- Confirm that your project is connected to a headless CMS and that you have imported the necessary content types.

2. Use CMS Items or Lists:
- Dynamic data can only be added to elements within CMS Items or CMS Lists, as these require a source for data retrieval[1].

3. Select the Element:
- Drag the element you want to bind to the CMS data into the Success layer of the CMS Item on your canvas.

4. Access the Dynamic Properties Panel:
- Click on the element, then navigate to the Right Panel and click the "Bind data" icon next to the attribute you want to make dynamic.

5. Choose the Data Field:
- In the Dynamic Property panel, select the appropriate data field from your CMS that you wish to bind to the element. Click "Bind property" to establish the connection[1][2].

6. Nesting and Complex Structures:
- If your CMS data structure is nested, you can bind properties from both the parent and child CMS elements. This allows you to utilize data from multiple sources within your layout[1].

7. Syncing Updates:
- Whenever you make changes in your CMS, ensure to sync the content types in TeleportHQ to reflect these updates in your project. This is crucial for keeping your front-end data in line with the back-end content[2].

8. Preview Changes:
- Use the preview feature to check how the dynamic data appears on your site. Make adjustments as necessary to ensure the data displays correctly.

By following these steps, you can effectively manage dynamic data updates in TeleportHQ, ensuring your website reflects the latest content from your headless CMS.

Citations:
[1] https://help.teleporthq.io/en/article/how-to-bind-dynamic-data-to-elements-1ojkk98/
[2] https://teleporthq.io/headless-cms-integration
[3] https://docs.teleporthq.io/uidl/examples.html
[4] https://github.com/teleporthq/teleport-cms-mappers
[5] https://teleporthq.io/release-notes-latest