{"componentChunkName":"component---src-components-tutorials-js","path":"/tutorials/data-editor/","result":{"data":{"markdownRemark":{"html":"

Contents

\n
    \n
  1. Why would I need this?
    2. \n
  2. \n

    How does the app work?

    \n
      \n
    1. Defining the features
      2. \n
    2. Building the UI
      3. \n
    3. \n

      Building the server

      \n
        \n
      1. Loading data
        2. \n
      2. Application Defaults
        3. \n
      3. Events for View and Cancel
        4. \n
      4. Editing mode
        5. \n
      5. Saving data
        6. \n
      \n
      4. \n
    \n
    3. \n
  3. How can I run the demo?
    4. \n
\n\n\n

Why would I need this?

\n

I created this example in response to a question that I had while working on a project: \"How can I edit a dataset in a shiny app?\"

\n

Editing data in a shiny application would be pretty useful as the changes could automatically be reflected in the visualizations, text, or other elements. This would also eliminate the need for editing values using other tools and duplicating files.

\n

In this tutorial, we will create a data editor shiny application using the rhandsonpackage.

\n\n

How does the app work?

\n

To get the shiny app running, we will develop our application step-by-step. First, we build our UI and then write then server code to handle all of the features we want in our app.

\n

In this example, we will using a subset of the NYC Dog Licensing Dataset. I randomly pulled 100 rows from the file. See the script data_0_source.R in the scripts/ folder for the code. I did not include the full dataset as it's quite large. Use the link above to download the file and adjust the script as necessary.

\n\n

Defining the features

\n

To start off, we should make a list of things we want the application to do. For example, when we load the application, what do we want to see first?

\n
    \n
  1. viewer: When the app loads, it would be nice to display the data in a table. We probably do not want to encourage users to edit data right away, but have it as a feature. In your application, it might be a good idea to create user groups to control who can edit data.
    2. \n
  2. editor: Since the data will be displayed as view only by default, it would be nice to have something that starts the editing mode. A button would be perfect for this.
    3. \n
  3. cancel: A cancel feature would be perfect for this application. For example, if a user enters the wrong information or decides not to edit data, then it would be useful to have a way to discard the changes and exit the editing mode.
    4. \n
  4. save: Most importantly, we will need an option that saves our data. We might also want to archive previous versions in the event we need to undo changes.
    5. \n
  5. refresh: Once the changes have been saved, we will need to refresh the application so the changes can be reflected in the table.
    6. \n
\n

For now, we will focus on these items. This list gives us some basic features for our designing the interface.

\n\n

Building the UI

\n

Using the list of features, let's figure out how to structure the interface. Since we five key actions in our app (view, edit, cancel, save, and refresh), we can use buttons as we want to trigger events on demand. The buttons should be positioned in a \"settings panel\" and then the main area of the app should display the data table.

\n

The best option for the layout would be the sidebarLayout. This would allow us to put all the buttons in the sidebarPanel and render the table in the mainPanel.

\n
ui <- fluidPage(\n\n    # use shinyjs\n    shinyjs::useShinyjs(),\n\n    # app title\n    titlePanel(\"Data Editor\"),\n\n    # main layout\n    sidebarLayout(\n\n        # sidebar\n        sidebarPanel(\n            helpText(\"What would you like to do?\"),\n            \n            # buttons: view, edit, cancel, save, refresh\n            actionButton(\"view\",label = \"view\", icon=icon(\"binoculars\")),\n            actionButton(\"edit\",label = \"edit\", icon=icon(\"pencil\")),\n            shinyjs::hidden(\n                actionButton(\"cancel\", label = \"cancel\", icon=icon(\"times\")),\n                actionButton(\"save\", label = \"save\", icon=icon(\"save\")),\n                actionButton(\"refresh\", label = \"refresh\", icon = icon(\"refresh\"))\n            )\n        ),\n\n        # main panel\n        mainPanel(\n            tags$h2(textOutput(\"helperText\")),\n            DT::dataTableOutput(\"dt_view\"),\n            rhandsontable::rHandsontableOutput(\"dt_edit\")\n        )\n    )\n)
\n

It's important to note the use of shinyjs::hidden. When the application loads, cancel, save and refresh only apply to the editing mode. We will hide these buttons by default and show them as necessary.

\n

In the main panel, there are two table outputs: one for DT and one for the rhandsontable output. In the server, we will use the shinyjs package to hide and show the tables. There's likely a better way to render the tables, but for now, this will help us get the application running.

\n

Take at look at the heading.

\n
tags$h2(textOutput(\"helperText\"))
\n

The header will receive text output from the server. We will update the text depending on the current mode the user is in (i.e., viewer or editor).

\n

We will also create two prompts, or modals using the shinyBS package. The first modal will be triggered when the save button is clicked and will ask the user, \"are you sure you want to save the changes?\". If the user clicks yes, then the save function will run. Once the file is saved, a confirmation message will appear (all changes were saved) and prompting you to refresh the app to view the changes. I'll put these before the titlePanel.

\n
# dialogue box: 'Are you sure you want to save changes?'\nbsModal(id = \"savePrompt\",  title = \"Do you want to save changes?\", trigger =\"save\",  size = \"small\",\n    wellPanel(    \n        helpText(\"Saving will overwrite existing data! This cannot be undone.\"),\n        actionButton(inputId = \"no\", label =  \"No\"),\n        actionButton(inputId = \"yes\",label = \"Yes\")\n    )\n),\n                \n# dialogue box: 'Changes were saved'\nbsModal(id = \"saveSuccess\", title = \"Save was successful!\", trigger = \"yes\", size = \"small\",\n    wellPanel(\n        helpText(\"Changes were saved successfully. Refresh the page for changes to take effect.\")\n    )\n)\n...
\n\n

Building the server

\n

In the shiny server server, we will define five elements.

\n
    \n
  1. load the data: You can source data using a file input widget, from a repository, or a database. In this example, we will use the file located in the data folder.
    2. \n
  2. defaults: We will need to define the application defaults such as setting the default view for the table, titles, and other variables that we will use in the server.
    3. \n
  3. view and cancel: To simply things, we will create a single event that resets the app to view mode when the view button or cancel button is clicked.
    4. \n
  4. edit: When the edit button is clicked, this will render the dataset as an editable table and start watching for changes. We will also update the ui by hiding and showing buttons and updating the title to \"edit mode\".
    5. \n
  5. save: Lastly, we when the user is finished making changes, we will run some code to archive the pre-changed data and save the edited data as the new master file.
    6. \n
\n\n

Load data

\n

In this example, I'm using a subset of the dataset NYC Dog Licensing Dataset which I saved to an rds file.

\n
nycDogs <- readRDS(\"data/nyc_dogs.RDS\")
\n

The reason I mention this is that this application uses the file as the source of truth and will write changes to this file. By default, the pre-changed data is timestamped and archived in the data/archived/ folder. We will revisit this a little bit later.

\n\n

Application Defaults

\n

Next, we will set the defaults for the application. We will set the default mode (view mode) for the data table and update the title. In addition, we will initiate the reactive object for the changes in editor mode and define the event for page refresh.

\n
# orientation text: mode - view vs edit\noutput$helperText <- renderText(\"View Mode\")\n    \n# datatable default render\noutput$dt_view <- DT::renderDataTable({\n        DT::datatable(nycDogs, selection=\"none\")\n})\n    \n# initiate values for edits\nvalues <- reactiveValues()\n    \n# define refresh\nobserveEvent(input$refresh, {\n    shinyjs::runjs(\"history.go(0)\")\n})
\n\n

Events for View and Cancel

\n

In the app, we want to give the user the change to exit the editor and go back to the viewer. In the ui, the two buttons view and cancel will be used to trigger this behavior. To make things easier, we can create one event for both buttons. This event will exit the editor and display the normal data table. We will also hide the save and cancel buttons as we are no longer in editing mode.

\n
observeEvent({\n    input$view\n    input$cancel\n    },{\n    shinyjs::show(\"view\")\n    shinyjs::show(\"edit\")\n    shinyjs::hide(\"cancel\")\n    shinyjs::hide(\"save\")\n    shinyjs::show(\"dt_view\")\n    shinyjs::hide(\"dt_edit\")\n        \n    # modifying header text\n    output$helperText <- renderText(\"View Mode\")\n\n    ...\n)}
\n\n

Editing mode

\n

Let's focus on the editing mode. First, we will remove the normal data table and show the rhandsontable output, as well as display the save and cancel buttons. We will also update the title to inform the user that there are in editing mode.

\n
observeEvent(input$edit, {\n    shinyjs::hide(\"view\")\n    shinyjs::hide(\"edit\")\n    shinyjs::show(\"cancel\")\n    shinyjs::show(\"save\")\n    shinyjs::hide(\"dt_view\")\n    shinyjs::show(\"dt_edit\")\n    \n    # update the helperText: \"You are now in edit mode\"\n    output$helperText <- renderText(\"Edit Mode\")\n    ...\n})
\n

The following code allows us to make changes and directly render the changes in the ui. It also stores the changes into our reactive object values. We will use this object in the render function and send the output to the UI.

\n
# set reactive object for rhandsontable output\ndata <- reactive({\n    if(!is.null(input$dt_edit)){\n        DF = hot_to_r(input$dt_edit)\n    } else {\n        if(is.null(values[[\"DF\"]])){\n            DF = data.frame(nycDogs)\n        } else {\n            DF = values[[\"DF\"]]\n        }\n    }\n    \n    values[[\"DF\"]] = DF\n    DF\n})\n\n# render table\noutput$dt_edit <- rhandsontable::renderRHandsontable({\n    DF = data()\n    if (!is.null(DF)){\n        rhandsontable(DF, stretchH = \"all\")\n    }\n})
\n\n

Saving data

\n

Before we write the data, it would be useful to save a backup of the master file - just in case we need to undo something or for validation. Since we want to save the data after the user has been prompted and has selected \"yes\", we will wrap this an event for input$yes. We do not need an event for save as the shinyBS package handles the opening and closing of prompts. We will also hide the save and cancel buttons and display the refresh button.

\n
# When yes is clicked, save data as RDS\nobserveEvent(input$yes,{\n        \n    # close popup \n    toggleModal(session, modalId = \"savePrompt\", toggle = \"close\")\n        \n    # closing: hide save buttons\n    shinyjs::hide(\"save\")\n    shinyjs::hide(\"cancel\")\n    shinyjs::show(\"refresh\")\n    \n    # save to RDS, but backup previous versions\n    if(file.exists( \"data/nyc_dogs.RDS\" )){\n\n        # c = file prefix & date & RDS\n        file.rename(\n            from = \"data/nyc_dogs.RDS\",\n            to = paste0(\"data/archive/nyc_dogs_\",format(Sys.time(),\"%Y%m%d-%H%M%S\"),\".RDS\")\n        )\n\n        # replace base file name with latest version\n        saveRDS(out, \"data/nyc_dogs.RDS\")\n\n    } else{\n        saveRDS(out, \"data/nyc_dogs.RDS\")\n    }\n})
\n

Once the save event runs, the user will receive a notification saying that the file was saved and will inform the user to refresh the page. When the page is refreshed, the master file will be reloaded and the previous version will be uneffected as it is now stored in the archive folder.

\n

That is it! Run the app and edit the data.

\n\n

How can I run the demo?

\n

The source code is available on github. Alternatively, you can run the demo in R using the following code.

\n
install.packages(\"shiny\")\nshiny::runGitHub(repo=\"shinyAppTutorials\",username=\"davidruvolo51\", subdir=\"Data-Editor\")
","frontmatter":{"title":"Data Editor","subtitle":"A shiny app for editing data in a shiny app","abstract":"Have you ever wanted to edit data in a shiny app? Learn how to build a shiny app for editing data and saving changes to file, and then reloading the changes into your app.","date":"2018-03-01","updated":"2019-11-21","keywords":["rhandsontable"]},"fields":{"readingTime":{"minutes":9.175}}}},"pageContext":{"slug":"/tutorials/data-editor/"}},"staticQueryHashes":["63159454"]}