Author: Yang Tang
Date: 2022-02-03

# The orderInput

#### Yang Tang

#### 2022-02-03

The `orderInput` display a list of items and return their order as a vector in shiny input value. You can drag and drop the items to change their display order, and the binding shiny input value will update accordingly. Here is a simple example:

    server <- function(input, output) {
      output$order <- renderPrint({input$foo})
    }

    ui <- fluidPage(
      orderInput(inputId = 'foo', label = 'A simple example', items = c('A', 'B', 'C')),
      verbatimTextOutput('order')
    )

    shinyApp(ui, server)

The shiny input value `input$inputId` records the current item order, where the “inputId” is the `inputId` parameter passed to the function.

The `items` parameter can either be a list, an atomic vector or a factor.

- For fully named list and vector (e.g. `c(A = "a", B = "b")`), orderInput displays their names (`A` and `B`) in items and returns their values (`a` and `b`) as order.
- For unnamed or partial named list and vector (e.g. `c("a", B = "b")`), the values (`a` and `b`) are used for both display and order.
- For factor (e.g. `factor("a", "b")`), the values (`a` and `b`) are displayed while their levels (`1` and `2`) are used as itme order.

Multiple `orderInput`s can be connected to each other by passing their `inputId`s to the `connect` parameter. When connected, items from one `orderInput` can be dragged to another. See the following example:

    # items in A can be dragged to B
    orderInput('A', 'A', items = 1:3, connect = 'B')
    # items in B can be dragged to A
    orderInput('B', 'B', items = 4:6, connect = 'A')

A connected `orderInput` can work in the source mode by setting `as_source = TRUE`. If an item is dragged from a source-mode-`orderInput` to other `orderInput`s, the item will not be removed from the original `orderInput`, that is, the operation become “copy” instead of “cut”. See the following example:

    # In source mode, items dragged to B are copied
    orderInput('A', 'A', items = 1:3, connect = 'B', as_source = TRUE)
    orderInput('B', 'B', items = 4:6)

Items from non-source `orderInput` can be deleted by dragging them to a source `orderInput`:

    # Anything dropped into a "source" orderInput will be deleted
    orderInput('A', 'A', items = 1:3, as_source = TRUE),
    orderInput('B', 'B', items = 4:6)

`orderInput` supports the `save` and `load` operations and shiny bookmarking. See Vignette `Save and restore` for more information. Here is an example:

    ui <- fluidPage(
      orderInput('A', 'A', items = 1:3, as_source = TRUE, connect = c("B", "C")),
      orderInput('B', 'B', items = 4:6, connect = "C"),
      orderInput('C', 'C', items = 7:9, connect = "B"),
      hr(),
      actionButton("save", "Save"),
      actionButton("load", "Load")
    )
    server <- function(input, output, session) {
      observeEvent(input$save, jqui_sortable("#B,#C", "save"))
      observeEvent(input$load, jqui_sortable("#B,#C", "load"))
    }

`placeholder` shows when there is no item in an `orderInput`:

    orderInput('A', 'A', items = 1:3, connect = 'B')
    orderInput('B', 'B', items = NULL, placeholder = 'Drag item here...')

`orderInput` uses the six predefined Bootstrap button classes to style the displayed items. Set it in the `item_class` parameter:

    orderInput('default', 'default', items = 1:3, item_class = 'default')
    orderInput('primary', 'primary', items = 1:3, item_class = 'primary')
    orderInput('success', 'success', items = 1:3, item_class = 'success')
    orderInput('info', 'info', items = 1:3, item_class = 'info')
    orderInput('warning', 'warning', items = 1:3, item_class = 'warning')
    orderInput('danger', 'danger', items = 1:3, item_class = 'danger')