Partials can be used to define something like a configuration or styles of an element etc. and reuse it at other parts of the app configuration.
| Property | Type | Description | Example Value |
| partials.id | string | Used to set the unique id of the partial | "id": "HtmlPartial" |
| partials.partial | any | Used to define the partial → type aware | "partial": { "html": "<h1>Hello World!</h1>" } |
Now you can reuse the partial in your html element like that:
{
"id": "welcomeTitle",
"type": "html",
"config": {
"html": "<h1>Title</h1>"
},
"@config": {
"partial": "dummyHtmlPartial"
}
}
You can also add an "override" property to change the partial directly in your element configuration. The following code will override the html partial.
Full example without "screens" , "layouts" and "datasources":
"partials": [
{
"id": "dummyHtmlPartial",
"partial": {
"html": "<h1>Hello World!</h1>"
}
},
{
"id": "dummyChartSeriesPartial",
"partial": [
{
"name": "Tokyo",
"turboThreshold": 0
},
{
"name": "New York",
"turboThreshold": 0
},
{
"name": "Berlin",
"turboThreshold": 0
},
{
"name": "London",
"turboThreshold": 0
}
]
},
{
"id": "stylesPartial",
"partial": {
"chartColors": [
"red",
"black"
],
"chart": {
"title": {
"fontSize": "24px",
"fontFamily": "Helvetica",
"color": "red"
},
"subTitle": {
"fontSize": "24px",
"fontFamily": "Helvetica",
"color": "green"
}
}
}
}
],
"elements": [
{
"id": "welcomeTitle",
"type": "html",
"config": {
"html": "<h1>Title</h1>"
},
"@config": {
"partial": "dummyHtmlPartial",
"override": {
"html": "<h1>Override Title</h1>"
}
}
},
{
"id": "chartVis",
"type": "highcharts",
"source": "raw_testSource",
"@styles": {
"partial": "stylesPartial"
},
"config": {
"@title": {
"partial": "dummyTitlePartial"
},
"subtitle": {
"text": "My Untitled Chart"
},
"exporting": {},
"chart": {
"type": "area",
"polar": false
},
"@series": {
"partial": "dummyChartSeriesPartial"
}
}
}
]