UI Input Format

shiny
1

Hello everyone!

How can I create 2 columns on input field using Shiny?

I have this:

foto2
foto2301×564 14.5 KB

and I want 2 fields side by side.

ui <-fluidPage(
  
  #Título do Projeto
  headerPanel("Relatorio da Tempera"),
  
  sidebarLayout(
    
    
  #Dados de Input no Painel lateral
  sidebarPanel(
    
    dateRangeInput("data", 
                   label = "Data"),
    hr(),
    fluidRow(column(4, verbatimTextOutput("Value"))),

    
    numericInput(inputId = "pedido",
                 label = "Pedido:",
                 value = 10),
    
    numericInput(inputId = "item",
                 label = "Item:",
                 value = 10),
    
    numericInput(inputId = "ordemmae",
                 label = "Ordem Mãe:",
                 value = 10),

Thx guys!

2

Hi Daniel - welcome to community.rstudio.com! Using two columns and nesting your inputs inside the columns will give you what you want.

For example:

library(shiny)

ui <- fluidPage(
  headerPanel("Relatorio da Tempera"),
  sidebarLayout(
    sidebarPanel(
      dateRangeInput("data", label = "Data"),
      hr(),
      fluidRow(column(4, "Verbatim text output goes here",
                      verbatimTextOutput("Value")),
               column(4,
                      numericInput(inputId = "pedido",
                                   label = "Pedido:",
                                   value = 10),
                      numericInput(inputId = "item",
                                   label = "Item:",
                                   value = 10)),
               column(4,
                      numericInput(inputId = "ordemmae",
                                   label = "Ordem Mae:",
                                   value = 10),
                      numericInput(inputId = "ordemfilha",
                                   label = "Ordem Filha:",
                                   value = 10))
      )),
    mainPanel(
      paste0("mainPanel content goes here")
    )
  ))


server <- function(input, output) {
  
}

shinyApp(ui = ui, server = server)

Created on 2018-09-20 by the reprex package (v0.2.0).

The above yields:

Untitled
Untitled1289×357 10.6 KB

3

Really thx, kmprioli, but my fields appear completely messy.

fotofinal
fotofinal405×924 40.2 KB

I'm using this code:

library(shiny)

ui <-fluidPage(
  
  #Título do Projeto
  headerPanel("Relatorio da Tempera"),
  
  sidebarLayout(
    
    
  #Dados de Input no Painel lateral
  sidebarPanel(
    
    dateRangeInput("data", 
                   label = "Data"),
    hr(),
    fluidRow(
      column(4,
                    verbatimTextOutput("Value")),

    column(4,
    numericInput(inputId = "pedido",
                 label = "Pedido:",
                 value = 10),
    
    numericInput(inputId = "item",
                 label = "Item:",
                 value = 10)),
    
    column(4,
    numericInput(inputId = "ordemmae",
                 label = "Ordem Mãe:",
                 value = 10),
    
    numericInput(inputId = "ordemfilha",
                 label = "Ordem Filha:",
                 value = 10)),
    
    column(4,
    numericInput(inputId = "diametro",
                 label = "Diâmetro:",
                 value = 10),
    
    numericInput(inputId = "parede",
                 label = "Parede:",
                 value = 10)),
    
    column(4,
    numericInput(inputId = "odminmin",
                 label = "OD Mín-Mín:",
                 value = 10),
    
    numericInput(inputId = "adminmed",
                 label = "OD Mín-Méd:",
                 value = 10)),
    
    column(4,
    numericInput(inputId = "reticorpo",
                 label = "Retilineidade Corpo:",
                 value = 10),
    
    numericInput(inputId = "retipe",
                 label = "Retilineidade Pé:",
                 value = 10)),
    
    column(4,
    numericInput(inputId = "compmin",
                 label = "Comprimento Mínimo:",
                 value = 10),
    
    numericInput(inputId = "compmax",
                 label = "Comprimento Máximo:",
                 value = 10)),
    
    
    numericInput(inputId = "diametrodrift",
                 label = "Diâmetro do Drift:",
                 value = 10),
    
    column(4,
    numericInput(inputId = "odmax",
                 label = "OD Máximo:",
                 value = 10),
    
    
    numericInput(inputId = "odmin",
                 label = "OD Mínimo:",
                 value = 10)),
    
    column(4,
    numericInput(inputId = "odlamina",
                 label = "OD alvo Laminação:",
                 value = 10),
    
    
    numericInput(inputId = "wtlamina",
                 label = "WT alvo Laminação:",
                 value = 10))
    
      )
    ),
  
  
  #Painel principal com as saidas de dados
  mainPanel(
    paste0("Conteúdo de saída dos Inputs")
    
  )
  )
)

I really appreciated the help.

4

I have a few thoughts that you may find helpful.

First, I recommend against using sidebarPanel for your particular use case, because the sidebar is quite crowded. Perhaps if you plan for your output to be on top with inputs at the bottom, you will be better able to arrange the inputs. This will also help solve the problem of text wrapping of your input titles, which is preventing your inputs from aligning nicely. See here for an example.

Second, it seems that you may want to reconsider how some of these inputs are nested in their respective columns. It may be helpful to sketch your desired input layout on a piece of paper, which will help you determine how the nesting should look in your code.

Finally, will all of these inputs affect all outputs, or is there any reason everything needs to be in one place? If not, it may make sense to use tabsetPanel() to cluster inputs with their respective outputs.

I would urge you to look at the shiny layout gallery to see if any of the examples there will suit your needs.

I hope this helps!

4 Likes
5

You also want to code up the two columns in row-wise order. That is, if the first four fields are intended to be arranged like this:

--------------------------
| Perdido | Ordem Mae    |
--------------------------
| Item    | Ordem Filha  |
--------------------------

then you'll want to structure the code like this:

fluidRow(
  column(6, perdido),
  column(6, ordemMae)
),
fluidRow(
  column(6, item),
  column(6, ordemFilha)
)

etc. See https://shiny.rstudio.com/articles/layout-guide.html for more details.

2 Likes