Comment faire un composant shiny

library(shinygouv)

Si vous êtes sur le développement d’un nouveau composant, il faut s’assurer de la version du dsfr utilisé actuellement :

desc::desc_get("VersionDsfr")

Vous devriez trouver un dossier dans “inst/” avec le bon numéro de version. Si ce n’est pas le cas, suivre la vignette Montee en version du dsfr : trouver les fichiers CSS et JS.

Si vous êtes sur une montée de version, les dossiers devraient déjà être prêts.

Développement d’un composant avec interaction shiny

Pour expliquer le workflow de ce package, nous allons détailler comment développer le futur actionButton().

Ici nous prenons l’exemple d’un composant développé pour la version 1.7.2 du dsfr.

Première étape 

<button class="fr-btn">Label bouton</button>

Deuxième étape

  • Modifier le code html pour mettre les paramètres nécessaires à son bon fonctionnement dans {shiny}

    • Ajouter un id pour le futur inputId
    • Ajouter la classe permettant de déclencher l’évènement côté {shiny}
    • Ajouter/Remplacer aussi les autres paramètres nécessaires à la personnalisation du composant

Après retravail sur le composant actionButton(), voici son template html:

<button id={{inputId}} class="fr-btn action-button {{class}}">{{label}}</button>
Exemple avec le actionButton()

Dans notre cas, nous traitons le actionButton() et la classe a ajouter est action-button.
Comment savoir ?

Le plus simple est d’exécuter la fonction de l’input dans shiny dans la console :

shiny::actionButton("test", "test")
`<button id="test" type="button" class="btn btn-default action-button">test</button>`

On observe alors que dans “class” nous avons des classes liées à bootstrap btn-* et une classe à part action-button. C’est souvent cette classe qui permet de déclencher l’évènement coté server. Si cela n’est pas suffisant, il faudra chercher dans le code du package {shiny}. Le code se trouve ici et en ouvrant le fichier .ts vous trouverez alors un endroit ou on recherche la classe qui active l’input :

  find(scope: HTMLElement): JQuery<HTMLElement> {
    return $(scope).find(".action-button");
  }

Troisième étape

  • Créer la fonction qui permettra d’utiliser ce nouveau bouton :

    • Copier/coller le flat se trouvant dans dev/flat_composants/flat_new_one.Rmd dans dev/flat_composants/ et le renommer “flat_nom_du_composant_shiny.Rmd”. Dans cet exemple, flat_actionButton.Rmd.
    • Dans votre nouveau flat, il faut remplacer “nom_composant_shiny” par le nom du composant shiny (dans cet exemple, actionButton).
    • Changer le chemin du fichier de votre .html dans la fonction *_template.
    • Compléter les paramètres et leur documentation dans vos fonctions selon la personnalisation de votre .html.
    • Adapter les tests unitaires en fonction des paramètres choisis (y compris la date du snapshot).
    • Puis lancer le dernier chunk fusen::inflate().

Voir exemple dev/flat_composants/flat_actionButton.Rmd

/!\ Attention: Ayez une attention particulière pour les tests unitaires qui sont la garantie du bon fonctionnement du package.

Quatrième étape

  • Créer la fonction qui permettra de mettre à jour votre input (si nécessaire).
  • Certains composants comme l’ actionButton() n’ont pas besoin de mise à jour, c’est le cas pour beaucoup d’autres composants.
  • Certains fonctions de mise à jour de composants correspondent en fait à l’appel de la fonction native shiny correspondante (voir par ex updateNumericInput_dsfr()).
  • Pour certains composants non présents nativement dans shiny, des implémentations adhoc ont dû être réalisées (voir par ex updateRadioGroupButtons_dsfr()).
    • Dans ce cas précis il faut être vigilant sur l’utilisation de la fonction ns() dans le nom des inputId. Il est indispensable de prendre en compte la fonction ns() partout, sauf dans le cas d’un appel à la fonction shiny session$sendInputMessage() car le ns() est géré en interne. Le plus simple reste d’observer la fonction updateRadioGroupButtons_dsfr().

Cinquième étape

Lorsque l’implémentation de votre nouveau composant dsfr est terminée :

La colonne composant_shiny restera vide si le composant dsfr n’a pas d’équivalent dans {shiny}.

Cette table de correspondance permettra le bon déroulement de la conversion d’une app shiny en une app shiny dsfr (en utilisant convert_to_dsfr())

Vous pouvez également ajouter votre composant dans l’application de démonstration.