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!

Index This | When is October more than just the tenth month?

October 2025 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Observe and Secure All Apps with Splunk

  Join Us for Our Next Tech Talk: Observe and Secure All Apps with SplunkAs organizations continue to innovate ...

What’s New & Next in Splunk SOAR

 Security teams today are dealing with more alerts, more tools, and more pressure than ever.  Join us for an ...