Mettre des données à jour avec un formulaire depuis Pingview

Pré-requis

  • Si c’est un formulaire créé sur Teams : assurez-vous que notre application Pingview a bien été autorisée à communiquer avec votre compte Microsoft 365. Les autorisations sont à créer par votre service informatique au niveau d’azure AD, les ID applications et secret sont nécessaires pour établir la communication, voir : Microsoft 365 (anciennement Office 365) : liaison AzureAD - Pingview.
  • Créez un jeton d’authentification à Microsoft : Créer un jeton d'authentification / accès à Microsoft. Ce dernier sera à utiliser dans les paramètres d’authentification de la source de donnée.
  • Si c’est un formulaire Airtable : Disposer d’un compte Airtable et d’une vue Formulaire
  • Si c’est un formulaire Google Form : Disposer d’un compte Google et d’avoir créer au préalable un Gooogle form
  • Avoir initialisé une intéractivité pour le clic

:hourglass: Temps nécessaire : 10 min
:thermometer: Niveau de difficulté : 4/5
:penguin: Sources de données nécessaires : 1 pour la source d’intéractivité


Rappel du contexte

Depuis un point d’affichage, vous avez la possibilité de mettre de la donnée à jour à partir d’un formulaire (Microsoft 365, Airtable, Google Form).
Dans ce contenu nous allons vous montrer comment créer ce formulaire depuis le concepteur Pingview.


Etapes

  1. Accédez au concepteur sur Pingview

  2. Créez un nouveau calque, renommez le et placez le devant les autres
    Capture d’écran 2022-02-11 à 17.03.30

  3. Insérez un Widget Forme, afin de créer un fond teinté entre votre futur formulaire et le reste de l’écran en fond
    Capture d’écran 2022-02-11 à 17.16.12

  4. Cliquez sur votre Widget Forme puis dans le menu de droite, sur le pinceau et affectez lui par exemple: le code couleur #000000B3 et l’opacité 0,7, ce qui permettra d’avoir un fond foncé et une opacité à 70% pour apercevoir tout de même le contenu arrière

  1. Ajoutez ensuite un Widget Frame
    Capture d’écran 2022-02-11 à 17.29.33

  2. Attention à bien le placer devant le widget Forme afin qu’il apparaisse devant, puis dans le menu de droite affectez lui le lien du formulaire que vous aurez créé au préalable
    Capture d’écran 2022-02-11 à 17.33.31

  3. Ajoutez à présent un Widget Texte, qui arrive au dessus du Widget Frame
    Capture d’écran 2022-02-11 à 17.34.46

  4. Affectez lui le code HTML FontAwesome suivant, tout comme l’exemple ci dessous, ce code correspond à une croix afin de nous permettra de fermer le formulaire une fois complété et validé : class="fal fa-times

  5. N’hésitez pas de modifier sa taille afin qu’il soit bien visible

  6. A présent votre arborescence de calque ressemblent à ceci :
    Capture d’écran 2022-02-11 à 17.42.09

  7. Cliquez sur chacun des widgets en restant appuyé sur la touche majuscule, afin de les sélectionner puis de les grouper, et renommez le groupe de façon à le retrouver plus facilement pour l’appeler dans les conditions :

  8. Nous allons à présent définir la condition permettant d’afficher le formulaire. Pour cela cliquez sur le groupe que vous venez de créer
    Capture d’écran 2022-02-11 à 17.49.52

  9. Puis sur Conditions en bas de l’écran

  10. La condition consiste à définir que : lorsque l’on va cliquer sur le widget qui appelle le formulaire (dans cet exemple « Edriter formulaire »), alors le formulaire s’affiche, pour cela :

SI l’intéractivité « Clic_Demo_form » est portée sur le widget que l’on a appelé (widgetname) « Editer formulaire » ALORS « Afficher » le formulaire


(Vous pouvez renommer la condition, avec le petit crayon en haut à droite de votre condition)

  1. Cliquez sur le Widget Texte de la croix afin de le rendre cliquable, en activant l’intéractivité depuis le menu de droite
    Capture d’écran 2022-02-14 à 11.20.25

  2. Cliquez à nouveau sur le groupe afin de le rendre invisible depuis le menu de droite, en déchochant "Visible"
    Capture d’écran 2022-02-14 à 11.15.51Capture d’écran 2022-02-14 à 11.17.28

  3. Afin de pouvoir continuer à travailler sur le concepteur, il est recommandé de rendre invisble le formulaire, pour cela cliquez sur le petit oeil se trouvant à côté du nom de votre calque Formulaire afin de le rendre invisible
    Capture d’écran 2022-02-14 à 11.12.27
    (Si vous souhaitez apporter des modifications aux widgets se trouvant dans le calque, il faudra le rendre visible à nouveau en cliquant à nouveau sur le petit oeil)

  4. N’hésitez pas à prévisualiser le wallboard, afin de vérifier que tout fonctionne avant de le publier, et que le formulaire s’affiche bien, puis disparait aussi simplement


A présent vous savez comment afficher et faire disparaitre un formulaire !