使闪亮的应用程序 UI 依赖于 URL 参数
make shiny app UI dependent on URL parameter
我想根据 URL 参数为我的应用程序创建替代 UI。具体来说,我想使用 shinyWidgets 的下拉 pickerInput 而不是 checkboxGroupInput,但前提是参数 mini=TRUE 通过 URL
传递
library(shinyWidgets)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
if (mini) {
pickerInput(inputId = "miasto", choices = nazwy,multiple = TRUE)
} else {
checkboxGroupInput('miasto', nazwy)
})
我可以使用条件面板以某种方式做到这一点,还是渲染UI是我唯一的选择?
或者,我可以根据 window 宽度显示 pickerInput 或 checkboxGroupInput 吗?
更新
下面给出的选项 1 是对我最初问题的有效答案,使 UI 依赖于 URL。对于这种特殊情况,选项 2 是更好的解决方案 - 将 UI 调整为 window 大小。但是,要使选项 2 正常工作,需要另一个变量来存储选择,这样 select/pickerInput 就不会在每次 window 调整大小时都返回默认选择。我相应地编辑了代码。
以下四个选项:
- 依赖于URL,renderUI
- 取决于 window 宽度,renderUI
- 取决于 window 宽度,conditionalPanel(不能正常工作)
- 取决于 window 宽度,shinyjs
选项 1:依赖于 URL,renderUI
可以使它依赖于 URL,例如 。这是一个示例实现:
library(shinyWidgets)
library(shiny)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
uiOutput('myUI')
)
server <- function(input,output,session) {
output$myUI <- renderUI({
query <- parseQueryString(session$clientData$url_search)
if (!is.null(query$mini)) {
if(query$mini==TRUE)
{
pickerInput(inputId = "miasto", choices = nazwy,multiple = TRUE)
}
else
{
checkboxGroupInput('miasto', 'choose: ',nazwy)
}
}
else
{
checkboxGroupInput('miasto', 'choose: ',nazwy)
}
})
}
shinyApp(ui,server,options=list(port=7777))
同时尝试 http://127.0.0.1:7777/
和 http://127.0.0.1:7777/?mini=TRUE
。
选项 2:取决于 window 宽度,renderUI
如果你想让它依赖于 window 宽度,这里有一个可能的解决方案:
library(shinyWidgets)
library(shiny)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
tags$head(tags$script('
var dimension = [0, 0];
$(document).on("shiny:connected", function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
$(window).resize(function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
')),
uiOutput('myUI')
)
server <- function(input,output) {
output$myUI <- renderUI({
req(input$dimension)
if (input$dimension[1]<800) {
pickerInput(inputId = "miasto", choices = nazwy,
selected=isolate(selected_cities()),multiple = TRUE)
} else {
checkboxGroupInput('miasto', 'choose: ',
choices=nazwy, selected=isolate(selected_cities()))
}
})
#store selected value to pass on resizing
selected_cities<-reactive(input$miasto)
}
shinyApp(ui,server)
选项 3:Window 宽度 + 条件面板。
注意:没有按预期工作。
library(shinyWidgets)
library(shiny)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
tags$head(tags$script('var dimension = [0, 0];
$(document).on("shiny:connected", function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
$(window).resize(function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
')),
conditionalPanel(condition = 'input.dimension[0]>1000',
pickerInput(inputId = "miasto", choices = nazwy,multiple = TRUE)
),
conditionalPanel(condition = 'input.dimension[0]<=1000',
checkboxGroupInput('miasto', 'choose: ',nazwy))
)
server <- function(input,output) {
}
shinyApp(ui,server)
选项 4:window 宽度 + shinyjs
library(shinyWidgets)
library(shiny)
library(shinyjs)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
tags$head(tags$script('var dimension = [0, 0];
$(document).on("shiny:connected", function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
$(window).resize(function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
')),
div(id='div1',pickerInput(inputId = "miasto", choices = nazwy,multiple = TRUE)),
shinyjs::hidden(div(id='div2',checkboxGroupInput('miasto', 'choose: ',nazwy))),
useShinyjs()
)
server <- function(input,output) {
observeEvent(input$dimension,ignoreNULL=T,{
if (input$dimension[1]>1000) {
shinyjs::show('div1')
shinyjs::hide('div2')
} else {
shinyjs::show('div2')
shinyjs::hide('div1')
}
})
}
shinyApp(ui,server)
我想根据 URL 参数为我的应用程序创建替代 UI。具体来说,我想使用 shinyWidgets 的下拉 pickerInput 而不是 checkboxGroupInput,但前提是参数 mini=TRUE 通过 URL
传递library(shinyWidgets)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
if (mini) {
pickerInput(inputId = "miasto", choices = nazwy,multiple = TRUE)
} else {
checkboxGroupInput('miasto', nazwy)
})
我可以使用条件面板以某种方式做到这一点,还是渲染UI是我唯一的选择?
或者,我可以根据 window 宽度显示 pickerInput 或 checkboxGroupInput 吗?
更新
下面给出的选项 1 是对我最初问题的有效答案,使 UI 依赖于 URL。对于这种特殊情况,选项 2 是更好的解决方案 - 将 UI 调整为 window 大小。但是,要使选项 2 正常工作,需要另一个变量来存储选择,这样 select/pickerInput 就不会在每次 window 调整大小时都返回默认选择。我相应地编辑了代码。
以下四个选项:
- 依赖于URL,renderUI
- 取决于 window 宽度,renderUI
- 取决于 window 宽度,conditionalPanel(不能正常工作)
- 取决于 window 宽度,shinyjs
选项 1:依赖于 URL,renderUI
可以使它依赖于 URL,例如
library(shinyWidgets)
library(shiny)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
uiOutput('myUI')
)
server <- function(input,output,session) {
output$myUI <- renderUI({
query <- parseQueryString(session$clientData$url_search)
if (!is.null(query$mini)) {
if(query$mini==TRUE)
{
pickerInput(inputId = "miasto", choices = nazwy,multiple = TRUE)
}
else
{
checkboxGroupInput('miasto', 'choose: ',nazwy)
}
}
else
{
checkboxGroupInput('miasto', 'choose: ',nazwy)
}
})
}
shinyApp(ui,server,options=list(port=7777))
同时尝试 http://127.0.0.1:7777/
和 http://127.0.0.1:7777/?mini=TRUE
。
选项 2:取决于 window 宽度,renderUI
如果你想让它依赖于 window 宽度,这里有一个可能的解决方案:
library(shinyWidgets)
library(shiny)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
tags$head(tags$script('
var dimension = [0, 0];
$(document).on("shiny:connected", function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
$(window).resize(function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
')),
uiOutput('myUI')
)
server <- function(input,output) {
output$myUI <- renderUI({
req(input$dimension)
if (input$dimension[1]<800) {
pickerInput(inputId = "miasto", choices = nazwy,
selected=isolate(selected_cities()),multiple = TRUE)
} else {
checkboxGroupInput('miasto', 'choose: ',
choices=nazwy, selected=isolate(selected_cities()))
}
})
#store selected value to pass on resizing
selected_cities<-reactive(input$miasto)
}
shinyApp(ui,server)
选项 3:Window 宽度 + 条件面板。 注意:没有按预期工作。
library(shinyWidgets)
library(shiny)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
tags$head(tags$script('var dimension = [0, 0];
$(document).on("shiny:connected", function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
$(window).resize(function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
')),
conditionalPanel(condition = 'input.dimension[0]>1000',
pickerInput(inputId = "miasto", choices = nazwy,multiple = TRUE)
),
conditionalPanel(condition = 'input.dimension[0]<=1000',
checkboxGroupInput('miasto', 'choose: ',nazwy))
)
server <- function(input,output) {
}
shinyApp(ui,server)
选项 4:window 宽度 + shinyjs
library(shinyWidgets)
library(shiny)
library(shinyjs)
nazwy=c('Warszawa', 'Krakow', 'Gdansk')
ui<-fluidPage(
tags$head(tags$script('var dimension = [0, 0];
$(document).on("shiny:connected", function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
$(window).resize(function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
')),
div(id='div1',pickerInput(inputId = "miasto", choices = nazwy,multiple = TRUE)),
shinyjs::hidden(div(id='div2',checkboxGroupInput('miasto', 'choose: ',nazwy))),
useShinyjs()
)
server <- function(input,output) {
observeEvent(input$dimension,ignoreNULL=T,{
if (input$dimension[1]>1000) {
shinyjs::show('div1')
shinyjs::hide('div2')
} else {
shinyjs::show('div2')
shinyjs::hide('div1')
}
})
}
shinyApp(ui,server)