+ - 0:00:00
Notes for current slide
Notes for next slide

Licensed to ill

Extending Shiny

Garrick Aden-Buie

rstudio::conf(2020, "JavaScript for Shiny Users")

1

Questions and Follow up

  • Questions and answers to anything that came up in the first half
2

Shiny Inputs

3
4

Let's Build a Shiny Input!

We're going to do all the steps of this project together (again).

Be kind to your neighbors and help them if they get stuck.

Open up your frappeCharts Project

bit.ly/js4shiny-input

5

The Shiny Input Binding

Skeleton Snippet: bit.ly/js4shiny-input-binding

  • find() How to find your input elements on the page
6

The Shiny Input Binding

Skeleton Snippet: bit.ly/js4shiny-input-binding

  • find() How to find your input elements on the page
  • subscribe() What browser events will trigger an update from your input
7

The Shiny Input Binding

Skeleton Snippet: bit.ly/js4shiny-input-binding

  • find() How to find your input elements on the page
  • subscribe() What browser events will trigger an update from your input
  • getRatePolicy() How often to send updates back to the server
8

The Shiny Input Binding

Skeleton Snippet: bit.ly/js4shiny-input-binding

  • find() How to find your input elements on the page
  • subscribe() What browser events will trigger an update from your input
  • getRatePolicy() How often to send updates back to the server
  • getValue() What is the value of your input?
9

The Shiny Input Binding

Skeleton Snippet: bit.ly/js4shiny-input-binding

  • find() How to find your input elements on the page
  • subscribe() What browser events will trigger an update from your input
  • getRatePolicy() How often to send updates back to the server
  • getValue() What is the value of your input?
  • receiveMessage() Let the input receive messages from the server
10

The Shiny Input Binding

Skeleton Snippet: bit.ly/js4shiny-input-binding

  • find() How to find your input elements on the page
  • subscribe() What browser events will trigger an update from your input
  • getRatePolicy() How often to send updates back to the server
  • getValue() What is the value of your input?
  • receiveMessage() Let the input receive messages from the server
  • setValue() Update your HTML from server
11

Learn from checkboxInput()

bit.ly/js4shiny-checkbox

Find a partner and read through the input binding definition together.

Take turns explaining to each other what each method does:

  • find
  • getValue
  • setValue
  • subscribe
  • unsubscribe
  • getState
  • receiveMessage
05:00
12

Update .getValue()

The .value of a textarea element is a string containing the text inside the element.

Update .getValue() to

  1. Return the number of characters the user has typed (changelog: b3958d)

  2. Return the number of words the user has entered (changelog: e3fa48)

  3. Create variables for both number of characters and words and return both in an object (changelog: edfb93)

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Questions and Follow up

  • Questions and answers to anything that came up in the first half
2
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
oTile View: Overview of Slides
Esc Back to slideshow