Catch id of current selected PivotItem

[BorisDelange]

Hi,

Thanks a lot for this library, the user interface is awesome.

I've been working today on a page using a Pivot, with PivotItems.
Is there a solution to have the information, on the server side, of which Pivot the user is seeing ?

I've tried these methods, not any works :

• to use the "onLinkClick" attribute, in the Pivot tag or in the PivotItem tag, with a Shiny.setInputValue. I've also tried "onclick".
• to use a span tag inside the PivotItem tag and set an id to the span tag
• to use the itemKey attribute in the PivotItem tag to have an id I could catch, and then modify a reactive variable with a shinyjs::onclick function

The id of a pivot item looks like this : "Pivot1606-Tab0", I can't figure out how to catch this ID to manipulate the UI on the server side.

I havn't done a reprex, let me know if it could help to understand my problem.

Thanks a lot !

[kamilzyla]

Hi @BorisDelange! Thanks for your question and praise 🙂

You can get the clicked tab using onLinkClick prop the following way:

library(shiny)
library(shiny.fluent)
library(glue)

setClickedId <- function(inputId) {
  JS(glue("item => Shiny.setInputValue('{inputId}', item.props.id)"))
}

shinyApp(
  ui = tagList(
    textOutput("text"),
    Pivot(
      onLinkClick = setClickedId("currentTab"),
      PivotItem(id = "tab1", headerText = "Apples"),
      PivotItem(id = "tab2", headerText = "Bananas")
    )
  ),
  server = function(input, output) {
    output$text <- renderText(input$currentTab)
  }
)

[jakubsob]

Hi @BorisDelange,

Yes, there is no updatePivot function. But with a tiny bit of JS we can create our own. Instead of using shinyjs::click which requires us to use an ID I've used shinyjs::runjs to employ jQuery to do the work:

library(shiny)
library(shiny.fluent)
library(shinyjs)
library(glue)

updatePivot <- function(inputId, name) {
  runjs(glue("$('#{inputId} button[name={name}]').click();"))
}

shinyApp(
  ui = tagList(
    shinyjs::useShinyjs(),
    PrimaryButton.shinyInput("apples", "Open Apples tab"),
    PrimaryButton.shinyInput("bananas", "Open Bananas tab"),
    Pivot(
      id = "pivot",
      PivotItem(id = "tab1", headerText = "Apples"),
      PivotItem(id = "tab2", headerText = "Bananas")
    )
  ),
  server = function(input, output) {
    observeEvent(input$apples, {
      updatePivot("pivot", "Apples")
    })
    observeEvent(input$bananas, {
      updatePivot("pivot", "Bananas")
    })
  }
)

[BorisDelange]

Once again, thanks a lot !

[ugurdar]

Thanks a lot!
How can I update my pivot with Pivot Item's id. When I check inspect of page, id had assigned automatically as 'Pivot6-Tab0' for first tab and 'Pivot6-Tab1' for second tab.

I try to do this for make unvisible tabs headers. To do this, I will use headerText = NULL, so I can't refer name.

It's an example, but I couldn't automatize it and it works only for first tab.

library(shiny)
library(shiny.fluent)
library(shinyjs)
library(glue)

updatePivot <- function(inputId, id) {
  runjs(glue("$('#{inputId} button[id={id}]').click();"))
}

shinyApp(
  ui = tagList(
    shinyjs::useShinyjs(),
    PrimaryButton.shinyInput("apples", "Open Apples tab"),
    PrimaryButton.shinyInput("bananas", "Open Bananas tab"),
    Pivot(
      id = "pivot",
      PivotItem(id = "tab1", headerText = "Apples"),
      PivotItem(id = "tab2", headerText = "Bananas")
    )
  ),
  server = function(input, output) {
    observeEvent(input$apples, {
      updatePivot("pivot", "Pivot6-Tab0")
    })
    observeEvent(input$bananas, {
      updatePivot("pivot", "tab2")
    })
  }
)

[ugurdar]

Also, it's not working if I use whitespace in headerText argument.

library(shiny)
library(shiny.fluent)
library(shinyjs)
library(glue)

updatePivot <- function(inputId, name) {
  runjs(glue("$('#{inputId} button[name={name}]').click();"))
}

shinyApp(
  ui = tagList(
    shinyjs::useShinyjs(),
    PrimaryButton.shinyInput("apples", "Open Apples tab"),
    PrimaryButton.shinyInput("bananas", "Open Bananas tab"),
    Pivot(
      id = "pivot",
      PivotItem(id = "tab1", headerText = "Apples 2"),
      PivotItem(id = "tab2", headerText = "Bananas")
    )
  ),
  server = function(input, output) {
    observeEvent(input$apples, {
      updatePivot("pivot", "Apples 2")
    })
    observeEvent(input$bananas, {
      updatePivot("pivot", "Bananas")
    })
  }
)

[ugurdar]

I solved my issue with a tricky way by adding styles= JS("{ root: { display: 'none' } }") this on Pivot() function

library(shiny)
library(shiny.fluent)
library(shinyjs)
library(glue)
# Update function before UI
updatePivot <- function(inputId, name) {
  runjs(glue("$('#{inputId} button[name={name}]').click();"))
}

# Pivot in UI
Pivot(
  id = "pivot",
  styles= JS("{ root: { display: 'none', justifyContent: 'center' } }"),
  PivotItem(id='tab1',
            headerText = "Step-1", Label("You can select and filter banks in this tab."),
            PrimaryButton.shinyInput("apples", "Open Apples tab"),
            PrimaryButton.shinyInput("bananas", "Open Bananas tab")
  ),
  PivotItem(id='tab2',headerText = "Step-2", Label("You can select and filter banks in this tab."),
            # content here
  ),
  PivotItem(id='tab3',headerText = "Step-3", Label("You can select holding in this tab."),
            #content here
            )
  )

# ObserveEvent in Server
observeEvent(input$apples, {
  updatePivot("pivot", "Step-1")
})
observeEvent(input$bananas, {
  updatePivot("pivot", "Step-2")
})

[justacec]

I have been trying to use this solution with the Rhino framework approach and the onLinkClick callback is executed when the Shiny app is initially rendered, but then does not fire when I click on the different links. Here is the code that I am using:

    Pivot(
        onLinkClick = JS('alert("HERE")'),
        PivotItem(headerText = 'DOPLR', itemKey = 'welcome', welcome$ui(ns("welcome"))),
        PivotItem(headerText = 'Assessment Form', itemKey = 'survey', survey_ui$ui(ns("survey"))),
        PivotItem(headerText = 'Visualizer', itemKey = 'visualizer')
    )

I am using version R 4.2.0 with Shiny 1.7.3 and shiny.fluent 0.3.0. Any help would be greatly appriciated.

Edit: Just realized that this seems related to the fact that I have wrapped the ui in a call to fluentPage which is suggested by the Rhino framework (IIRC). If I remove that fluentPage call then it works as expected. But my gut is telling me I should retain the fluentPage call since I am making a Fluent based application.

[justacec]

As this is feeling like a bug in the fluentPage function, I have submitted an issue for this at #164.