• Outstanding User Interfaces with Shiny Book Club
  • Welcome
    • Book club meetings
    • Pace
    • Introductions
    • Before reading this book
    • What will we learn?
    • What will we be able to do?
    • Book structure
    • Getting Example code
  • 1 Shiny and the Web
    • Introduction
    • Shiny generates HTML code
    • Be a DJ
    • HTML tags basic types
    • HTML tags role types
    • Box Model
    • Flow Layout
    • Semantic tags
    • Tag attributes
    • The simplest HTML skeleton
    • The simplest Shiny skeleton
    • Document Object Model (DOM)
    • Web Inspector 101
    • First Website
    • CSS Introduction
    • HTML and CSS
    • HTML and CSS in Shiny
    • HTML and JavaScript
    • HTML and JavaScript in Shiny
    • Summary
    • 1.1 Meeting Videos
      • 1.1.1 Cohort 1
  • 2 Manipulate HTML tags from R with htmltools
    • 2.1 Writing HTML tags from R
    • 2.2 Notations
    • 2.3 Adding new tags
    • 2.4 Alternative way to write tags
    • 2.5 Playing with tags
    • Tags structure
    • Practical examples
    • Useful functions for tags
      • Add attributes
      • Check if an element has an specific attribute
      • Get the attribute value of an element
      • Replace children
      • Add child or children
      • Build your own functions
      • Other functions
      • Conditionally set attributes
      • Using the pipe operator
      • Programatically create children elements
    • 2.6 Modern {htmltools}
    • Basics
    • Query tags
    • Modify tags
      • Playing with attributes
      • Altering element/children/siblings
      • Chain tag queries
      • Specific cases
      • Practice
      • Alter tag rendering with rendering hooks
    • 2.7 Meeting Videos
      • 2.7.1 Cohort 1
  • 3 Discover Shiny dependencies
    • 3.1 Introduction
    • 3.2 Bootstrap
    • 3.3 jQuery, DOM manipulation
    • 3.4 Custom dependencies
    • 3.5 Exercise
    • 3.6 Conclusion
    • 3.7 Meeting Videos
      • 3.7.1 Cohort 1
  • 4 Handle HTML dependencies with htmltools
    • Finding a card
    • Wrapping html into a function
    • Checking the result
    • Finding dependencies
    • Adding a link on the head tag
    • includeCSS() on the head tag
    • Using htmlDependency()
    • Using htmlDependency()
    • Using htmlDependency()
    • htmlDependency() disanvantage
    • Extracting web dependencies
    • font-awesome
    • Using extracted web dependencies
    • Suppress Dependencies
    • Removing AdminLTE
    • Removing redundant dependencies
    • Insert custom script in the head
    • 4.1 Meeting Videos
      • 4.1.1 Cohort 1
  • 5 Web application concepts
    • 5.1 The client-server model
      • 5.1.1 HyperText Transfer Protocol (HTTP)
    • 5.2 About HTTP requests
    • 5.3 Structure of an URL
      • 5.3.1 Web app files structure
    • 5.4 Serving web apps
    • 5.5 About {httpuv}
    • 5.6 Shiny app lifecycle
      • 5.6.1 Building the UI
    • 5.7 Meeting Videos
      • 5.7.1 Cohort 1
  • 6 CSS for Shiny
    • 6.1 How to include CSS?
    • What does Shiny’s creator think?
    • 6.2 CSS selectors
    • 6.3 Basic
      • Select by tag name
      • Select by class or id
    • 6.4 Intermediate
      • Pseudo-class
      • Pseudo-element
      • Attributes
    • 6.5 Advanced
      • Nesting
      • Parent selector
    • Animations
    • 6.6 Layout
    • Flexbox and CSS Grid
    • Media queries
    • 6.7 BEM
    • 6.8 Meeting Videos
      • 6.8.1 Cohort 1
  • 7 Tidy your CSS with Sass
    • 7.1 Sass
      • 7.1.1 What?
      • 7.1.2 Why?
      • 7.1.3 How?
    • 7.2 {sass}
    • 7.3 Variables
    • 7.4 Partials and modules
      • 7.4.1 Why
      • 7.4.2 How
    • 7.5 Mixins and functions
      • 7.5.1 Mixins
      • 7.5.2 Functions
    • 7.6 Extend/inheritance
    • 7.7 Flow control
      • 7.7.1 if/else
      • 7.7.2 Loops
    • 7.8 Nesting code
      • 7.8.1 … with CSS
      • 7.8.2 … with Sass
    • 7.9 Meeting Videos
      • 7.9.1 Cohort 1
  • 8 Beautify with fresh
    • 8.1 SLIDE 1
    • 8.2 Meeting Videos
      • 8.2.1 Cohort 1
  • 9 Become a theming wizard with bslib
    • 9.1 SLIDE 1
    • 9.2 Meeting Videos
      • 9.2.1 Cohort 1
  • 10 JavaScript for Shiny
    • 10.1 SLIDE 1
    • 10.2 Meeting Videos
      • 10.2.1 Cohort 1
  • 11 Communicate between R and JS
    • Introductory example
    • How R and JS communicate?
    • Read JSON in R
    • Read JSON in R
    • Export JSON from R
    • Export JSON from R
    • Read and Export JSON in JS
    • What is a websocket?
    • Creating a server
    • Creating a client
    • Websocket diagram
    • Starting connection
    • Create the app
    • call: HTTP response
    • onWSOpen: websocket server
    • App example
    • Meeting Videos
      • 11.0.1 Cohort 1
  • 12 Understand and develop new Shiny inputs
    • Input bindings
    • Adding JS to UI
    • Input structure
    • Binding Shiny inputs
    • Binding Shiny inputs
    • Binding Shiny inputs
    • Binding Shiny inputs
    • Binding Shiny inputs
    • Re-create textInput
    • Re-create textInput
    • Re-create textInput
    • Re-create textInput
    • Debbuging JS methods
    • Initialize inputs
    • Get the value
    • Get the value
    • Updating Inputs From Server
    • Updating Inputs From R
    • Session Object (REMANDER)
    • Sending one value from server
    • Sending several values from server
    • Triggering the update from a buttom
    • Use the debbuger to send your own message
    • Updating outputs when typing
    • Updating outputs when clicking a buttom
    • Updating outputs when clicking a buttom
    • Setting rate policies
    • Setting rate policies
    • Register an input binding
    • Other binding methods
    • Edit an input binding
    • Edit an input binding
    • Edit an input binding
    • Capturing the state of a box in a (secundary) input
    • Capturing the state of a box in a (secundary) input
    • Capturing the state of a box in a (secondary) input
    • Capturing the state of a box in a (secundary) input
    • Capturing the state of a box in a (secundary) input
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Using Shiny.setInputValue
    • Shiny.setInputValue and Shiny JavaScript events
    • Shiny.setInputValue and Shiny JavaScript events
    • Input handlers: without getType
    • Input handlers: with getType
    • Input handlers: with getType
    • Input handlers: with getType
    • Extending input handlers with numbers
    • Extending input handlers with numbers
    • Extending input handlers with numbers
    • Extending input handlers with numbers
    • 12.1 Meeting Videos
      • 12.1.1 Cohort 1
  • 13 Shiny inputs lifecycles
    • 13.1 SLIDE 1
    • 13.2 Meeting Videos
      • 13.2.1 Cohort 1
  • 14 Mastering Shiny’s events
    • 14.1 SLIDE 1
    • 14.2 Meeting Videos
      • 14.2.1 Cohort 1
  • 15 Optimize your apps with custom handlers
    • Introduction
    • renderUI and uiOutput
    • renderUI and uiOutput Example Code
    • renderUI and uiOutput Example App
    • renderUI and uiOutput Example HTML
    • insertUI Process
    • insertUI Process
    • insertUI Process
    • insertUI Process
    • insertUI vs renderUI
    • insertUI Example Code
    • insertUI Example Code
    • insertUI Example App
    • insertUI Example App (Updated Selector)
    • Updating counters Code
    • Updating counters App
    • Custom handlers Diagram
    • Custom handlers Example Code
    • Custom handlers Example Code
    • Custom handlers Example App
    • 15.1 Meeting Videos
      • 15.1.1 Cohort 1
  • 16 Define dependencies
    • 16.1 SLIDE 1
    • 16.2 Meeting Videos
      • 16.2.1 Cohort 1
  • 17 Create template elements
    • 17.1 SLIDE 1
    • 17.2 Meeting Videos
      • 17.2.1 Cohort 1
  • 18 Develop custom input widgets
    • Tabler action button
    • Tabler action button
    • Tabler action button
    • Tabler action button
    • Toggle Switch
    • Toggle Switch
    • Toggle Switch
    • Toggle Switch
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • 18.1 Meeting Videos
      • 18.1.1 Cohort 1
  • 19 Adding more interactivity
    • 19.1 SLIDE 1
    • 19.2 Meeting Videos
      • 19.2.1 Cohort 1
  • 20 Testing and validating templates elements
    • 20.1 SLIDE 1
    • 20.2 Meeting Videos
      • 20.2.1 Cohort 1
  • 21 Automate new template creation with charpente
    • 21.1 SLIDE 1
    • 21.2 Meeting Videos
      • 21.2.1 Cohort 1
  • 22 Introduction
    • 22.1 SLIDE 1
    • 22.2 Meeting Videos
      • 22.2.1 Cohort 1
  • 23 Reconstruct shinyMobile
    • 23.1 SLIDE 1
    • 23.2 Meeting Videos
      • 23.2.1 Cohort 1
  • 24 shinyMobile and PWA
    • 24.1 SLIDE 1
    • 24.2 Meeting Videos
      • 24.2.1 Cohort 1
  • 25 Design widgets
    • 25.1 SLIDE 1
    • 25.2 Meeting Videos
      • 25.2.1 Cohort 1
  • 26 Fine tune shinyMobile
    • 26.1 SLIDE 1
    • 26.2 Meeting Videos
      • 26.2.1 Cohort 1
  • 27 Shiny and React with reactR
    • 27.1 SLIDE 1
    • 27.2 Meeting Videos
      • 27.2.1 Cohort 1
  • 28 Divide and Conquere
    • 28.1 SLIDE 1
    • 28.2 Meeting Videos
      • 28.2.1 Cohort 1
  • 29 What to do next
    • 29.1 SLIDE 1
    • 29.2 Meeting Videos
      • 29.2.1 Cohort 1
  • Published with bookdown

Outstanding User Interfaces with Shiny Book Club

Navbar menu input

To capture the currently selected tab to subsequently perform actions on the server side, updating the selected tab based on a button click.

  1. Add an id attribute to tabler_navbar_menu().
tabler_navbar_menu <- function(..., id = NULL) {
  tags$ul(
    id = id, 
    class = "nav nav-pills navbar-nav",
    ...
  )
}
  1. Create the JS navbarMenuBinding looking for the navbar-nav class in the find method.
find: function(scope) {
  return $(scope).find('.navbar-nav');
}