How do i send information from R to JS (Shiny) and use this information as UI?

Question

I want to integrate a button in the header of my shinyapp (which acts as a news button). I want this button to contain information from my then used dataset, so that the user knows there is so-and-so's news (inspired by the way shinyDashboard::notificationItem() does this; just more customized). So I'm looking for a way to output the '5' in my app example as a character in the button, so that the button contains the text: 'News (5)'. Iam very new to JS so i dont know how to even paste 'News' + '5'.

The button would then render some new UI with the actuall news, but that is for later.

Thanks for any help!

library(shiny)

ui = navbarPage(title = "Dashboard", 

  tags$script(
    HTML(
      "Shiny.addCustomMessageHandler(
        type = 'num', function(message) {
          var ok = message
          var header = $('.navbar > .container-fluid');
          header.append('<div><input value = ok type = \"button\" class = \"btn action-button\"></div>');
        });"
      
    )
  )
  
)
server = function(input, output, session){
  
  session$sendCustomMessage(type = "num", message = 5)
 
  

}
shinyApp(ui, server)

Answer 1

In JavaScript, one concatenates strings with + .

  tags$script(
    HTML(
      "Shiny.addCustomMessageHandler(
        type = 'num', function(message) {
          var ok = 'News (' + message + ')';
          var header = $('.navbar > .container-fluid');
          header.append('<div><button class = \"btn btn-primary action-button\">' + ok + '</button></div>');
        });"
    )
  )

Answer 2

you can also try something like this

ui <- navbarPage("Dashboard",
                 header = tags$script(
                   HTML("var header = $('.navbar > .container-fluid');
                        header.append('<div style=\"float:right; padding-top: 8px\"><button id=\"btn_top\" type=\"button\" class=\"btn btn-primary action-button\" onclick=\"signIn()\">Show me</button></div>')")
                 ),
                tabPanel("Data",
                         radioButtons("select", "choose label", choices = 1:3, inline = T))
)



server <- function(input, output, session) {
  
  observeEvent(input$select, {
    updateActionButton(session,"btn_top", label = paste0("News (", input$select, ")"))
  }, ignoreInit = T)

}

shinyApp(ui, server)