cicerone
cicerone copied to clipboard
Published
20 hours ago •
JohnCoene
JohnCoene
show the search button inside a DT table as part of a guide
Hi John,
A couple of issues.
-
I want to show the search button inside a DT table as part of a guide. It doesn't show at the moment. I've checked the id and its not wrong. The guide just goes past this step!
-
The guide doesn't launch on startup so I've had to use an
actionButtonfor triggering it.
Here is the app:
library(shiny)
library(DT)
library(cicerone)
ui <- fluidPage(
use_cicerone(), # include dependencies
br(),
br(),
actionButton("guide", "Guide"),
DTOutput('tbl'),
)
server <- function(input, output){
# initialise the guide
guide$init()
observeEvent(input$guide, {
guide$start()
})
output$tbl = renderDT(
iris, options = list(lengthChange = FALSE)
)
}
shinyApp(ui, server)
guide <- Cicerone$
new()$
step(
el = "tbl",
title = "DT table",
description = "This is a DT table"
)$
step(
"DataTables_Table_0_filter",
"Search",
"This is search"
)
I understand that it's part of the data-table itself, but that doesn't mean it's not reachable. Since it has an unique id, I think there should be a way to use it as a step in cicerone. Will leave it to @JohnCoene to solve the issue.
Thanks.
Yes indeed, it should be "selectable" but for some reason driver.js refuses to.
// works
document.querySelector('#tbl input')
I'm not sure why. I'll see if I can come up with a solution.
Small follow-up on that, here's a raw example that shows that driver.js can select the "Search" area. So I think the problem is on the R side, not driver.js:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap.min.css"/>
<!-- Files for driver.js -->
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
</head>
<body>
<button id="btn">launch driver.js</button>
<div id="tbl" class="datatables html-widget html-widget-output shiny-bound-output" style="width:100%; height:auto; " aria-live="polite">
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer"><div id="DataTables_Table_0_filter" class="dataTables_filter"><label>Search:<input type="search" class="" placeholder="" aria-controls="DataTables_Table_0"></label></div><div id="DataTables_Table_0_processing" class="dataTables_processing" style="display: none;">Processing...</div><table class="display dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
<thead>
<tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" aria-label=" "> </th><th class="dt-right sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Sepal.Length: activate to sort column ascending">Sepal.Length</th><th class="dt-right sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Sepal.Width: activate to sort column ascending">Sepal.Width</th><th class="dt-right sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Petal.Length: activate to sort column ascending">Petal.Length</th><th class="dt-right sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Petal.Width: activate to sort column ascending">Petal.Width</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Species: activate to sort column ascending">Species</th></tr>
</thead>
<tbody><tr role="row" class="odd"><td>1</td><td class=" dt-right">5.1</td><td class=" dt-right">3.5</td><td class=" dt-right">1.4</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="even"><td>2</td><td class=" dt-right">4.9</td><td class=" dt-right">3</td><td class=" dt-right">1.4</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="odd"><td>3</td><td class=" dt-right">4.7</td><td class=" dt-right">3.2</td><td class=" dt-right">1.3</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="even"><td>4</td><td class=" dt-right">4.6</td><td class=" dt-right">3.1</td><td class=" dt-right">1.5</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="odd"><td>5</td><td class=" dt-right">5</td><td class=" dt-right">3.6</td><td class=" dt-right">1.4</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="even"><td>6</td><td class=" dt-right">5.4</td><td class=" dt-right">3.9</td><td class=" dt-right">1.7</td><td class=" dt-right">0.4</td><td>setosa</td></tr><tr role="row" class="odd"><td>7</td><td class=" dt-right">4.6</td><td class=" dt-right">3.4</td><td class=" dt-right">1.4</td><td class=" dt-right">0.3</td><td>setosa</td></tr><tr role="row" class="even"><td>8</td><td class=" dt-right">5</td><td class=" dt-right">3.4</td><td class=" dt-right">1.5</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="odd"><td>9</td><td class=" dt-right">4.4</td><td class=" dt-right">2.9</td><td class=" dt-right">1.4</td><td class=" dt-right">0.2</td><td>setosa</td></tr><tr role="row" class="even"><td>10</td><td class=" dt-right">4.9</td><td class=" dt-right">3.1</td><td class=" dt-right">1.5</td><td class=" dt-right">0.1</td><td>setosa</td></tr></tbody></table><div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 10 of 150 entries</div><div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate"><a class="paginate_button previous disabled" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="-1" id="DataTables_Table_0_previous">Previous</a><span><a class="paginate_button current" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0">2</a><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0">3</a><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="4" tabindex="0">4</a><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="5" tabindex="0">5</a><span class="ellipsis">…</span><a class="paginate_button " aria-controls="DataTables_Table_0" data-dt-idx="6" tabindex="0">15</a></span><a class="paginate_button next" aria-controls="DataTables_Table_0" data-dt-idx="7" tabindex="0" id="DataTables_Table_0_next">Next</a></div></div>
</div>
<script>
const driver = new Driver();
driver.defineSteps([
{
element: '#tbl',
popover: {
title: 'Test 1',
position: 'bottom'
}
},
{
element: '#DataTables_Table_0_filter',
popover: {
title: 'Test 2',
position: 'bottom'
}
}
]);
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(){
event.stopPropagation()
driver.start();
});
</script>
</body>
</html>
