Partials

Modified on Wed, 13 Apr 2022 at 09:27 AM

This article is outdated, you can access the most current version here: https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/partials/Partials.html

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"

}

}

}

]