I am trying to create a Shiny Dashboard with different tabs and screens. The idea is that inside the Forecast tab; after clicking the "forecast details" button it apears a new screen with the forecast details. And after you can click the "back" button to go to "forecast" general screen again.
It work first time, but the second time I want to access the "forecast details" through the actionbutton it doesn't work any more; and it just displays the conditional pannel below in the same screen. Any idea about what I am missing?
Here is the ui.R
ui <- dashboardPage(
dashboardHeader(title = "BLABLA",
dropdownMenu(type = "notifications",
notificationItem(
text = "5 new products today",
icon("users")
),
notificationItem(
text = "12 items reviewed",
icon("truck"),
status = "success"
),
notificationItem(
text = "Data load at 86%",
icon = icon("exclamation-triangle"),
status = "warning"
)
),
dropdownMenu(type = "tasks", badgeStatus = "danger",
taskItem(value = 20, color = "aqua",
"Task 1"
),
taskItem(value = 40, color = "green",
"Task 2"
),
taskItem(value = 60, color = "yellow",
"Task 3"
),
taskItem(value = 80, color = "red",
"Task 4"
)
)
),
dashboardSidebar(
sidebarMenu(id = "tabs",
menuItem("Main", tabName = "Main", icon = icon("dashboard")),
menuItem("Forecast", tabName = "Segments", icon = icon("th")),
menuItem("KPI", tabName = "KPI", icon = icon("th"))
)
),
dashboardBody(
shinyjs::useShinyjs(),
#First Tab
tabItems(
tabItem(tabName= "Main",h2("Welcome back Niek !",style="text-
align:left;color:DarkSlateBlue ;font-size:300%; "),
fluidPage(
fluidRow((column(width = 12,
box("This app is an automated decision tool
that...",br(),"Brief explanation on how to use the tool",
width = NULL, height = 600, solidHeader =
TRUE, status = "primary"
)
)
)
)
)
),
tabItem(tabName= "Segments",
conditionalPanel(condition = "input.graph % 2 == 0
|| input.Back % 2 !=0",
fluidPage(
br(),
br(),
fluidRow(
box(title="Newly Promotional Items",
width = 3,height = 200, background = "blue",br(),
actionButton(inputId="graph", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
),
box(
title = "Promotional forecast products", width = 3,height = 200, background = "light-blue",br(),
actionButton(inputId="graph2", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
),
box(
title = "Products with higher number of promotions", width = 3, height = 200,background = "light-blue",br(),
actionButton(inputId="graph3", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
),
box(
title = "Title 6",width = 3, height = 200,background = "light-blue",br(),
actionButton(inputId="graph4", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
)
),
br(),
# valueBoxes
fluidRow(
box(title="AX Products",
width = 3,height = 200, background = "purple",br(),
#splitLayout(
actionButton(inputId="graph5", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
#)
),
box(
title = "Historical High Bias products", width = 3, height = 200,background = "purple",br(),
actionButton(inputId="graph6", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
),
box(
title = "Low FCA products", width = 3, height = 200,background = "purple",br(),
actionButton(inputId="graph7", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
),
box(
title = "Number of alerts",width = 3,height = 200, background = "purple",br(),
actionButton(inputId="graph8", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
)
),
br(),
fluidRow(
box(title="Products by Segment",
width = 3, height = 200,background = "yellow",br(),
actionButton(inputId="graph9", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
),
box(
title = "Products by SKU", width = 3,height = 200, background = "yellow",br(),
actionButton(inputId="graph10", label="Forecast Details", icon=icon("bar-chart")),
box(solidHeader =TRUE,"blabla",title="Product Details",align="right",height = 100, color="black")
)
),
verbatimTextOutput("debug")
)
)
),
tabItem(tabName = "KPI",
h2('KPI DASHBOARD'),br()
#,img(src='Picture1.png', align = "right")
)
),
conditionalPanel(
condition= "input.graph % 2 != 0 ",
fluidPage(
fluidRow(column(width = 12,
box(
title = "Product Forecast 1", align = "center", width = NULL, height = 200, solidHeader = TRUE, status = "warning"
)
)
),
fluidRow(column(width = 12,
box(
title = "Product Forecast 2", align = "center", width
= NULL, height = 200, solidHeader = TRUE, status = "warning"
)
)
),
fluidRow(column(width = 12,
box(
title = "Product Forecast 3", align = "center", width
= NULL, height = 200, solidHeader = TRUE, status = "warning"
)
)
),
actionButton("Back", "Back")
)
)
)
)
And here is the server.R
shinyServer(function(input, output,session) {
observe({
if (input$graph == 0) {
return()
}
})
observe({
if (input$Back== 0) {
return()
}
})
