Dashboards & Visualizations

Dashboard

silverKi
Path Finder

silverKi_0-1717562227032.png

I want to fill the table cells with tags. Like multi selector.. How can I make the table contents look like tags?
How to do it without using html elements?? 

Labels (3)
0 Karma

silverKi
Path Finder

Does anybidy konw when I clicked valueo in table cell How I render input btn?

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Do you mean something like this:

  <row>
    <panel depends="$stayhidden$">
      <html>
        <style>
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2)
          {
            display: flex !important;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell
          {
            padding-left: 4px;
            padding-right: 4px;
            margin-left: 4px;
            margin-right: 4px;
            border: 2px solid white !important;
            border-radius: 8px !important;
            color: white !important;
            box-shadow:
              inset 0 0 3px 0 rgba(0,0,0,.4),
              inset 0 0 3px 5px rgba(0,0,0,.05),
              inset 2px 3px 4px 0 rgba(255,255,255,.6),
              2px 2px 4px 0 rgba(0,0,0,.25) !important;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell:hover
          {
            box-shadow:
              inset 0 0 3px 0 rgba(0,0,0,.4),
              inset 0 0 3px 5px rgba(0,0,0,.05),
              inset 2px 3px 4px 0 rgba(255,255,255,.6),
              0 12px 16px 0 rgba(0,0,0,0.24),
              0 17px 50px 0 rgba(0,0,0,0.19) !important;
            transform: translateY(-1px) !important;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell:active
          {
            box-shadow:
              inset 0 0 3px 0 rgba(0,0,0,.4),
              inset 0 0 3px 5px rgba(0,0,0,.05),
              inset 2px 3px 4px 0 rgba(255,255,255,.6),
              0 8px 16px 0 rgba(0,0,0,0.24),
              0 13px 50px 0 rgba(0,0,0,0.19) !important;
            transform: translateY(2px) !important;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell
          {
            background-color: yellow !important;
            color: black !important;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell[data-mv-index="0"]
          {
            display: none !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="states">
        <title>States $state$</title>
        <search>
          <query>| makeresults count=10
| eval event=random() % 3 
| eval state=mvindex(split("ACTIVE,SLEEP,DEAD",","),random() % 3) 
| stats values(state) as state by event
| eval state=mvappend("extra",state)</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">row</option>
        <drilldown>
          <eval token="state">$click.value2$</eval>
        </drilldown>
      </table>
    </panel>
  </row>
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Your subject is very broad - how would anyone know what this was specifically about especially given that it is already in a Dashboards & Visualizations section!

Having said that, you then restrict your required solution to not include HTML - as @gcusello says, with these restrictions, it isn't possible (with current standard visualization options).

However, if you would be prepared to expand your outlook you could do something along these lines:

 

  <row>
    <panel depends="$stayhidden$">
      <html>
        <style>
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2)
          {
            display: flex !important;
          }
          div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell
          {
            border: 2px solid black !important;
            padding-left: 4px;
            padding-right: 4px;
            margin-left: 4px;
            margin-right: 4px;
            border-radius: 8px !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="states">
        <title>States</title>
        <search>
          <query>| makeresults count=10
| eval event=random() % 3 
| eval state=mvindex(split("ACTIVE,SLEEP,DEAD",","),random() % 3) 
| stats values(state) as state by event</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>

 

ITWhisperer_0-1717574403854.png

Note that this doesn't work if there is only one value in the multivalue field (however, with a bit of extra work, this can be gotten around by inserting an additional value to the field and then hiding this value.

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @silverKi ,

in my knowledge, it isn't possible!

Ciao.

Giuseppe

0 Karma
Get Updates on the Splunk Community!

Accelerating Observability as Code with the Splunk AI Assistant

We’ve seen in previous posts what Observability as Code (OaC) is and how it’s now essential for managing ...

Integrating Splunk Search API and Quarto to Create Reproducible Investigation ...

 Splunk is More Than Just the Web Console For Digital Forensics and Incident Response (DFIR) practitioners, ...

Congratulations to the 2025-2026 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...