show the search button inside a DT table as part of a guide

shahreyar-abeer commented 3 years ago

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 actionButton for 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"
  )

shahreyar-abeer commented 3 years ago

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.

JohnCoene commented 3 years ago

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.

etiennebacher commented 3 years ago

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>

JohnCoene / cicerone

show the search button inside a DT table as part of a guide #28