根据URL参数制作闪亮的应用UI

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了根据URL参数制作闪亮的应用UI相关的知识,希望对你有一定的参考价值。

我想根据URL参数为我的应用创建替代UI。具体来说,我想使用shinyWidgets的下拉选择器输入而不是checkboxGroupInput,但仅当通过URL传递参数mini = TRUE时

library(shinyWidgets)

nazwy=c('Warszawa', 'Krakow', 'Gdansk')

ui<-fluidPage(
 if (mini) {
    pickerInput(inputId = "miasto", choices = nazwy,multiple = TRUE)
 } else {
  checkboxGroupInput('miasto', nazwy)
 })

我可以使用conditionalPanel以某种方式做到这一点,或者我是唯一的选择吗?

或者,我可以根据窗口宽度显示pickerInput或checkboxGroupInput吗?

UPDATE

下面给出的选项1是我的初始问题的工作答案,使UI依赖于URL。对于这种特殊情况,选项2是更好的解决方案 - 使UI适应窗口大小。但是,为了使选项2正常工作,需要另一个变量来存储选择,这样每次调整窗口大小时,select / pickerInput都不会返回默认选择。我相应地编辑了代码。

答案

以下四个选项:

  1. 取决于URL,renderUI
  2. 取决于窗口宽度,renderUI
  3. 取决于窗口宽度,conditionalPanel(无法正常工作)
  4. 取决于窗口宽度,shinyjs

选项1:取决于URL,renderUI

可以使其依赖于URL,例如参见here。这是一个示例实现:

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:取决于窗口宽度,renderUI

如果你想让它依赖于窗口宽度,这是一个可能的解决方案:

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:窗口宽度+ conditionalPanel。注意:不能按预期工作。

   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:窗口宽度+ 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的主要内容,如果未能解决你的问题,请参考以下文章

如何保存在闪亮的应用程序中制作的图

在我闪亮的应用服务器部分制作 if 语句

在闪亮的 Web 应用程序中根据用户输入选择特定的 csv 文件

闪亮 R 中的超级菜单

如何在闪亮的应用程序中制作kable table reactive()?闪亮+ kable

根据可编辑单元格用户输入更新闪亮的 DT