Create Links from Variables

Apps (Frontend) Apps Builder
1

Is there a good example how to create a link to e.g. a resource via variables and HTML elements?

2

Do you @andreas.boehm mean “go to e.g. a workflow of id x on click and then in an new tab this resources gets opened at the corresponding side”?

3

Maybe this can be an inspiration: The html uses data from a table and those might be links embeded in a tags. Here I prepared for 5. So this is hard coded.
image

{
  "id": "htm_ana_com_ele",
  "type": "html",
  "source": "analyst_comments",
  "styles": {
    "backgroundColor": "#f0f1f2"
  },
  "sourceOptions": {
    "sort": [
      {
        "name": "timestamp",
        "order": "asc"
      }
    ]
  },
  "dataFetching": {
    "dataUpdates": {
      "prompt": {
        "enabled": true
      },
      "throttling": {
        "enabled": true,
        "time": 5,
        "throttlePrompt": true
      }
    }
  },
  "config": {
    "values": [
      {
        "origin": "data",
        "column": "comment",
        "row": 0,
        "name": "one_comment"
      },
      {
        "origin": "data",
        "column": "username",
        "row": 0,
        "name": "one_user"
      },
      {
        "origin": "data",
        "column": "show_timestamp",
        "row": 0,
        "name": "one_time"
      },
      {
        "origin": "data",
        "column": "comment",
        "row": 1,
        "name": "two_comment"
      },
      {
        "origin": "data",
        "column": "username",
        "row": 1,
        "name": "two_user"
      },
      {
        "origin": "data",
        "column": "show_timestamp",
        "row": 1,
        "name": "two_time"
      },
      {
        "origin": "data",
        "column": "comment",
        "row": 2,
        "name": "three_comment"
      },
      {
        "origin": "data",
        "column": "username",
        "row": 2,
        "name": "three_user"
      },
      {
        "origin": "data",
        "column": "show_timestamp",
        "row": 2,
        "name": "three_time"
      },
      {
        "origin": "data",
        "column": "comment",
        "row": 3,
        "name": "four_comment"
      },
      {
        "origin": "data",
        "column": "username",
        "row": 3,
        "name": "four_user"
      },
      {
        "origin": "data",
        "column": "show_timestamp",
        "row": 3,
        "name": "four_time"
      },
      {
        "origin": "data",
        "column": "comment",
        "row": 4,
        "name": "five_comment"
      },
      {
        "origin": "data",
        "column": "username",
        "row": 4,
        "name": "five_user"
      },
      {
        "origin": "data",
        "column": "show_timestamp",
        "row": 4,
        "name": "five_time"
      }
    ],
    "html": "<h4><b>Last 5 recommendations</h4></br><hr><div style='font-weight: normal; font-style: normal; margin-top: 25px;''> <div style='margin-bottom: 25px; '> <div>{{one_comment}}</div><div style='float: right; font-style: italic;'>{{one_user}}&nbsp;{{one_time}}</div></div><br><div style='margin-bottom: 25px;'> <div>{{two_comment}}</div><div style='float: right; font-style: italic;'>{{two_user}}&nbsp;{{two_time}}</div></div><br><div style='margin-bottom: 25px;'> <div>{{three_comment}}</div><div style='float: right; font-style: italic;'>{{three_user}}&nbsp;{{three_time}}</div></div><br><div style='margin-bottom: 25px;'> <div>{{four_comment}}</div><div style='float: right; font-style: italic;'>{{four_user}}&nbsp;{{four_time}}</div></div><br><div style='margin-bottom: 25px;'> <div>{{five_comment}}</div><div style='float: right; font-style: italic;'>{{five_user}}&nbsp;{{five_time}}</div></div></div>"
  },
  "syncSets": []
}