How to create this user panel on top right corner of shiny

Do you see Alexender Perce written on top right corner of the header and on top sidebar.

Is there a way to create that in shinydashboard but I want to give a tab button to them. so that I can give them choice to

1> logout
2> create user
3> reset password.

I want to redirect user to different pages. is there way I can do that.

Can somebody please at least direct me to a way where I can find the rest of it myself

Are you asking how to add user authentication to a shiny dashboard? If so, the answer depends on how your shiny app is deployed, and a good answer depends on knowing more context about what you’re trying to do. For instance:

  • Are you deploying on Shiny Server? Shiny Server Pro?
  • Are you deploying internally, or on the open web?
  • Do you already have user authentication for other parts of your site or other web apps you run, if any?
  • Are you working in a setting where you need an IT security review for user-authenticated products?
  • How sensitive are the data your shiny dashboard will present? Will you need to comply with specific privacy regulations?
  • Etc!

Or are you asking about how to create an interface that looks / interacts like the one in the screenshot, for a shiny app that already has user authentication?

P.S. I’ve noticed that these forums quiet down a lot heading into the weekend (this is not surprising), so a question posted on Friday may not get much attention until Monday rolls around again.

2 Likes

I am looking at the UI side of the code.

I just want to know how to design this layout as three should be a button on the right corner with clickable buttons which open a tab or A MODELDIALOGUE box..

I couldn't find any such thing in the dashboard package it just has messages, tasks, and notifications. Totally different thing.

How should I put it in header. Please do answer

This code puts an actionLink on the right side of the navbar that can be used to open a Modal:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Nav Button Example",
                  
    tags$li(actionLink("openModal", label = "", icon = icon("info")),
            class = "dropdown")
    
  ),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) { 
  
  observeEvent(input$openModal, {
    showModal(
      modalDialog(title = "Some title",
                  p("Some information"))
    )
  })
  
  }

shinyApp(ui, server)
1 Like

Thanks for this code. Is there a way I can redirect the person on to a different tab by this click. I would love to do that...

Please let me know if you know the answer

Yes you can do it with a bit of javascript. You can make a JS function available by including it in the tags$head() part of the UI. Then call the function in the onclick option of any link and change the value supplied to the name of the tab you want to switch to via the link.

Like so:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Switch Tabs Example",
                  
                  tags$li(
                    class = "dropdown",
                    a("Tab 1",
                      onclick = "openTab('tab1')",
                      href = NULL,
                      style = "cursor: pointer;"
                    )
                  ),
                  tags$li(
                    class = "dropdown",
                    a("Tab 2",
                      onclick = "openTab('tab2')",
                      href = NULL,
                      style = "cursor: pointer;"
                    )
                  )
                  
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Tab 1", tabName = "tab1"),
      menuItem("Tab 2", tabName = "tab2")
    )
  ),
  
  dashboardBody(
    
    tags$head(
      tags$script(
        HTML("
          var openTab = function(tabName){
            $('a', $('.sidebar')).each(function() {
              if(this.getAttribute('data-value') == tabName) {
                this.click()
              };
            });
          }
          ")
      )
    ),
    
    tabItems(
      tabItem("tab1",
              h1("Tab 1")
              ),
      tabItem("tab2",
              h1("Tab 2")
      )
    )
    
    
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

thanks for such a great response and I appreciate you taking time and effort writing it. But I am not familiar with JS. Is there any R way of using it like shinyjs or something. I think I only need 2 things

  1. A drop down dutton which has more buttons in it. But somehow I can not write tags$li under tags$ul. it simply doesn't work that way in shiny.

  2. I thought if I could supply an ID as a href to a button it will go to that particular place. so when I run my code it supplies my tabname that is 'file_tab' after 'shiny-tab-' thus the id is 'shiny-tab-file_tab'. But when I supply it to href it doesn't work but it should.

This is what I was trying to write before I opened a request.

dashboardHeader(
    title = 'HR Dashboard',
            tags$ul(
                tags$li(actionLink("openModal", label = tags$a('click',href='#shiny-tab-file_tab'), icon = icon("info")),
                        class = "dropdown"),
                tags$li(actionLink("openModal", label = "", icon = icon("info")),
                        class = "dropdown")    
            )
            
    
)

Is there any way to improve it. though I know this produces perfect html

<ul>
  <li class="dropdown">
    <a id="openModal" href="#" class="action-button">
      <i class="fa fa-info"></i>
      <a href="#shiny-tab-file_tab">click</a>
    </a>
  </li>
  <li class="dropdown">
    <a id="openModal" href="#" class="action-button">
      <i class="fa fa-info"></i>
      
    </a>
  </li>
</ul>

No that won't work. You can't access tabs with a href in shiny dashboard. You need to use the onclick argument of an a() link and provide a the JS function with the appropriate tab name.

You don't need to know JS to do this, just copy my example above by placing the JS script in the tags$head() ui section and using onclick = "openTab('name-of-tab-to-open')" in any links you want to use as tab selections.

Or if you want the link to open a Modal Dialog, use the actionLink and server logic I used in the first example.

If you want the navbar items to be a dropdown menu you can wrap it in shinydashboards dropdownMenu() function and provide a few additional arguments like so:

dropdownMenu(
  headerText = "Tab Menu",
  icon = icon("info"),

  tags$li(
    class = "dropdown",
    a("Tab 1",
      onclick = "openTab('tab1')",
      href = NULL,
      style = "cursor: pointer;"
    )
  ),

  tags$li(
    class = "dropdown",
    a("Tab 2",
      onclick = "openTab('tab2')",
      href = NULL,
      style = "cursor: pointer;"
    )
  )

)

If you need your own customisation of the dropdown have a look at this SO answer.

2 Likes