Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to select a specific tab in R Markdown?

I need to select a tab from a tabset in R Markdown document (with Shiny runtime).

I followed the example in How to select a specific tabPanel in Shiny, and tried to adapt it to R Markdown. I added ids to the tabset / tab, and used them in the updateTabsetPanel() call, but it doesn't seem to work. (I used the names that pop-up when inspecting the individual HTML elements in the resulting dashboard.)

How can I select the "Chart3" tab from the tabset by clicking the button?

EDIT: I need to be able to select a specific tab programmatically (e.g. via observeEvent() call), not just on start-up.

---
title: "Tabset Column"
output: flexdashboard::flex_dashboard
runtime: shiny
---
    
Column 
-------------------------------------
    
### Chart 1
    
```{r}
actionButton("switch_tab", "Switch tab", width=200)
```
   
Column {#mytabset .tabset}
-------------------------------------
   
### Chart 2

```{r}
```   
 
### Chart 3 {#mytab}
    
```{r}
observeEvent(input$switch_tab, {
    updateTabsetPanel(session, inputId = "section-mytabset", selected = "#section-mytab")
})
```
like image 266
landroni Avatar asked Feb 17 '21 20:02

landroni


People also ask

How do I use tabs in RMarkdown?

Syntax in Rmarkdown To implement the tabbed section in an Rmarkdown document like the example above, all you have to do is putting {. tabset} on the right of a header. Then all the content below each sub-header will appear within a tab.

What does .tabset do in R?

One natural way of organizing parallel sections in an HTML report is to use tabsets. This allows readers to view the content of different sections by clicking the tab titles instead of scrolling back and forth on the page.

What does Tabset fade do?

tabset-fade} . The tabs within that group are created by level 3 headers ( ### ). To close down the tabbed section, it is necessary to introduce a new level 1 or 2 header. Please note it is VERY IMPORTANT to include a blank line before a new tabbed section begins.

How do you indent in R markdown?

Text can be indented two ways depending on if the indent is within a list or not. Within a list, four spaces at the begin of the line indicates the text is to be indented one nesting level. Use four additional spaces for each additional nesting level. To indent text which is not in a list, use a block quote.


2 Answers

The {.active} attribute could answer your question when launching the dashboard (static solution), and works with html_document :

---
title: "Active Tabset"
output: html_document
---
    

Column {.tabset}
-------------------------------------
   
### Tab 1

Some text
 
### Tab 2 {.active}

Some other text

enter image description here

Unfortunately, this didn't work with Flexdashboard :

---
title: "Active Tabset"
output: flexdashboard::flex_dashboard
---
    

Column {.tabset}
-------------------------------------
   
### Tab 1

Some text
 
### Tab 2 {.active}

Some other text

enter image description here

The issue has already been signaled here but was closed because of automatic lock.
The waiting period in order to comply with RMarkdown issue guide being over, I filed a new issue with the Minimal Reproducible Example above.

EDIT : This request has been taken into account, so this should soon work with Shiny Dashboard.

like image 181
Waldi Avatar answered Sep 23 '22 11:09

Waldi


Instead of an observeEvent you could wrap the actionButton itself in an tags$a and link to #section-mytab. Note that you have to add section- before the tab name when using runtime: shiny.

Does this solve your problem or do you need it to work with observeEvent?

---
title: "Tabset Column"
output: flexdashboard::flex_dashboard
runtime: shiny
---

Column 
-------------------------------------
  
### Chart 1
  
```{r, echo = FALSE}
tags$a(href = "#section-mytab",
  shiny::actionButton("btn1", "go to mytab")
       )
```

Column {.tabset}
-------------------------------------
    
### Chart 2

```{r}

```   
  
### Chart 3 {#mytab}
  
```{r}

```

If needed, the logic above can be combined with observeEvent using {shinyjs} and a non-visible actionButton. The trick is here, that we still use an actionButton to trigger the tab. But the actual button is not shown display: none (it is important, that the button is not set to hidden, since this will prevent it from being clicked). We then create another actionButton which is observed by an observeEvent. This can trigger other calculations etc. and finally a click on the actionButton which is not shown. If you have more pages and want to jump from page 1 to, say, tab 3 on page 2, then we would need two clicks: one changing the page and one activating the tab. But we can all trigger this inside the observeEvent. Its hacky and doesn't look like good code, but on the plus side it works, even without a custom javascript function.

---
title: "Tabset Column"
output: 
flexdashboard::flex_dashboard
runtime: shiny
---

```{r global, echo = FALSE}
library(shiny)
library(shinyjs)
useShinyjs(rmd = TRUE)
```


Column 
-------------------------------------
  
### Chart 1

```{r, echo = FALSE}
observeEvent(input$btn1, {
  # do some calculations here
  click("btn2")})
 
shiny::actionButton("btn1", "do something")

tags$a(href = "#section-mytab",
  # set this button to `display: none;` but *not* to `hidden`
  shiny::actionButton("btn2", "go to mytab", style = "display: none")
  )
```

Column {.tabset}
-------------------------------------

### Chart 2

```{r}

```   
  
### Chart 3 {#mytab}
  
```{r}

```
like image 21
TimTeaFan Avatar answered Sep 22 '22 11:09

TimTeaFan