updateTabItems for argonCard does not work

[satyamedidi]

updateTabItems for argonCard does not work

[DivadNojnarg]

Hi,

There is no updateTabItems function for argonCard because it does not have tabs. Do you mean argonTabSet instead? By the way the classic shiny updateTaItems will probably not work since the code between tabSetPanel/tabCard and argonTabSet is significantly different. This has to be done however.

[cderv]

I am interested by this feature to activate another argonTabItem from another one on an event. The use case is a form where I want to add a button at the end and send to another tabItem.

it is not for argonCard but for argonTabItem in the same way it works with shiny using updateTabsetPanel. As the argonTabItem as no id, I am not sure it could work the same.

As a workaround, I'll try to use JS to do that but I am not expert. If you plan to add this kind of update* function it would be nice, and I am ready to help with the right guidance.

[DivadNojnarg]

I am preparing a jQuery example for you ;)

[DivadNojnarg]

Here you are:

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

shiny::shinyApp(
  ui = argonDashPage(
    title = "Argon App", 
    description = "Your description", 
    author = "You",
    navbar = argonDashNavbar(), 
    sidebar = argonDashSidebar(
      id = "sidebar", 
      side = "left",
      size = "md", 
      skin = "light",
      background = "white",

      sliderInput(
        "controller", 
        "Controller", 
        min = 1, 
        max = 2, 
        value = 1,
        step= 1
      ),

      argonSidebarMenu(
        argonSidebarItem(
          tabName = "Tab1",
          icon = argonIcon(name = "circle-08", color = "success"),
          "Tab 1"
        ),
        argonSidebarItem(
          tabName = "Tab2",
          icon = argonIcon(name = "atom", color = "success"),
          "Tab 2"
        )
      )

    ), 
    header = argonDashHeader(), 
    body = argonDashBody(

      # recover the R export in JS in the message arg. Message is an object.
      # If on the R side message was a list, you can access its children by
      # message.children.
      shiny::tags$head(
        shiny::tags$script(
          'Shiny.addCustomMessageHandler("update-tabs", function(message) {
                var currentTab = parseInt(message);
                console.log(message); // we check if the message is displayed

                // hide and inactivate all not selected tabs
                $(".active.show").removeClass("active show");
                $(".tab-pane.active.show").removeClass("active show");

                // add active class to the current selected tab and show its content
                $("#tab-Tab" + currentTab).addClass("active show");
                $("#shiny-tab-Tab" + currentTab).addClass("active show");
               });
              '
        )
      ),

      argonTabItems(
        argonTabItem(
          tabName = "Tab1",
          argonCard(
            status = "primary",
            width = 12,
            title = "Card 1",
            hover_lift = TRUE,
            shadow = TRUE,
            icon = argonIcon("check-bold"),
            src = "#",
            "Argon is a great free UI package based on Bootstrap 4 
            that includes the most important components and features."
          )
        ),
        argonTabItem(
          tabName = "Tab2",
          argonBadge(
            text = "My badge",
            src = "https://www.google.com",
            pill = FALSE,
            status = "success"
          )
        )
      )
    ),
    footer = argonDashFooter(copyrights = "Yourself")
  ),
  server = function(input, output, session) {

    # send data from R to Javascript
    observeEvent(input$controller, {
      session$sendCustomMessage(
        type = "update-tabs",
        message = input$controller
      )
    })
  }
)

[DivadNojnarg]

Of course, the previous code is dirty and there should be a proper implementation. I accept any help since my free time tends to -infinity :)

[DivadNojnarg]

Similarly, let's assume you also want to change the icon of the tab, you would have:

observeEvent(input$controller, {
      session$sendCustomMessage(
        type = "update-tabs",
        message = list(
        idx = input$controller,
        icon = input$icon
       )
      )
    })

Make sure that input$icon is given by a selectInput where choices correspond to all argon icons. Then on the UI side, when your call you JS function:

Shiny.addCustomMessageHandler("update-tabs", function(message) {

     // extract each element of the message object
    var icon = message.icon;
    var currentTab = parseInt(message.idx);

    // You JS logic
});

[cderv]

Thanks a lot ! That will definitely help! If I found time, I could try something.

[mkaranja]

That a great work-around. How do you update argonTabSet ?

[awkena]

I tried to use this script to update argonTabSets in my Shiny app, but it does not work. Basically, I am trying to use an action button on one TabSet to navigate to the next TabSet on my sidebar upon clicking the action button.