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"
        }
      }
    }
  ]