HTML Table Checkbox and Textbox Using Dynamic Text / Business Text Panel

Grafana
, ,
1

Hi,

Using the Dynamic Text / Business Text Panel, I am trying to create a custom HTML table with a checkbox and textbox but these does not seem to render in the visualisation (see photo below).

image
image1101Ă—275 21.8 KB

Is it a possibility in this plugin?

Would this require JavaScript Handlebars, Helpers, or event handlers?

Below is the HTML code:

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
        <th>Select</th>
        <th>Text</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="red">John Doe</td>
        <td class="blue">28</td>
        <td class="green">New York</td>
        <td><input type="checkbox" id="checkbox-1" name="checkbox-1"></td>
        <td><input type="text" id="input-1" name="input-1"></td>
      </tr>
      <tr>
        <td class="blue">Jane Smith</td>
        <td class="green">34</td>
        <td class="red">Los Angeles</td>
        <td><input type="checkbox" id="checkbox-2" name="checkbox-2"></td>
        <td><input type="text" id="input-1" name="input-2"></td>
      </tr>
      <tr>
        <td class="green">Alice Johnson</td>
        <td class="red">23</td>
        <td class="blue">Chicago</td>
        <td><input type="checkbox" id="checkbox-3" name="checkbox-3"></td>
        <td><input type="text" id="input-1" name="input-3"></td>
      </tr>
    </tbody>
  </table>
</div>

I am hoping for something similar with the visual interaction using the Annotation feature.

Hope someone can help.

Thanks

2

@mikhailvolkov

1 Like
3

@carlocea9 Active elements are sanitized following Security guidelines. You need to disable it following documentation:

1 Like
4

Hi @mikhailvolkov, how are you?
related to the topic of this post, is there a way to set a variable value (for example, a boolean one), with a checkbox of a table?
For example, suppose that I want to set the value of VTcheck Grafana’s Dashboard variable to true if the checkbox of this table is marked (by default is going to be false):

image
image1852Ă—184 8.37 KB

Is that possible with this plugin?

Thanks in advance for your help.

1 Like
5

@alejandroguida It’s possible using the locationService: JavaScript Code | Volkov Labs

6

Thanks @mikhailvolkov , do you have a small example on how to do that?

Because with the provided link, I think I understand how to set the VTcheck Grafana’s variable using locationService, but I don’t understand how to “read” the state of the Checkbox on the Dashboard’s table, if it is checked or no.

Thanks again for you help.

7

@alejandroguida You can find onchange example on stackoverflow: Javascript checkbox onChange - Stack Overflow

1 Like
8

Perfect, thanks @mikhailvolkov

1 Like
9

Hi,
I’m new to Grafana and business text plugin, I need to show my json data coming from infinity datasource in table form with some status change button in the table, i’m stuck in embedding my json data into hard code of html to create table

is it possible in business text plugin with the handlebars, helpers ? Pls suggest

image
image1366Ă—768 127 KB

10

what would the button do?

11

That will be status change button like acknowledged, resolved to update the status

12

@dhaarini As alternative to Business Text (Dynamic Text) panel you can check the Business Table panel, which we introduced recently. The latest version 1.3.0 allows to edit column data.

You can update status using listbox and it has also permissions management. We will publish blog post with details later this week.

2 Likes
13

Thanks, let me explore and check the possibilities