Use Shiny to create a checkbox list?

[Andrea]

PREMISE: I always wanted to learn about Shiny, but I'm an absolute beginner for what it regards web apps (I know nearly nothing about HTML, Javascript, reactive programming, events, etc.), so it may well be that my question doesn't make sense and/or Shiny is not the right tool for it. Feel free to tell me I got it all wrong, in that case.

I'd like to have a simple web page with a checkbox list (not sure if this is the right term). Basically, it's a 2D ragged array, i.e., a "matrix" where however the number of columns is different for each row. The rows corresponds to friends (Mary, Ann, George, etc.). Each row should contain a list of checkboxes corresponding to various objects (mitts, book, wine, etc.). The objects can be different for different rows.

I would like the user to be able to click on one of the objects: at that point, the corresponding cell should get highlighted (i.e., if its background was cyan now it would become, say, teal). The whole row would also get highlighted (maybe of a different color? Dunno). It shouldn't be possible to click more than one object for row. So if I click on mitts and then on book, mitts should become unchecked, while book should become checked. Of course, the row would stay highlighted. Now, if I click again on book (i.e., I uncheck it), the row should not be highlighted anymore (there are no objects selected for that row).

Finally, it could be nice to be able to show an image or some text once all rows are highlighted (i.e., one object for each row has been checked).

1. Is it doable?
2. How much work would it be?

Feel free to redirect me to tutorials, videos, etc., if the answer would be too long, or if it's so basic that you don't want to repeat basic stuff

[barret]

Hi @Andrea

This is very doable in Shiny. I'm going to give you a set of functions to take a look at and hopefully be able piece it together. It is not a trivial app, but it is not unrealistic.

Ideas:

• Layout
  • I'd set it up using tags$table(), tags$tr() and tags$td() (All html tags exist... only some are documented here: https://www.rdocumentation.org/packages/htmltools/versions/0.3.6/topics/builder). Each cell of the table could then contain a single "checkbox" with label.
• Shiny hooks:
  • single checkbox: https://shiny.rstudio.com/reference/shiny/1.2.0/checkboxInput.html
    • Set the id to be something that is a combination of the name and the item, ex: check_Mary_mitts.
    • Within the server function, I would imagine a observeEvent method (https://shiny.rstudio.com/reference/shiny/1.2.0/observeEvent.html) that is nested inside two for-loops (one for the people and the other for the items, skipping impossible combinations) to listen for the changes for each individual check box. This method would then prolly update an R object that knows about all of the check boxes.
  • uncheck single checkboxes: https://shiny.rstudio.com/reference/shiny/1.2.0/updateCheckboxInput.html
    • This will allow you to "uncheck" other elements in the row. Once unchecked, the regular single checkbox event should take care of updating your "knows all" R object.

The color in the background is a little harder to implement. (Involves css and more complex renderUI setup. Easier to update a working app than to try and learn it all at once.)

Please check back in once you've got the checkboxes how you'd like them! So that I can also see what you're seeing, please follow this guide to produce a reprex, thank you! Shiny debugging and reprex guide