rshinyshiny-reactivity

How do I close an f7Popup in R Shiny with a button click?


I have a popup window that opens as the app first runs. I don't like the small x in the corner of the popup window and want to instead have a larger "Continue" button on the bottom of the popup window. However, I cannot get the window to close upon clicking the button. See the code below:

library(shiny)
library(shinyWidgets)
library(shinyMobile)
library(tidyverse)
library(shinyalert)
library(googleLanguageR)
library(mongolite)

ui <- f7Page(
  title = "Home Page",
  allowPWA = TRUE,
  options = list(
    theme = 'md',
    dark = FALSE,
    filled = TRUE,
    pullToRefresh = FALSE,
    color = '#005C5C'
  ),
  f7TabLayout(
    navbar = '',
    f7Tabs(
      animated = TRUE,
      id = 'main_tab_layout',
      f7Tab(
        tabName = 'Main',
        title = 'Main Screen'
      )
    )
  ),
  uiOutput("popup_ui")
)

server <- function(input, output, session) {
  
  popup_visible <- reactiveVal(TRUE)
  
  output$popup_ui <- renderUI({
    if (popup_visible()) {
      f7Popup(
        id = "my_popup",
        title = "Popup Home",
        f7Block(
          h1("Popup Title"),
          p("Welcome to the popup!"),
          actionBttn("close_popup", "Continue")
        )
      )
    }
  })
  
  observeEvent(input$close_popup, {
    popup_visible(FALSE)
    print("CLOSED")
  })
}

shinyApp(ui = ui, server = server)

ChatGPT suggested this solution and is struggling to provide an alternative. "CLOSED" is printing so the button click is registering, but the popup does not close and nothing else happens.


Solution

  • You can add the class link popup-close to the button, then it has the functionality for closing the popup. Below I also dropped the closing x in the corner.

    enter image description here

    library(shiny)
    library(shinyWidgets)
    library(shinyMobile)
    
    ui <- f7Page(
      title = "Home Page",
      allowPWA = TRUE,
      options = list(
        theme = 'md',
        dark = FALSE,
        filled = TRUE,
        pullToRefresh = FALSE,
        color = '#005C5C'
      ),
      f7TabLayout(
        navbar = '',
        f7Tabs(
          animated = TRUE,
          id = 'main_tab_layout',
          f7Tab(
            tabName = 'Main',
            title = 'Main Screen'
          )
        )
      ),
      uiOutput("popup_ui")
    )
    
    server <- function(input, output, session) {
      
      popup_visible <- reactiveVal(TRUE)
      
      output$popup_ui <- renderUI({
        if (popup_visible()) {
          f7Popup(
            id = "my_popup",
            title = "Popup Home",
            closeButton = FALSE,
            f7Block(
              h1("Popup Title"),
              p("Welcome to the popup!"),
              actionBttn("close_popup", "Continue", class = "link popup-close")
            )
          )
        }
      })
      
      observeEvent(input$close_popup, {
        popup_visible(FALSE)
      })
    }
    
    shinyApp(ui = ui, server = server)