how to hide menuItem and its contain for particular user in shiny r?

Question

I am creating my app where I want to hide particular menuItem and its contains depending upon user credential. I want to show everything for admin/tester but not all user. I found question in stack overflow, Hide an element (box/tabs) in shiny dashbaord, I am modified code as below

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(

dashboardHeader(title = "Set")
,dashboardSidebar(
   sidebarSearchForm(label = "Search...", "searchText", "searchButton"),
  sidebarMenu(
    menuItem("Port", tabName = "P", icon = icon("cog"))
    ,menuItem("Rank", tabName = "Rank", icon = icon("cog"))
    ,menuItem("Mark", tabName = "Mark", icon = icon("bar-chart"))
    ,menuItem("Read", tabName = "Read", icon = icon("file-pdf-o"))
    ,useShinyjs()
    ,menuItem("Port, tabName = "Ocean", icon = icon("heart"))
  )
  ,uiOutput('Super')
  ,uiOutput('AList')
  ,uiOutput('BList')
  ,uiOutput('DList')
  ,uiOutput('SList')
)


,dashboardBody(
....
)
)

server <- shinyServer(function(input, output, session) {
  observeEvent(session$user,{
   if (session$user == "tester") return(NULL)
     hide(id = "Port", anim = TRUE)
 })
}

shinyApp(ui = ui, server = server) 

However, it is not working, Any tips ?

Answer 1

So, your approach has one problem: The way that the menuItems look like in the final document.

The code you provided is saying: Hide the element with Id "Port"! This would all be fine, if the menuItems actually had an Id, but when you look at them (right click + inspect) you'd see that's not the case.

Close inspection shows, that your menuItems can be identified in the document by tag name (= a) and the data-value (which correponds to the assigned tabName). This is the selecting argument for your hiding command. I don't know if Shinyjs offers searching by other attributes, but you might as well write the JS code youself.

In the code below, I faked the user login with a textInput. You can observe, that the first menuItem only shows, if you insert "tester" into the text field.

The way it's done: You send a message to the client to show/hide an item with certain tabName. The JS script searches through all a tags for the one with your given name stored in its data-value attribute. Hiding is done by display: none.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Set"),
  dashboardSidebar(
    sidebarSearchForm(label = "Search...", "searchText", "searchButton"),
    tags$head(tags$script(HTML("
      Shiny.addCustomMessageHandler('manipulateMenuItem', function(message){
        var aNodeList = document.getElementsByTagName('a');

        for (var i = 0; i < aNodeList.length; i++) {
          if(aNodeList[i].getAttribute('data-value') == message.tabName) {
            if(message.action == 'hide'){
              aNodeList[i].setAttribute('style', 'display: none;');
            } else {
              aNodeList[i].setAttribute('style', 'display: block;');
            };
          };
        }
      });
    "))),
    sidebarMenu(
      menuItem("Port", tabName = "P", icon = icon("cog")),
      menuItem("Rank", tabName = "Rank", icon = icon("cog")),
      menuItem("Mark", tabName = "Mark", icon = icon("bar-chart")),
      menuItem("Read", tabName = "Read", icon = icon("file-pdf-o")),
      menuItem("Port", tabName = "Ocean", icon = icon("heart"))
    ),
    uiOutput('Super'),
    uiOutput('AList'),
    uiOutput('BList'),
    uiOutput('DList'),
    uiOutput('SList')
  ),
  dashboardBody(
    textInput("user", "User ID fake.")
  )
)

server <- function(input, output, session) {
  observeEvent(input$user,{
    if(input$user != "tester"){
      session$sendCustomMessage(type = "manipulateMenuItem", message = list(action = "hide", tabName = "P"))
    }else{
      session$sendCustomMessage(type = "manipulateMenuItem", message = list(action = "show", tabName = "P"))
    }
 })
}

shinyApp(ui, server)