Auto reload

By default, if a component property is changed in the page outline column, the component in the preview column is automatically reloaded to reflect the updated view.

There are circumstances when this can cause performance issues. For example, when a component initiates a connection to a remote service to download data. In such a case, turning off this functionality for the component has utility.

Component changes

To deactivate auto-reload, add the "autoReload": false key-value property to ui-metadata in the manifest.json file.

ui-metadata is an optional property that can be added to the component input properties on a manifest by a developer. The values specified for this property informs the interaction behavior of the component in the Page Builder interface for a content editor.

The default value for autoReload is true. If this property is not explicitly set (or is explicitly set to true), the component automatically reloads when a property changes.

autoReload is typically used to deactivate automatic reloading when reloading is causing an issue.

The ui-metadata property is set in manifest.json at the top level.

manifest.json file changes

A simple example:

"ui:metadata": {
    "autoReload": false
}

A more complete example:

{
    "$schema": "http://localhost:3000/schemas/v1.json#",
    "version": "1.0.0",
    "type": "edge",
    "name": "db-query",
    "displayName": "Database query",
    "description": "Pull data from the database",
    "namespace": "db-set",
    "ui:metadata": {
        "autoReload": false
 },
    "icon": {
        "id": "library_books",
        "color": {
            "type": "hex",
            "value": "#095c78"
 }
 }
}

Manually refreshing

When the component is configured not to reload automatically, the editor can cause a manual reload with the refresh Update preview icon.

visual page builder update preview

This can also be used whenever the preview does not show the expected updated content.