DocumentCardActions

[BorisDelange]

Hi,

Once again, thanks for this great package.

I've recently tried to use DocumentCard function.

I've seen in Microsoft documentation that you can use actions.

https://developer.microsoft.com/en-us/fluentui#/controls/web/documentcard

I can't manage to add Icons. Could you show me how to add Icons in DocumentCard, and handle what happens in the server side when an Icon is clicked ?

I've tried this :

library(shiny.fluent)

ui <- fluidPage({
  previewImages <- list(
      list(
        previewImageSrc = "https://picsum.photos/318/196",
        width = 318,
        height = 200
      )
    )
  
  title <- "My title"

  DocumentCard(
        DocumentCardPreview(previewImages = previewImages),
        DocumentCardTitle(
          title = title,
          shouldTruncate = TRUE
        ),
        DocumentCardActivity(
          activity = "2022-03-23",
          people = list(list(name = "Annie Lindqvist"))
        ),
        DocumentCardActions(actions = list(Icon(iconName = "Share"), Icon(iconName = "Pin"))),
        onClick = htmlwidgets::JS(paste0("function() { Shiny.setInputValue('card_id', ", 13, "); }"))
      )
})

server <- function(input, output, session){}
shinyApp(ui, server)

Thanks !

BD

[jakubsob]

Hi @BorisDelange,

please take a look at this example:

library(shiny)
library(shiny.fluent)

ui <- fluidPage({
  previewImages <- list(
      list(
        previewImageSrc = "https://picsum.photos/318/196",
        width = 318,
        height = 200
      )
    )
  title <- "My title"
  DocumentCard(
    DocumentCardPreview(previewImages = previewImages),
    DocumentCardTitle(
      title = title,
      shouldTruncate = TRUE
    ),
    DocumentCardActivity(
      activity = "2022-03-23",
      people = list(list(name = "Annie Lindqvist"))
    ),
    DocumentCardActions(
      actions = list(
        list(
          iconProps = list(iconName = "Share"),
          onClick = htmlwidgets::JS("function() { alert('share icon clicked') }")
        ),
        list(
          iconProps = list(iconName = "Pin"),
          onClick = htmlwidgets::JS("function() { alert('pin icon clicked') }")
        ),
        list(
          iconProps = list(iconName = "Ringer"),
          onClick = htmlwidgets::JS("function() { alert('ringer icon clicked') }")
        )
      )
    )
  )
})

server <- function(input, output, session) { }
shinyApp(ui, server)

When passing props to shiny.fluent components we should match the structure of JS props. In case of DocumentCardActions component the props are:

const documentCardActions = [
  {
    iconProps: { iconName: 'Share' },
    onClick: onActionClick.bind(this, 'share'),
  },
  {
    iconProps: { iconName: 'Pin' },
    onClick: onActionClick.bind(this, 'pin'),
  },
  {
    iconProps: { iconName: 'Ringer' },
    onClick: onActionClick.bind(this, 'notifications'),
  },
];

it's an array with elements being objects containing props of each individual icon. When translated to R it's a nested list:

documentCardActions <- list(
  list(
    iconProps = list(iconName = "Share"),
    onClick = htmlwidgets::JS("function() { alert('share icon clicked') }")
  ),
  list(
    iconProps = list(iconName = "Pin"),
    onClick = htmlwidgets::JS("function() { alert('pin icon clicked') }")
   ),
   list(
     iconProps = list(iconName = "Ringer"),
     onClick = htmlwidgets::JS("function() { alert('ringer icon clicked') }")
   )
)

The same approach applies to other components, I hope this is helpful