Help Center

Menu

Preview input data files

In the inputData field of a preview in your manifest.json file, you can specify whether to use inline input data or external files. Read Preview configuration for more information about the inputData field format.

If you use an input data file for your preview, put the format you would use in the value field in your manifest.json file in an external JSON file.

For example, in preview-1 example below, data input is inline, with the values defined in the value field of the inputData field.

preview-1 example
"previews": {
  "preview-1": {
    "functionData": {
      "main": {
        "wrapper": {
          "path": "previews/preview-1.html"
        },
        "inputData": {
          "type": "inline",
          "value": {
            "title": "Title text",
            "content": "Sample content."
          }
        }
      }
    }
  },

In contrast, preview-2 example specifies a type of file, and a path to a JSON file.

preview-2 example
  "preview-2": {
    "functionData": {
      "main": {
        "wrapper": {
          "path": "previews/preview-2.html"
        },
        "inputData": {
          "type": "file",
          "path": "previews/preview-2.data.json"
        }
      },
    }
  }

The contents of preview-2.data.json specified in preview-2 example look like this:

{
"title": "Title text",
"content": "Sample content."
}

It is the same input as in preview-1 example above, just in a separate file.

How to set up your input file

To set up an input file:

  1. In your manifest.json preview definition, configure the inputData field to have type of file and path of previews/preview.data.json.

  2. Create a previews directory in the directory you are using to build your component.

  3. In the previews directory, create a file preview.data.json

  4. Add the following code to the preview.data.json file:

    {
"title": "Title from preview file",
"content": "Sample content."
}

  5. Test your component in the local development server. You will see the title Title from preview file.

Read Test using the local development server to find out how to test your component in the local development server.