ONLYOFFICE : apprendre comment intégrer des formulaires à remplir dans une page Web

Daria Lapikhina

Pour réagir au contenu de cet article, un espace de dialogue vous est proposé sur le forum. Commentez

- Titre : ONLYOFFICE : apprendre comment intégrer des formulaires à remplir dans une page Web

- Auteur : Daria Lapikhina

- Parution : 25 mars 2022

- Licence : Copyright ® 2022 Daria Lapikhina . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Formulaires ONLYOFFICE, qu’est-ce que c’est ?

- III. Ouvrir le modèle de formulaire au format DOCXF pour le modifier à partir d’une page Web

- IV. Ouvrir le formulaire au format OFORM pour le remplir à partir d’une page Web

- V. Désactiver la coédition

- VI. Disponibilité

- VII. Remerciements Developpez.com

I - Introduction

Cet article explique comment intégrer un formulaire dans une page Web. Par exemple, vous avez une page Web et vous voulez qu'elle affiche un formulaire qui peut être rempli et téléchargé en tant que PDF. Il faut que chacun puisse ouvrir le formulaire et le remplir sans déranger les autres, et donc sans avoir à collaborer sur le dossier. Nous vous montrons l'exemple de la suite bureautique open source ONLYOFFICE et de sa fonctionnalité de formulaires récemment introduite.

II - Formulaires ONLYOFFICE, qu’est-ce que c’est ?

Avec formulaires ONLYOFFICE, vous pouvez créer, modifier et éditer de manière collaborative des documents avec des champs à remplir en ligne et de les envoyer à d'autres personnes pour qu'elles les remplissent.

Il est possible de créer des modèles de formulaires de toutes pièces ou à partir de fichiers DOCX existants. Vous pouvez insérer divers champs (champ de texte, boîte combo, liste déroulante, case à cocher, bouton radio, image) et modifier leurs propriétés, et en même temps les éditer comme n'importe quel document bureautique ordinaire. Consultez ce tutoriel pour apprendre à créer des formulaires étape par étape.

Vous pouvez enregistrer le fichier au format DOCXF pour créer, modifier et collaborer sur le fichier avec votre équipe. Le document final peut être enregistré aux formats OFORM ou PDF. Le premier est un format conçu pour l'envoi en ligne de formulaires à remplir. Dans ce format, l'utilisateur ne peut remplir que les champs obligatoires, le texte lui-même ne peut pas être modifié. L'enregistrement du fichier dans le format PDF permet de remplir le document avec les logiciels standard.

III - Ouvrir le modèle de formulaire au format DOCXF pour le modifier à partir d’une page Web

Trouvez et ouvrez le fichier index.html du serveur de documents ONLYOFFICE. Puis connectez-le à l'API du serveur de documents. Vous devez spécifier les paramètres de configuration pour ouvrir le modèle de formulaire (fichier DOCXF).

1. <script type="text/javascript"

2. src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script>

3. <button onclick="open_form_template()">Open Form Template</button>

4. <div id="placeholder"></div>

5. <script>

6. function open_form_template() {

7. // Close the editor in case it is open.

8. if (this.docEditor) {

9. this.docEditor.destroyEditor()

10. }

11. // Add the link to the form template you need to open.

12. const url = window.location.protocol + "//" +

13. window.location.hostname + “:” + window.location.port + ”/” + filename + ”.docxf”;

14. // Add the key to identify the file for co-editing.

15. const key = filename + ”.docxf”;

17. // Create DocsAPI object and open the editor.

18. this.docEditor = new DocsAPI.DocEditor("placeholder",

19. {

20. “document”: {

21. “fileType”: “docxf”,

22. “key”: key,

23. “title”: “Form Template”,

24. “url”: url

25. },

26. “documentType”: “word”

27. });

28. }

29. </script>

Une fois fait, un modèle de formulaire peut être ouvert pour être édité. Après avoir modifié ce document, vous pouvez enregistrer le formulaire. Pour ce faire, cliquez sur le bouton « Enregistrer comme OFORM ».

IV - Ouvrir le formulaire au format OFORM pour le remplir à partir d’une page Web

Vous devez ajouter un bouton nommé Open Form qui ouvre le formulaire à remplir. Ensuite, ajoutez la fonction open_form_template().

1. <script type="text/javascript"

2. src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script>

3. <button onclick="open_form()">Open Form</button>

4. <div id="placeholder"></div>

5. <script>

6. function open_form_template() {

7. // Close the editor in case it is open.

8. if (this.docEditor) {

9. this.docEditor.destroyEditor()

10. }

11. // Add the link to the form you need to open.

12. const url = window.location.protocol + "//" +

13. window.location.hostname + ”:” + window.location.port + ”/” + filename + ”.oform”;

14. const key = filename + ”.oform”;

16. // Create DocsAPI object and open the editor.

17. this.docEditor = new DocsAPI.DocEditor("placeholder",

18. {

19. “document”: {

20. “fileType”: “oform”,

21. “title”: “Form”,

22. “url”: url

23. },

24. “documentType”: “word”

25. });

26. }

27. </script>

Maintenant, un formulaire peut être ouvert pour être rempli. Après avoir saisi les valeurs dans les champs (ceux qui sont obligatoires sont mis en évidence par une bordure rouge), vous pouvez obtenir un fichier PDF à partir de l'éditeur. À cet effet, cliquez sur le bouton « Télécharger comme ».

V - Désactiver la coédition

Il faut tenir compte du fait que le champ clé n'est pas transmis à la configuration des éditeurs dans la méthode d'ouverture d'un formulaire à remplir. Ce champ sera automatiquement généré comme un nombre aléatoire. Cela permet de rendre indépendantes toutes les sessions d'ouverture du formulaire. Ainsi, la collaboration sur le fichier du formulaire est désactivée. Personne ne pourra remplir votre copie du formulaire avec vous.

VI - Disponibilité

Les formulaires ainsi que les éditeurs pour les documents texte, les feuilles de calcul et les présentations peuvent être ajoutés à votre propre solution. ONLYOFFICE peut être intégré avec WOPI ou API. Les développeurs de la solution proposent aussi les connecteurs prêts à l'emploi pour Nextcloud, ownCloud, Alfresco, Confluence, eXo, Moodle, xWIKI, Seafile, Chamilo, Nuxeo et autres.

Outre la version en ligne de ONLYOFFICE Docs, les formulaires peuvent également être traités dans les applications de bureau, qui sont disponibles sur tous les systèmes Windows, Linux et macOS. De même, les applications mobiles peuvent être utilisées pour remplir rapidement les formulaires en déplacement.

Pour mieux comprendre ce que sont les formulaires et comment se présentent les documents remplis, une bibliothèque de formulaires gratuite est disponible sur le site Web onlyoffice.

VII - Remerciements Developpez.com

Nous tenons à remercier Malick pour la mise au gabarit et escartefigue pour la relecture orthographique.