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

Question

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 :)

This question might be helpful: https://stackoverflow.com/questions/34413137/use-href-infobox-as-actionbutton — Joris C., Jun 27 '19 at 16:21
It is a good lead, but unfortunately it works with shinyDashboard. Unable to replicate it on flexDashboard. — Naj S, Jun 28 '19 at 13:14
What about making actionButtons that look like the valueBoxes? — SeGa, Jul 03 '19 at 15:32
I like that valueBoxes background colour and icon can be variable depending on the input value. Any way to replicate that with actionButtons? — Naj S, Jul 03 '19 at 19:40
Since its not a full answer, I made a small gist to show how to alter actionButtons in a shinyApp. [Gist example](https://gist.github.com/trafficonese/e0c695d617f412ff31ead9688ba6b80a) — SeGa, Jul 04 '19 at 12:17

score 12 · Accepted Answer · 2019-07-07T13:02:49.137

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":

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
})
```

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

Linked Value Box

1 Answers1

Linked