R shiny [02]: Dashboard UI

Install and import required pacakges

To begin, let’s set up a simple shiny application with a basic UI and server structure. Before creating the app, ensure you have the necessary libraries installed. If not, you can install them using:

# Please install these packages before import them.
# Load packages
library(shiny)
library(shinyjs)
library(shinydashboard)
library(htmltools)

• shiny is the core package for building interactive web applications in R, allowing users to create dynamic, user-friendly interfaces without needing extensive web development knowledge.

• shinydashboard enhances Shiny applications by providing a structured and customizable dashboard layout, making it easier to design professional-looking interfaces with sidebar menus, tabbed content, and dynamic UI components.

• shinyjs extends Shiny’s capabilities by allowing JavaScript interactions without writing JavaScript code, enabling features like hiding/showing elements, disabling/enabling inputs, running JavaScript functions, and modifying UI elements dynamically.

• htmltools helps generate, manage, and customize HTML content in R, enabling users to create structured web elements, embed dependencies, and integrate HTML components into Shiny, R Markdown, and other web-based outputs.

Basic structure of Shiny app

The basic structure of a shiny app consists of UI (frontend) and server (backend), and after setting the UI and server, you can check the app using shinyApp() function as given below:

ui <- fluidPage()
server <- function(input, output, session) {}
shiny::shinyApp(ui = ui, server = server)

Create Shiny app dashboard

Let’s make a simple example using shinydashboard package. When you run below code, you can see the blank page with blue colored dashboard.

ui <- fluidPage(
  dashboardPage(
    ## Dashboard color
    skin = "blue",
    ## Dashboard header
    dashboardHeader(),
    ## Dashboard sidebar
    dashboardSidebar(),
    ## Dashboard body
    dashboardBody()
  )
)

server <- function(input, output, session) {}
shiny::shinyApp(ui = ui, server = server)

Okay, now let’s add a title to the app and some tabs to the sidebar in the UI.

ui <- fluidPage(
  dashboardPage(
    ## Dashboard color
    skin = "blue",
    ## Dashboard header
    dashboardHeader(
      title = tagList(icon("chart-line"), 
                      "Hello")
    ),
    ## Dashboard sidebar
    dashboardSidebar(
      sidebarMenu( 
        menuItem("Sidebar 1", 
                 tabName = "sidebar_1", 
                 icon = icon("info-circle")),
        menuItem("Sidebar 2", 
                 tabName = "sidebar_2",
                 icon = icon("project-diagram")),
        menuItem("Sidebar 3", 
                 tabName = "sidebar_3", 
                 icon = icon("history")),
        menuItem("Sidebar 4", 
                 tabName = "sidebar_4", 
                 icon = icon("comments"))
      )
    ),
    ## Dashboard body
    dashboardBody(
    )
  )
)

server <- function(input, output, session) {}
shiny::shinyApp(ui = ui, server = server)

In this context, the final basic structure of our app is as follows. The “id” and “tabName” shown below serve as a type of “address”. In dynamic web applications, elements such as id, name, and value are crucial. Properly setting these ensures smooth communication between the UI and the server.

ui <- fluidPage(
  shinyjs::useShinyjs(),
  
  div(id = "ui_main_page",
      dashboardPage(
        ## Dashboard color
        skin = "blue",
        ## Dashboard header
        dashboardHeader(title = tagList(icon("chart-line"), "GAM tool"),
                        tags$li(class = "dropdown",
                                style = "margin-right: 10px; margin-top: 8px;",
                                actionButton(inputId = "login_admin_btn",
                                             label = "Admin",
                                             icon = icon("user-shield")),
                                actionButton(inputId = "logout_btn",
                                             label = "Logout",
                                             icon = icon("sign-out-alt"))
                        )),
        
        ## Dashboard sidebar
        dashboardSidebar(
          sidebarMenu(
            id = "tabs", 
            menuItem("General information", 
                     tabName = "ginfo", 
                     icon = icon("info-circle")),
            menuItem("GAM manual", 
                     tabName = "gam_manual",
                     icon = icon("project-diagram")),
            menuItem("GAM previous", 
                     tabName = "gam_previous", 
                     icon = icon("history")),
            menuItem("Discussion of statistics", 
                     tabName = "discussion_of_statistics", 
                     icon = icon("comments"))
          )
        ),
        ## Dashboard body
        dashboardBody(
        )
      )
  )
)

server <- function(input, output, session) {}
shiny::shinyApp(ui = ui, server = server)

div(id = "ui_main_page", ... ) serves as a wrapper for the entire UI with “id”, allowing for future dynamic UI manipulations. shinyjs::useShinyjs() enables JavaScript-free UI modifications, making it possible to show/hide elements, disable buttons, and apply dynamic styling. In other words, it is used for managing login/logout or hide/show functionality and other interactive UI changes. Next time you’ll learn how to utilize these.