Page Summary
-
The manifest file (
manifest.json) provides essential information about your visualization package, including its name, description, resources, and components. -
Located at the top level of your component's folder, the manifest defines metadata such as the visualization's name, organization, logo, and support links.
-
It also specifies the locations of key resources like JavaScript, configuration, and CSS files for each component within the package.
-
Each visualization within the package is defined as a component with a unique ID, name, description, and resource locations in the manifest.
-
By structuring your manifest correctly, you ensure that your visualization package can be easily discovered, understood, and integrated into Looker Studio.
The manifest provides information about your visualization and identifies the
location of your visualization resources. It should be named manifest.json
and
located at the top level of the folder used as your Component ID
.
The following fields must be defined (unless indicated otherwise):
| Field name | Type | Description |
|---|---|---|
name
|
string
|
Name of the visualization package. |
organization
|
string
|
Name of the organization or developer. |
description
|
string
|
Description of the visualization package. |
logoUrl
|
string
|
A logo for the visualization package. |
packageUrl
|
string
|
A link users can follow to learn more about the package |
organizationUrl
|
string
|
( Optional) A link users can follow to learn more about the organization or developer. |
supportUrl
|
string
|
Link to the support page or email for supporting this visualization. |
privacyPolicyUrl
|
string
|
( Optional) Link to privacy policy. |
termsOfServiceUrl
|
string
|
( Optional) Link to terms of service. |
devMode
|
boolean
|
( Optional) If true, skips caching. This value defaults to false
. For more details, see about caching
. |
components
|
Array(object)
|
The visualizations that are included in the package. Currently only a single visualization is supported. |
components[].id
|
string
|
The ID of the component. This must be a non-empty string with no spaces. |
components[].name
|
string
|
The name of the visualization. |
components[].description
|
string
|
A description of the visualization. |
components[].iconUrl
|
string
|
An icon for the visualization. |
components[].infoUrl
|
string
|
( Optional) An link users can follow to learn more about the component. |
components[].resource
|
object
|
The visualization resources. |
components[].resource.js
|
string
|
The location of the visualization JavaScript file in Google Cloud Storage. E.g. gs://GCS_BUCKET_NAME/MY_VISUALIZATION.js
. |
components[].resource.config
|
string
|
The location of the visualization config file in Google Cloud Storage. E.g. gs://GCS_BUCKET_NAME/MY_CONFIG.json
. |
components[].resource.css
|
string
|
( Optional) The location of the visualization CSS file in Google Cloud Storage. E.g. gs://GCS_BUCKET_NAME/MY_CSS.css
. |
Example manifest.json
manifest file
{
"name"
:
"ABC Visualizations Package"
,
"organization"
:
"ABC Inc."
,
"description"
:
"A package of cool visualizations."
,
"logoUrl"
:
"https://url"
,
"organizationUrl"
:
"https://url"
,
"supportUrl"
:
"https://url"
,
"privacyPolicyUrl"
:
"https://url"
,
"termsOfServiceUrl"
:
"https://url"
,
"packageUrl"
:
"https://url"
,
"devMode"
:
false
,
"components"
:
[
{
"id"
:
"treemap"
,
"name"
:
"Treemap"
,
"description"
:
"Zoomable treemap with filter interactions"
,
"iconUrl"
:
"https://url.png"
,
"infoUrl"
:
"https://url"
,
"resource"
:
{
"js"
:
"gs://myViz-bucket-treemap/viz.js"
,
"config"
:
"gs://myViz-bucket-treemap/viz-config.json"
,
"css"
:
"gs://myViz-bucket-treemap/viz.css"
}
},
{
"id"
:
"histogram"
,
"name"
:
"Histogram"
,
"description"
:
"Histogram with filter interactions"
,
"iconUrl"
:
"https://url.png"
,
"resource"
:
{
"js"
:
"gs://myViz-bucket-histogram/viz.js"
,
"config"
:
"gs://myViz-bucket-histogram/viz-config.json"
,
"css"
:
"gs://myViz-bucket-histogram/viz.css"
}
}
]
}
