As below ma solution : I passed my requests (result of search_1, search_2, search_3 ) from my xml in the javascript : js : product.on('search:done', function(properties) { var product1 = product.data("results",{ count: 0 }); product1.on("data", function() { var var_products = product1.data().rows; Object.keys(var_products.map(var_product => { switch (var_product[0]) { case "1" : document.getElementById("product_1").innerText=var_availability1[1]; break; case "2" : document.getElementById("product_2").innerText=var_availability1[1]; break; case "3" : document.getElementById("product_3").innerText=var_availability1[1]; break; } })); }); }); XML : <div class="flex_col"> <p>search</p> <div class="les_sites"> <div class="numberCircle flex_col" > <div id="numberCircle_1"> <p id="product_1">$search_1$</p> <div> </div> <div class="numberCircle flex_col" > <div id="numberCircle_2"> <p id="product_2">$search_2$ </div> </div> <div class="numberCircle flex_col" > <div id="numberCircle_3"> <p id="product_3">$search_3$</p> </div> </div> </div> </div> The problem comes from the fact that there was a conflict between my xml and my javascript. If you have the same kind of problem you should either pass everything in XML or pass everything in javascript. ... View more

I thank you for you reply @kamlesh_vaghela . Finally, I passed all of my requests in javascript. This solved my problem. ... View more

Sorry, below my code : Javascript : > require([ > 'underscore', > 'jquery', > 'splunkjs/mvc', > 'splunkjs/mvc/searchmanager', > 'splunkjs/mvc/simplexml/ready!' > ], function(_, $, mvc, SearchManager) { > var defaultTokenModelun = mvc.Components.getInstance('default', > {create: true}); > var submittedTokenModelun = mvc.Components.getInstance('submitted', > {create: true}); > function setToken(name, value) { > var defaultTokenModel = mvc.Components.get('default'); > if (defaultTokenModel) { > defaultTokenModel.set(name, value); > } > var submittedTokenModel = mvc.Components.get('submitted'); > if (submittedTokenModel) { > submittedTokenModel.set(name, value); > } > } > var dispo = new SearchManager({ > "id": "dispo", > "preview": "false", > "latest_time": "$time.latest$", > "earliest_time": "$time.earliest$", > "cache": "false", > "search": "index=myindex sourcetype=mysourcetype |eval dispo=case(Somme ==0 , " + '"' + > YELLOWGREEN + '"' + ", Somme > 0 , " + '"' + RED + '"' + ")|table Product, dispo" > }, {tokens: true}); > dispo.on('search:done', function(properties) { > var Availability = dispo.data("results",{ count: 0 > }); > Availability.on("data", function() { > var disponibilite = Availability.data().rows; > Object.keys(disponibilite.map(mysearch > => { > > switch (mysearch[0]) { > case "1" : > document.getElementById("numberCircle_1").style.backgroundColor=mysearch[1]; > break; > case "2" : > document.getElementById("numberCircle_2").style.backgroundColor=mysearch[1]; > break; > case "3" : > document.getElementById("numberCircle_3").style.backgroundColor=mysearch[1]; > break; > } > })); > }); > }); > }); XML : <div class="flex_col"> <p>search</p> <div class="les_sites"> <div class="numberCircle flex_col" > <div id="numberCircle_1"> <p>$search_1$</p> <div> </div> <div class="numberCircle flex_col" > <div id="numberCircle_2"> <p>$search_2$ </div> </div> <div class="numberCircle flex_col" > <div id="numberCircle_3"> <p>$search_3$</p> </div> </div> </div> </div> ... View more

Hi @niketn, No, I don't have searchWhenChanged for the date filter, I don't know why I have not a problem with the date. I tried with searchWhenChanged but without success. I want my pop-up to appear when I click on a token (which displays the result of the request) when I modify the filter on the product or the date, this token is updated and the pop-up must also be updated. Below ma javascript and my XML : XML : WAN dashboard_Last_Version <search id="pop_demo"> <query>index="myindex" sourcetype="mysourcetype" | lookup Product_type.csv Product OUTPUT "Product siglum" | search "Product siglum"=$Product$ | eval Target_Rate=case(Site_Type == "Z" ,"40%", Site_Type == "X" ,"60%", Site_Type == "W" ,"20%") | eval demo_status=case(demo < Target_Rate, "RED", Availibility_round > Target_Rate, "GREEN") | table Product, demo_status <earliest>$time.earliest$</earliest> <latest>$time.latest$</latest> </search> <query> index="myindex" sourcetype="mysourcetype" |stats counts(incidents) as product $result.product$ <input type="time" token="time"> <label>Time range</label> <default> <earliest>-2mon@mon</earliest> <latest>now</latest> </default> </input> <input type="dropdown" token="Product" > <label>Product</label> <default>*</default> <choice value="*">All</choice> <initialValue>*</initialValue> <search> <query>| inputlookup Product_type.csv | rename "Product siglum" as Product | dedup Product | table Product -24h@h now Product Product <panel> <!-- MODAL FOR MACHIN start__________________________________________________________________________________________________________ --> <!-- MODAL FOR MACHIN end__________________________________________________________________________________________________________ --> <html> <body> <div class="flex_col"> <p>Demo</p> <div class="numberCircle flex_col"> <div id="numberCircle_Global_Avai" data-toggle="modal" data-target="#Availability_Global"> <p>$global$%</p> </div> </div> </div> </body> </html> <html> <div class="modal fade" id="InterModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Demo</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&amp;times;</span> </button> </div> <div class="modal-body"> <div id="Global_Tableview"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </html> </panel> Javascript : require([ 'jquery', 'underscore', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'bootstrap.tab', 'splunkjs/mvc/simplexml/ready!' ], function($, _, mvc, TableView){ var defaultTokenModelun = mvc.Components.getInstance('default', {create: true}); var submittedTokenModelun = mvc.Components.getInstance('submitted', {create: true}); function setToken(name, value) { var defaultTokenModel = mvc.Components.get('default'); if (defaultTokenModel) { defaultTokenModel.set(name, value); } var submittedTokenModel = mvc.Components.get('submitted'); if (submittedTokenModel) { submittedTokenModel.set(name, value); } } var pop_demo = new TableView({ managerid: 'pop_demo', count: 10, el: $('#Global_Tableview') }, {tokens: true}).render(); var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field return _(['demo_status']).contains(cell.field); }, render: function($td, cell) { // Add a class to the cell based on the returned value //console.log(cell); var value = cell.value; // Apply interpretation for number of historical searches if (cell.field === 'demo_status') { if (value == 'RED') { //console.log("Test5"); $td.addClass('range-cell').addClass('range-elevated'); } else if (value == 'GREEN') { $td.addClass('range-cell').addClass('range-low'); } } } }); var myCellRenderer = new CustomRangeRenderer(); // Add the custom cell renderer to the table pop_demo.addCellRenderer(myCellRenderer); // Render the table pop_demo.render(); Thanks you, ... View more