Home:ALL Converter>Having different tabs and different UI for each tab in Shiny

Having different tabs and different UI for each tab in Shiny

Ask Time:2020-03-10T15:11:33         Author:lakshmen

Json Formatter

I am trying to create two tabs and for each tab in shiny I want to have different UI for each tab.

I am able to create two tabs and the problems i face is the UI is not specific for each tab and when I add the second tab, the UI in the first tab doesn't work. Any idea how to resolve these issues?

The code looks like this:

#Library
library(shiny)
library(shinydashboard)


#Run the Source
pdf(NULL)

#Shiny Header/Sidebar/Body
header=dashboardHeader(title = "FTA Risk Center")
sidebar=dashboardSidebar(sidebarMenu(id = "sidebarmenu",
                                     menuItem("Risk Dashboard", tabName = "Flow", icon = icon("dashboard")),
                                     menuItem("HKJAP", tabName = "HKJAP", icon = icon("th")),
                                     menuItem("HKKOR", tabName = "HKKOR", icon = icon("th"))
))
body=dashboardBody(
  tabItems(tabItem(tabName = "HKJAP",uiOutput('output1'),
                   fluidRow(column(width = 3,box(title = "Summary of EQ Delta", width = NULL, collapsible = TRUE, solidheader = TRUE,status = "primary",tableOutput("EOD"))),column(width = 3,box(title = "Summary of FX Delta", width = NULL,  collapsible = TRUE, solidheader = TRUE,status = "primary",tableOutput("FX"))),column(width = 3,box(title = "Unmapped Tickers", width = NULL,  collapsible = TRUE, solidheader = TRUE,status = "primary",tableOutput("UnmappedTickers")))),
                   fluidRow(column(width = 8,box(title = "Exposures by Indices", width = NULL, collapsible = TRUE, solidheader = TRUE,status = "primary",plotOutput("Chart1"))))),
           tabItem(tabName = "HKKOR",uiOutput('output2'),
                   fluidRow(column(width = 3,box(title = "Summary of EQ Delta", width = NULL, collapsible = TRUE, solidheader = TRUE,status = "primary",tableOutput("EOD"))),column(width = 3,box(title = "Summary of FX Delta", width = NULL,  collapsible = TRUE, solidheader = TRUE,status = "primary",tableOutput("FX"))),column(width = 3,box(title = "Unmapped Tickers", width = NULL,  collapsible = TRUE, solidheader = TRUE,status = "primary",tableOutput("UnmappedTickers")))),
                   fluidRow(column(width = 8,box(title = "Exposures by Indices", width = NULL, collapsible = TRUE, solidheader = TRUE,status = "primary",plotOutput("Chart2")))))
           )
)
ui <- dashboardPage(header,sidebar,body)

#Shiny Server
server <- function(input, output,session) {

  observeEvent(input$sidebarmenu,{

    if(input$sidebarmenu  == "HKJAP")
    {
      obsJAP <- observeEvent(reactiveTimer(30000)(),{ # Trigger every 30 seconds
        source("HKJAP_Live_monitor_v1.R")
        obsJAP$destroy()
      })
      output$output1 <- renderUI({
        invalidateLater(30000, session)
        h1(paste("Risk Exposures as of ",Sys.time()))
      })
      output$EOD=renderTable({
        invalidateLater(30000, session)
        EQ_delta_summary_Live})
      output$FX=renderTable({
        invalidateLater(30000, session) 
        FX_delta_summary_Live})
      output$UnmappedTickers=renderTable({
        invalidateLater(30000, session) 
        unmapped_tickers})
      output$Chart1=renderPlot({
        invalidateLater(30000, session)  
        plot(NIKKEI$trade_time,cumsum(NIKKEI$EQ_Delta),type='l',xlim=time_scale,ylim=c(-30,30), main=paste("Main Indices"),lwd=2)
        grid(10,10,lty=5)
        lines(TOPIX$trade_time,cumsum(TOPIX$EQ_Delta),type='l',col="red",lwd=3)
        lines(NIKKEI_400$trade_time,cumsum(NIKKEI_400$EQ_Delta),type='l',col="orange",lwd=3)
        lines(MXJ$trade_time,cumsum(MXJ$EQ_Delta),type='l',col="green",lwd=3)
        lines(TSE_MOTHERS$trade_time,cumsum(TSE_MOTHERS$EQ_Delta),type='l',col="blue",lwd=3)
        lines(REITS$trade_time,cumsum(REITS$EQ_Delta),type='l',col="pink",lwd=3)
        legend("topright",c("TOPIX","NIKKEI","NIKKEI 400","MXJ","TSE_M","REITS"),lty = c(1,1),col = c("red","black","orange","green","blue","pink"),,bty = 'n',cex = 0.8)
      })
    }else if(input$sidebarmenu == "HKKOR"){

      obsKOR <- observeEvent(reactiveTimer(30000)(),{ # Trigger every 30 seconds
        source("HKKOR_Live_monitor_v1.R")
        obsKOR$destroy()
      })
      output$output2 <- renderUI({
        invalidateLater(30000, session)
        h1(paste("Risk Exposures as ",Sys.time()))
      })
      output$EOD=renderTable({
        invalidateLater(30000, session)
        EQ_delta_summary_Live})
      output$FX=renderTable({
        invalidateLater(30000, session) 
        FX_delta_summary_Live})
      output$UnmappedTickers=renderTable({
        invalidateLater(30000, session) 
        unmapped_tickers})
      output$Chart2=renderPlot({
        invalidateLater(30000, session)  
        plot(KOSPI_DIV$trade_time,cumsum(KOSPI_DIV$EQ_Delta),type='l',xlim=time_scale,ylim=c(-30,30), main=paste("Main Indices"),lwd=2)
        grid(10,10,lty=5)
        lines(KOSPI$trade_time,cumsum(KOSPI$EQ_Delta),type='l',col="red",lwd=3)
        lines(KOSDAQ$trade_time,cumsum(KOSDAQ$EQ_Delta),type='l',col="orange",lwd=3)
        lines(KRX$trade_time,cumsum(KRX$EQ_Delta),type='l',col="green",lwd=3)
        lines(MSCI_KOR$trade_time,cumsum(MSCI_KOR$EQ_Delta),type='l',col="blue",lwd=3)
        lines(SPX_HKKOR$trade_time,cumsum(SPX_HKKOR$EQ_Delta),type='l',col="pink",lwd=3)
        legend("topright",c("KOSPI_DIV","KOSPI","KOSDAQ","KRX","MSCI_KOR","SPX"),lty = c(1,1),col = c("black","red","orange","green","blue","pink"),,bty = 'n',cex = 0.8)
      })
    }
  }
  )

}

shinyApp(ui, server)

Author:lakshmen,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/60612931/having-different-tabs-and-different-ui-for-each-tab-in-shiny
yy