Search code examples
rshinyflexdashboard

In flexdashboard, can a valueBox be clicked to update a text box like an actionButton?

I am trying to utilize valueBox in flexdashboard to display a headline figure. However, I also want the valueBox to act like an actionButton, in that clicking the valueBox should trigger an action elsewhere in the dashboard.

In checking the flexdashboard documentation, I see the following relevant bit for valueBox:

Linked Value Box

valueBox(42, icon = "fa-pencil", href="#details")

wherein clicking the valueBox will navigate the user to a different page with an anchor of "#details." However, there is nothing to indicate that clicking the valueBox could be used for other actions.

Below is a minimal relevant flexdashboard code

---
title: "valueBox Links"
output: 
  flexdashboard::flex_dashboard:
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)

    ```

Tab 1 - Test
======================================================================

Column 
-------------------------------------

#### Three valueBoxes

### valueBox 1
```{r}
valueBox(1)
    ```

### valueBox 2
```{r}
valueBox(2)
    ```

### valueBox 3
```{r}
valueBox(3)
    ```

Column
-------------------------------------

### Text output
This is where I want some text to show up dynamically, depending on if the user has clicked valueBox 1, 2, or 3.

Any help would be appreciated :)

Solution

  • I tried different parameters for valueBox without any luck. In the end I managed to solve it by putting actionButtons in the captions of the valueBoxes, and then using custom styles to make them transparent and expand them so they cover the entire valueBox. It looks like this, where clicking each valueBox renders different text under "Text output":

    enter image description here

    I added color and icons to highlight that the valueBoxes can be styled normally. It only uses the flexdashboard library, and it's completely responsive. Here's the code:

    ---
title: "valueBox Links"
output: 
  flexdashboard::flex_dashboard:
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Tab 1 - Test
======================================================================

Column 
-------------------------------------

#### Three valueBoxes

### valueBox 1
```{r}
valueBox(1, caption = paste("I'm clickable!", actionButton("button1", " ", style = "background-color:rgba(39, 128, 227, 0.0); border-color:rgba(39, 128, 227, 0.0); position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; width:100%")), icon = "fa-thumbs-up", color = "success")
```

### valueBox 2
```{r}
valueBox(2, caption = paste("I'm clickable too!", actionButton("button2", " ", style = "background-color:rgba(39, 128, 227, 0.0); border-color:rgba(39, 128, 227, 0.0); position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; width:100%")), icon = "fa-tag", color = "warning")
```

### valueBox 3
```{r}
valueBox(3, caption = paste("ME TOO!", actionButton("button3", " ", style = "background-color:rgba(0, 0, 0, 0.0); border-color:rgba(0, 0, 0, 0.0); position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; width:100%")), icon = "fa-random", color = "danger")
```

Column
-------------------------------------

### Text output
```{r}
textOutput("textout")

rv <- reactiveValues(data = NULL)

observeEvent(input$button1, {
rv$data <- "There are two types of people in the world: 1) Those who can extrapolate from incomplete data."
})

observeEvent(input$button2, {
rv$data <- "If you live to be one hundred, you’ve got it made. Very few people die past that age."
})

observeEvent(input$button3, {
rv$data <- "A statistician’s wife had twins. He was delighted. He rang the minister who was also delighted. “Bring them to church on Sunday and we’ll baptize them,” said the minister. “No,” replied the statistician. “Baptize one. We’ll keep the other as a control."
})  

output$textout <- renderText({
  rv$data
})
```