Chapter 3 Frontend/ User Interface UI

Let’s start with UI/frontend user interface design, we called it “ui” which is a place where users interact. Here are the ui codes.

# Interface of the application
ui <- fluidPage(
  # title of the app
  titlePanel("Data Visualization"),
  sidebarLayout(
    # Sidebar Panel
    sidebarPanel(
      selectInput("dt", "Select Dataset", choices = c("mtcars", "iris")),
      uiOutput("var"),
      actionButton("submit", "Plot"),
      hr() # a line break
    ),
    #close sidebarPanel()
    
    # Main Panel
    mainPanel(# Create tab Panel
      tabsetPanel(
        id = "tab_id",
        # Data Review tab will print out the data
        tabPanel(
          "Data Review",
          value = "data_tab",
          br(),
          br(),
          DT::DTOutput("dtable"),
          br(),
          br()
        ),
        # Plot tab will print out the plot
        tabPanel(
          "Plot",
          value = "plot_tab",
          br(),
          br(),
          plotOutput("plot_out", width = "70%", height  = "550px"),
          br(),
          uiOutput("dl_butt")
        )
      )) # close mainPanel()
    
  ),
  # close sidebarLayout
  
  br(),
  br(),
  br(),
  br(),
  hr(),
  source("footer.R", local = TRUE)$value
)

From the codes you can see the object called ui through a function called fluidPage() (type ?fluidPage on your console for more infor), this is fluidPage(..., title = NULL, responsive = NULL, theme = NULL) function.

There are three main elements of this function

• titlePanel()

• sidebarLayout()

• Application footer source("footer.R", local = TRUE)$value

Figure 3.1: Basic Shiny Application Structure - Interface UI