Generate dynamic Tab using argonDash (shiny framework) package

Question

I tried to make dynamic Tab using argonDash package. However, I met some trouble with my code. I guess argonDash seems to get different behavior than native shiny because argonDash uses Bootstrap 4 (instead of 3).

My code is composed of two key features:

The first widget uiOutput(outputId = "new_argonSidebarItem") works well.

The second widget uiOutput(outputId = "new_argonTabItem") doesn't work properly. I expect that the argonBadge() toggle with the second tab.

library(shiny)
library(argonDash)
library(argonR)

ui <- argonDashPage(
  sidebar = argonDashSidebar(
    id = "sidebar01",
    vertical = FALSE,
    size = "md",
    background = "white",
    argonSidebarMenu(
      style = "display:-webkit-inline-box;",
      argonSidebarItem(
        tabName = "Tab1",
        icon = NULL,
        "Dashboard"
      ),
  
      # New Tab
      uiOutput(outputId = "new_argonSidebarItem")
  
    )
  ),
  body = argonDashBody(
    argonTabItems(
      argonTabItem(
        tabName = "Tab1",
        actionButton("add_more", "Add a new btn")
      ),
  
      # Body
      uiOutput(outputId = "new_argonTabItem")
  
    )
  )
)


server <- function(input, output, session) {

  observeEvent(input$add_more, {

    tabId <- sample.int(n = 1000000, size = 1)
    tabName <- paste0("Tab_", tabId)

    insertUI(
      selector = "#tab-Tab1",
      where = "afterEnd",
      ui = argonSidebarItem(
        tabName = tabName,
        tabName
      )
    )

    output$new_argonTabItem <- renderUI({
      argonTabItem(
        tabName = tabName,
        argonBadge(
          text = tabName,
          src = "#",
          pill = FALSE,
          status = "success"
        )
      )
    })

  })

}

shinyApp(ui, server)

Thank you for your time!

Answer 1

To update your badge you need to track which tab is selected. This is done accordingly to this solution : https://github.com/RinteRface/argonDash/issues/7

But your badge can not be modified, so I replaced it with a button from {shinyWidgets}.

I hope this is what you ask for, I'm not really sure to understand what you want to happen.

library(shiny)
library(argonDash)
library(argonR)
library(shinyWidgets)

ui <- argonDashPage(
  sidebar = argonDashSidebar(
    id = "sidebar01",
    vertical = FALSE,
    size = "md",
    background = "white",
    argonSidebarMenu(
      style = "display:-webkit-inline-box;",
      argonSidebarItem(
        tabName = "Tab1",
        icon = NULL,
        "Dashboard"
      ),
      
      # New Tab
      uiOutput(outputId = "new_argonSidebarItem")
      
    )
  ),
  body = argonDashBody(
    argonTabItems(
      argonTabItem(
        tabName = "Tab1",
        actionButton("add_more", "Add a new btn")
      ),
      
      # Body
      uiOutput(outputId = "new_argonTabItem")
      
    ),
    tags$script( "$(document).on('click', function(event) {
              Shiny.onInputChange('activeTab', $('.active').data().value);});")
  )
)


server <- function(input, output, session) {
  
  x <- reactiveValues(tabs = NULL)
  
  observeEvent(input$add_more, {
    
    tabId <- sample.int(n = 1000000, size = 1)
    tabName <- paste0("Tab_", tabId)
    
    insertUI(
      selector = "#tab-Tab1",
      where = "afterEnd",
      ui = argonSidebarItem(
        tabName = tabName,
        tabName
      )
    )
    
    output$new_argonTabItem <- renderUI({
      argonTabItem(
        tabName = tabName,
        actionBttn(
          inputId = paste0(input$activeTab,"_b"),
          label = tabName,
          style = "float", 
          color = "success"
        )#,
        # argonBadge(
        #   text = tabName,
        #   src = "#",
        #   pill = FALSE,
        #   status = "success"
        # )
      )
    })
    
    
  })
  
  observeEvent(input$activeTab, {
    updateActionButton(session,
                       paste0(input$activeTab,"_b"), 
                       input$activeTab)
  })
}

shinyApp(ui, server)