Hi
I am referring below table for example, I want add CSS for both values in Office column in the table.
Name | Position | Office | Age |
Airi Satou | Accountant | Tokyo | 33 |
Angelica Ramos | Chief Executive Officer | London | 47 |
Ashton Cox | Junior Technical Author | San Francisco | 66 |
Bradley Greer | Software Engineer | London | 41 |
Brenden Wagner | Software Engineer | San Francisco | 28 |
Brielle Williamson | Integration Specialist | New York | 61 |
Bruno Nash | Software Engineer | London | 38 |
Caesar Vance | Pre-Sales Support | New York | 21 |
Cara Stevens | Sales Assistant | New York | 46 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
I want highlight both values Tokyo and San Francisco. I have added script it will work but problem is its will work one value only. It will highlight San Francisco only. I have add script as follows
require(
[
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
],
function (_, $, mvc, TableView) {
function cssLoad(tableName, field_name, field_val) {
var CustomLinkRender = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
return _([field_name]).contains(cell.field);
},
render: function ($td, cell) {
var cell_value = cell.value;
if (cell.field == field_name) {
if (cell_value == field_val.trim()) {
$td.css('color', '#1717E6');
$td.css('font-weight', 'bold');
$td.css('text-decoration', 'underline');
$td.css('text-decoration-color', 'blue');
}
}
$td.text(cell_value).addClass('string');
}
});
var selectedTable = mvc.Components.get(tableName);
if (typeof (selectedTable) != "undefined") {
selectedTable.getVisualization(function (tableView) {
tableView.addCellRenderer(new CustomLinkRender());
tableView.render();
});
}
}
//Single table Hardcode call
cssLoad('table1', 'Position', 'Software Engineer');
cssLoad('table1', 'Age', '66');
cssLoad('table1', 'Office', 'Tokyo');
cssLoad('table1', 'Office', 'New York')
});
Please Help me!. For highlight multiple values.
Can you use colorPalette map?
<format type="color" field="Office">
<colorPalette type="map">{"Tokyo":#1717E6,"San Francisco":#1717E6}</colorPalette>
</format>
No. I want add underline CSS also. If using color palette we cannot add underline.
Add a hidden panel with CSS
<panel depends="$stayhidden$">
<html>
<style>
#table1 table tbody td[data-cell-index="2"] div.multivalue-subcell[data-mv-index="1"]{
color: #1717E6 !important;
font-weight: bold !important;
text-decoration: underline !important;
text-decoration-color: blue !important;
}
</style>
</html>
</panel>
Then move the values you want highlighted to a multivalue field
| eval Office=if(Office="Tokyo" OR Office="San Francisco",mvappend("",Office),Office)
Thanks for reply @ITWhisperer . Is possible to achieve this via script only. Because it have condition check multiple values and multiple columns. function call back and args are passed by using csv file read and then pass. I have show only hardcode call it have dynamic args passing call.
I have no idea - can you not use the csv lookup to determine which values to move to the multivalue fields?
No. I don't want multivalued field. We can show only single value per cell.
OK you haven't understood my solution - there is still only one useful value in each cell, it is just that the one to be highlighted has been moved to the second mv and the first is now an empty string - the CSS highlighting only applies to the second mv
I understood your solution. But problem is in original table there was a link and table cell has a core relations to other tables. if click any where in table td it will show other table based on the cell click value. If I will go for your solution core relations table are not working. So that what I need solution via script. Any way thanks mate.