designerdesigner is intended to make the initial generation of a
UI wireframe of a shiny application as quick and simple as possible.
The package contains a shiny application that enables
the user to build the UI of a shiny application by drag and
dropping several shiny components - such as inputs, outputs
and buttons - into one of the available pages in the
{shiny} package. Once finalised, the R code used to
generate the UI can be copied or downloaded to a ui.R file,
and then the rest of the application like the server logic and styling
can be built by the developer.
The drag-and-drop nature of the application means that it is easy for both R and non-R users to collaborate in designing the UI of their shiny application. Comments can be added to any component so that it is simple to remember what should be included for each input/output.
To run the application, use designer::designApp() or
select “Shiny UI Builder” in the Addins.
There are several steps in creating the desired application UI:
First is the choice of page.
{bs4Dash} dashboard page.Next is adding the components to the page. A list of available
components mentioned below. When creating components the
{shiny} function parameters that can affect the look/layout
of the UI (e.g. width and labels) are available to customise, but the
more server-logic related parameters (e.g. dropdown choices) are left to
the application developer later on.
| Component | {shiny} Function |
Description |
|---|---|---|
| Tab | tabPanel |
(navbarPage only) Adding/Removing a tab |
| Header | h1 to h6 |
|
| Row | fluidRow |
|
| Column | column |
|
| Text | p, ol, ul |
Adding text or a list to a page |
| Input Panel | inputPanel |
|
| Dropdown | selectInput |
|
| Input | textInput, numericInput,
textAreaInput, passwordInput |
|
| Slider | sliderInput |
|
| File Input | fileInput |
|
| Calendar | dateInput, dateRangeInput |
|
| Checkbox | checkboxInput |
|
| Radio Buttons | checkboxInput |
|
| Button | actionButton |
|
| Output | textOutput, verbatimTextOutput,
plotOutput, imageOutput,
DTOutput, uiOutput |
bs4Dash Components| Component | {bs4Dash} Function |
Description |
|---|---|---|
| Tab | tabItem, bs4TabItem |
Adding/Removing a tab |
| Box/Card | box, bs4Card |
|
| User Box/Card | userBox, bs4UserCard |
|
| Info Box | infoBox, bs4InfoBox |
|
| Value Box | valueBox, bs4ValueBox |
|
| Block Quote | blockQuote |
|
| Callout | callout |
A few layout rules have been implemented into the application to try
and match the Bootstrap UI framework that aren’t always checked in
{shiny}.
Once the wireframe is complete, then there is the ability to save the code, either by downloading the file or copying the code. There is also the opportunity to take a screenshot to annotate further if required.