Preview configuration

Any component can have multiple named previews, and each of these previews can provide both sample data and an HTML wrapper to render the preview.

The developer configures the previews using JSON in the manifest.json file under the top-level previews field.

The example below shows two previews that use different input data and HTML wrappers.

"previews": {
  "preview-1": {           (1)
    "functionData": {      (2)
      "main": {            (3)
        "wrapper": {       (4)
          "path": "previews/preview-1.html"
        },
        "inputData": {
          "type": "inline",(5)
          "value": {
            "title": "Title text",
            "content": "Sample content."
          }
        }
      }
    }
  },
  "preview-2": {
    "functionData": {
      "main": {
        "wrapper": {
          "path": "previews/preview-2.html"
        },
        "inputData": {
          "type": "file", (6)
          "path": "previews/preview-2.data.json"
        }
      },
      "other": {
        "wrapper": {
          "path": "previews/preview-2-other.html"
        },
        "inputData": {
          "type": "file",
          "path": "previews/preview-2-other.data.json"
        }
      }
    }
  }
}

1	`preview-1` and `preview-2` are two separately named previews. This name is displayed in the Squiz Digital Experience Platform (DXP) Console tab and used as a URL variable when you test locally. You can have as many named previews within the `previews` object as you need.
2	The `functionData` field allows you to specify sample data and preview wrappers for your function endpoints. In most cases, the `main` function is the only function, as it is the default function used to render your component. As you can set up multiple functions for your component, you can mock those endpoints in your previews. Note that these additional function previews will not be visible in the DXP Console.
3	The name of the function being mocked for previewing must be used as a named field within the `functionData` field. It must be one of the functions from the `functions` array in the `manifest.json` file. The fields `main` and `other` above are the names of functions.
4	The `wrapper` field specifies an HTML file that will embed the HTML wrapper file used to render the component when you test it. This field must contain a path to an HTML file within your component directory. The `inputData` field can be configured to provide the data `inline`, or through a `file` as described in 6.
5	If the `type` field is `inline` a `value` field must be provided. This field must include fields that match the input data structure of your component, as shown in the `preview-1: main:` example above.
6	If the `inputData: type:` field is set to `file,` a `path` field must be provided, with a path to a JSON file within your component directory, as seen in the `preview-2 main` example above.

Sample `manifest.json` file

Expand to see a sample manifest.json file that uses inline and file input.

{
  "$schema": "http://domain-name/schemas/v1.json",
  "name": "preview-test",
  "version": "1.0.0",
  "mainFunction": "main",
  "displayName": "Preview test component",
  "namespace": "unit-test-components",
  "description": "This component is set up to test the preview code in the docs.",
  "functions": [
    {
      "name": "main",
      "entry": "main.cjs",
      "input": {
        "type": "object",
        "properties": {
          "title": {
            "type": "string"
          },
          "content": {
            "type":"string"
            }
          },
        "required": []
      },
      "output": {
        "responseType": "html"
      }
    }
  ],
  "previews": {
    "preview-1": {
      "functionData": {
        "main": {
          "wrapper": {
            "path": "preview/preview-1.html"
          },
          "inputData": {
            "type": "inline",
            "value": {
              "title": "Title text",
              "content": "Sample content preview-1."
            }
          }
        }
      }
    },
    "preview-2": {
      "functionData": {
        "main": {
          "wrapper": {
            "path": "preview/preview-2.html"
          },
          "inputData": {
            "type": "file",
            "path": "preview/preview-2.data.json"
          }
        }
      }
    }
  }
}