How to use an URL in flex-table-card?

Configuration Frontend
1

I use custom: flex-table-card to show the next three train connections:
connections

columns:
  - data: connection
    name: Rgdf
  - align: center
    data: plan_departure
    name: ab
[.....]
css:
  thead th: 'background-color: #ddd; color: rgb(68,115,158)'
entities:
  include: sensor.db1*
type: 'custom:flex-table-card'

In addition to the connection information, my entity also has an attribute (travel_note_link) with a URL for the connection details.

[....]
connection: Friedr
plan_arrival: '22:10'
travel_note_link: >-
  https://reiseauskunft.bahn.de/bin/query.exe/dox?ld=4310&protocol=https:&n=1&i=60.01381210.1614024866&rt=1&use_realtime_filter=1&co=C0-0&vca&HWAI=CONNECTION$C0-0!detailsVerbund=opened!verbund=VBB&outConId=C0-0&tplVarsDBStyle=yes&
plan_departure: '21:16'

Can I use this URL in the first column of the flex-table-card as a link to open the connection details in a popup? How?

2

do you managed to find a solution for this?

3

How to insert a hyperlink:

Assume there is a sensor with an attribute which is an URL.
In my example it is a sensor “Travel time to XXXXX” with a “mapurl” attribute which leads to a route on a map.

Here we have a “Route” label for URL:
image

  type: custom:flex-table-card
  ...
  columns:
    - name: object
      data: state
    - name: object
      data: mapurl
      modify: >-
        '<a href="' + x + '">Route</a>'

If you are interested to see a real URL instead of the “Route” label:

image
image919Ă—188 7.23 KB 

    - name: object
      data: mapurl
      modify: >-
        '<a href="' + x + '">' + x + '</a>'

Note that a long string comes beyond the card.

2 Likes
4

Absolutelly amazing!

I didnt know the capabillity to use HTML code on flex table, very nice!
Thank you!

image

1 Like
5

Turns out this is working:

  - name: Ticker
    data: symbol
    modify: >-
      '<a href=https://finance.yahoo.com/quote/' + x + ' target="_blank">' + x +
      '</a>'

image

The ticker is displayed and is an working URL.

If you want to display a column value having an URL that uses another column value in the ULR do this:

  - name: Ticker
    data: symbol
    modify: >-
      '<a href=https://finance.yahoo.com/quote/' + x + ' target="_blank">' + x +
      '</a>'
  - name: Ticker2
    data: symbol,regularMarketChangePercent
    multi_delimiter: ','
    modify: >-
      '<a href=https://finance.yahoo.com/quote/' + x.split(",")[0] + '
      target="_blank">' + x.split(",").pop() + '</a>'

image

Column Ticker and Ticker2 have the same URL.

1 Like
6

Is there a way to make the title clickable?

7

The latest update makes a header clickable to manage sorting.

8

But not for arbitrary links?

9

Elaborate what do you mean.
If a web link is inside a cell - clicking it opens a link.
I meant a clicking on a header in my post.
What do you mean by a “title” then?

10

I mean the title of the card, not the table contents.

11

1.This question is not related to the thread issue. Suggest to ask similar questions in a common dedicated flex-table-card thread.

2.In short: the flex-table-card does not support a “tap_action” for a title. A possible workaround:

  • create a vertical stack using a stack-in-card: upper - custom:button-card or a conventional button-card, lower - your flex-table-card;
  • style the upper card (card-mod or native custom:button-card ways) to mimic a card’s title.
12

OK, thanks for the info.