Affichez un formulaire sur votre wallboard

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 Table : Disposer d’un compte Table 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 (Table, Excel, Google Form).

Dans ce contenu, nous allons vous montrer comment créer ce formulaire depuis le concepteur Pingview.


Étapes

  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 !