Synced Rows
If you're on the Essentials plan, upgrade a development application for free to try this and other Core-level features.
How it works
The Synced Rows feature complements the existing Save Rows feature in a number of ways. Essentially, Synced Rows allows you to edit content that has been saved in a design, and then share those changes across multiple designs. This is accomplished automatically through the use of our Content Services API (CSAPI).
The key benefit of Synced Rows is that it allows you to make propagate content changes across multiple assets. For example, if you need to update the contact information on your email templates, you can make the change once, and then have that change automatically propagated across all of your email designs. This saves you time and effort, and ensures that your content remains consistent and up-to-date.
Example use cases include:
- Updating landing page headers. With this feature, you can make changes to the header of your landing pages and have those changes reflected across all of your designs. This can be especially helpful if you have a large number of landing pages that all use the same header.
- Updating footer information on transactional emails. This might include updating the copyright information, social links, or company name. With Synced Rows, you can make these changes once, and then have them automatically applied to all of your transactional email templates.
This feature syncs the following elements:
- Row structure, settings, and styles. When a row is saved as a Synced Row, the feature captures its structure (the arrangement of its columns and content blocks), its settings (such as padding, margin, and border), and its styles (such as font, color, and background).
- Content blocks, settings, and styles. The feature also captures the settings and styles of each content block within the row, including its type, content, and formatting.
- Metadata. Finally, the feature captures any metadata associated with the saved row, such as its name, description, and creation date.
Synced Rows UI Features
This feature separates saved rows into two types: synced rows and standard rows.
Synced rows, as the name suggests, are rows that are synced across multiple designs. This means that any changes made to a synced row will be automatically updated in all designs that contain that synced row. However, due to this syncing functionality, synced rows cannot be edited from the builder stage. This is to ensure that any changes made to the synced row are consistent across all designs that use it.
Furthermore, not only can synced rows not be edited from the builder stage, but content within those rows also cannot be selected. This is because synced rows are essentially a reference to a saved row, and any changes made to the content within the synced row will be reflected in all designs that use it.
In contrast, standard rows are rows that are not synced across multiple designs. They can be freely edited from the builder stage, including selecting and editing content within the row. Standard rows are useful when the user needs to make specific changes to a single design without affecting other designs that may use the same saved row.
The “edit” icon is a visual indicator that allows users to quickly identify synced rows and make edits to them.
To edit a saved row, users must first identify the synced row that they wish to edit. Synced rows are easily identifiable because they display the “edit” icon, which is a small pencil icon. This icon is located in the top-right corner of the synced row, and it is only visible on synced rows. Standard rows, on the other hand, do not display this icon.
To edit a synced row, the user simply needs to click on the “edit” icon. This will display row editing options in the sidebar panel, as shown below.
Managing Synced Rows
When editing a synced row, users are presented with two options: they can either edit the row across all designs or unsync the row, converting it into a standard row.
The first option, to edit the row across all designs, allows users to make changes to the synced row that will be reflected in all designs that use it.
The second option, to unsync the row, converts the synced row into a standard row. This means that any changes made to the row will only affect the design in which it is being edited. This option is useful when the user needs to make specific changes to a single design without affecting other designs that may use the same saved row.
In addition to these options, synced rows also have several other actions that are generally available. These actions include commenting, deleting, duplicating, and locking/unlocking the row.
If the user selects to unlock the row from the stage, the row will open in Edit Single Row Mode. This allows the user to make changes to the row that will only affect the design in which it is being edited. If the sync logic is implemented, any changes made to the row in Edit Single Row Mode will be reflected in all assets where the row is present.
Users have the ability to convert any standard row into a synced row. To do this, they must first click on the “Save” icon on the row they wish to save. This will open the “Save Row” dialog, where users can enter a name for the saved row and select whether they want to save it as a synced row or a standard row.
onChange
When a Synced Row is dropped into a design, the onChange function should return the row’s type and UUID. This information is important because it allows the host application to create a relationship between the Synced Row and its replicas.
By creating this relationship, the host application can ensure that any changes made to the Synced Row will be automatically propagated to its replicas. For example, if the user updates the contact information in a Synced Row, the host application can automatically update that information in all designs that use that Synced Row.
Additional references
For additional information and advanced usage, reference the links provided below.