Retrieving the value of a repeating variable.

[psheehymn]

I have an HTML Graphics panel displaying several queried values in an HTML table. I am using a Custom variable named Journeys with a list of text/value pairs in the Repeat by variable to drive repeated copies of the panel vertically. The text is the description of the topic of that row and the value is a page from our portal that the queries return data for (the :text values have been sanitized for the attached illustrations).

When the Custom variable is set to an individual value, the values of ${Journeys:text} and ${Journeys:value} are as expected in both the HTML Graphics panel and a simple Text panel next to it that also repeats on the same variable:

When the Custom variable is set to All, the panel repeats correctly and the queries return the correct data for each value, but the value of ${Journeys:text} doesn't iterate; instead it shows as the literal set value, All, in every panel (the panel title displays the iterated value). In the Text panel, both the title and the text value in the table correctly iterate:

Is there a special way to code the Custom Properties or some other trick to get the iterating value of the text component of the variable instead of the literal selected value? I've attached the HTML, JavaScript and JSON for the Custom Properties for reference.

RepeatHTML.txt

RepeatJS.txt

RepeatCust.txt

[ZuperZee]

Instead of "${Journeys:text}" you could use "${Journeys:csv}"

Are also more variable formats https://grafana.com/docs/grafana/latest/dashboards/variables/variable-syntax/

[ZuperZee]

A simple example with csv.

panel-options

{
    "add100Percentage": true,
    "centerAlignContent": true,
    "overflow": "visible",
    "useGrafanaScrollbar": true,
    "SVGBaseFix": true,
    "codeData": "{\n  \"text\": \"Random text\"\n}",
    "rootCSS": "",
    "css": "* {\n  font-family: Open Sans;\n}\n",
    "html": "<div>\n</div>",
    "renderOnMount": true,
    "onRender": "const rootElt = htmlNode.querySelector(\"div\");\r\n\r\n// Clear html element\r\nrootElt.innerHTML = \"\";\r\n\r\nfunction createRow(text) {\r\n  const divElt = document.createElement(\"div\");\r\n  divElt.textContent = text;\r\n  rootElt.appendChild(divElt);\r\n}\r\n\r\nconst journeys = getTemplateSrv().replace(\"${Journeys:csv}\");\r\n\r\nfor (const journey of journeys.split(\",\")) {\r\n  createRow(journey);\r\n}",
    "dynamicHtmlGraphics": false,
    "dynamicData": false,
    "dynamicFieldDisplayValues": false,
    "dynamicProps": false,
    "panelupdateOnMount": true,
    "onInitOnResize": false,
    "onInit": ""
}

[psheehymn]

${Journeys:csv} returned a string containing all four of the values from the text : value pairs in Journeys. I am looking for a way to get back the text element of the pair for the current iteration of the repeat, like the Text panel (and the title of the HTML Graphics panel) shows.

[ZuperZee]

Ah. My bad, didn't notice you were using rows. I haven't really documented this anywhere, but you can use htmlGraphics.props.replaceVariables instead of getTemplateSrv().replace(). I will try to update the docs soon.

Entire JSON Model for the dashboard:

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "target": {
          "limit": 100,
          "matchAny": false,
          "tags": [],
          "type": "dashboard"
        },
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 16,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "collapsed": false,
      "gridPos": {
        "h": 1,
        "w": 24,
        "x": 0,
        "y": 0
      },
      "id": 4,
      "panels": [],
      "repeat": "Journey",
      "repeatDirection": "h",
      "title": "Journey ${Journey}",
      "type": "row"
    },
    {
      "datasource": {
        "type": "datasource",
        "uid": "grafana"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "thresholds"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 3,
        "w": 10,
        "x": 0,
        "y": 1
      },
      "id": 2,
      "options": {
        "SVGBaseFix": true,
        "add100Percentage": true,
        "calcsMutation": "standard",
        "centerAlignContent": true,
        "codeData": "{\n  \"text\": \"Random text\"\n}",
        "css": "* {\n  font-family: Open Sans;\n}\n",
        "dynamicData": false,
        "dynamicFieldDisplayValues": false,
        "dynamicHtmlGraphics": false,
        "dynamicProps": false,
        "html": "<div>\n</div>",
        "onInit": "",
        "onInitOnResize": false,
        "onRender": "const rootElt = htmlNode.querySelector(\"div\");\r\n\r\n// Clear html element\r\nrootElt.innerHTML = \"\";\r\n\r\nfunction createRow(text) {\r\n  const divElt = document.createElement(\"div\");\r\n  divElt.textContent = text;\r\n  rootElt.appendChild(divElt);\r\n}\r\n\r\nconst journeys = htmlGraphics.props.replaceVariables(\"${Journey}\");\r\n\r\nfor (const journey of journeys.split(\",\")) {\r\n  createRow(journey);\r\n}",
        "overflow": "visible",
        "panelupdateOnMount": true,
        "reduceOptions": {
          "calcs": [
            "lastNotNull",
            "last",
            "firstNotNull",
            "first",
            "min",
            "max",
            "mean",
            "sum",
            "count",
            "range",
            "delta",
            "step",
            "diff",
            "logmin",
            "allIsZero",
            "allIsNull",
            "diffperc"
          ]
        },
        "renderOnMount": true,
        "rootCSS": "",
        "useGrafanaScrollbar": true
      },
      "title": "HTMLGraphics - ${Journey}",
      "type": "gapit-htmlgraphics-panel"
    }
  ],
  "refresh": "",
  "revision": 1,
  "schemaVersion": 38,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": [
      {
        "current": {
          "selected": false,
          "text": [
            "Path1",
            "Path2",
            "Path3"
          ],
          "value": [
            "Path1",
            "Path2",
            "Path3"
          ]
        },
        "hide": 0,
        "includeAll": true,
        "multi": true,
        "name": "Journey",
        "options": [
          {
            "selected": false,
            "text": "All",
            "value": "$__all"
          },
          {
            "selected": true,
            "text": "Path1",
            "value": "Path1"
          },
          {
            "selected": true,
            "text": "Path2",
            "value": "Path2"
          },
          {
            "selected": true,
            "text": "Path3",
            "value": "Path3"
          },
          {
            "selected": false,
            "text": "Path4",
            "value": "Path4"
          }
        ],
        "query": "Path1,Path2,Path3,Path4",
        "queryValue": "",
        "skipUrlSync": false,
        "type": "custom"
      }
    ]
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "Repeating variables",
  "uid": "ZBwdOGs4k",
  "version": 9,
  "weekStart": ""
}

[cbellnuv]

I was trying to figure this out as well. I have a variable called "stacks", and I'm creating a repeating panel based on that variable (with the variable set to "all").

Inside of each repeating panel, I was able to get the value of the variable for that panel from here: htmlGraphics.data.request.scopedVars.stacks.value

[psheehymn]

Apologies @ZuperZee, I missed your additional response from April 27 until today. I just changed to use the htmlGraphics.props.replaceVariables() function to obtain the value and that works perfectly. Thank you!