Documentation pour la conception de base de données
Comment pouvons-nous vous aider ?
Recherche intégrale du site

Intégration web

Que sont les plug-ins de site web ?

Les applications Ragic sont livrées avec divers plug-ins utiles pouvant être intégrés à votre site web ou partagés sous forme de liens. Ces plug-ins sont automatiquement disponibles lorsque vous créez des feuilles dans vos applications.

Vous pouvez ainsi intégrer des formulaires sur votre site web qui seront enregistrés dans votre base de données une fois soumis, donner à vos clients et à vos partenaires la possibilité de faire des recherches dans votre base de données ou même de visualiser l'ensemble de son contenu.

Intégration de votre base de données avec l'outil d'intégration web

Pour voir les plug-ins de site web disponibles, cliquez sur le menu Outils sur la page liste ou formulaire, puis, sous Partager, sélectionnez Intégrer cette feuille .

Vous pouvez alors choisir parmi les six types de plug-ins fournis.

Une fois que vous avez suivi les étapes de l'assistant, Ragic vous fournira un code HTML que vous pouvez copier et coller à l'endroit où vous souhaitez intégrer le plug-in sur votre site web. Vous allez également obtenir un lien vers le formulaire que vous pouvez directement partager pour utiliser le plug-in en tant que page autonome.

Ragic prend également en charge l'intégration sur WordPress avec un plug-in dédié à WordPress.

Types de plug-ins

Décider de l'apparence qu'aura votre base de données pour vos utlisateurs vous guidera dans le choix du type de plug-in à utiliser. Voici un guide rapide pour choisir le bon plug-in en fonction de vos objectifs (cliquez sur le nom du plug-in pour plus d'informations).

Nom Objectif
(1) Visualiseur de base de données Une liste simple de toutes vos entrées dans votre feuille, accessible aux utilisateurs de votre site web, avec trois mises en page différentes au choix.
(2) Requête de base de données Affiche des champs de requête permettant aux utilisateurs de faire des requêtes pour rechercher des entrées dans votre base de données.
(3) Formulaire de base de données Affiche un formulaire d'entrée de base de données vide permettant aux utilisateurs de soumettre des formulaires, qui seront ensuite sauvegardés en tant qu'enregistrement dans votre base de données.
(4) Chercher dans la base de données Affiche une boîte de recherche qui permet des recherches par mot-clé pour les entrées de votre feuille de base de données.
(5) Visualiseur et requête de base de données Affiche des champs de requête permettant aux utilisateurs de créer des requêtes pour rechercher des entrées dans votre base de données. Les résultats de la recherche seront affichés ci-dessous.
(6) Intégration brute Intègre votre base de données dans un iframe avec l'interface utilisateur Ragic telle que vous la voyez sur votre compte.

Une fois que vous avez choisi le type de plug-in web, vous pouvez également ajuster la mise en page pour chaque type d'intégration avec du CSS personnalisé.

(1) Visualiseur de base de données

Le visualiseur de base de données est une liste simple de toutes les entrées auxquelles les utilisateurs de votre site web ont accès.

Vous pouvez accorder l'accès à vos entrées en réglant les paramètres des droits d'accès de Ragic, ce qui vous donne également la possibilité de rendre l'intégralité de la base de données publique si nécessaire.

Après avoir sélectionné "Visualiseur de base de données" comme type d'intégration web, vous pouvez configurer différents types de mises en page indiqués ci-dessous lors de la première étape.

Les utilisateurs peuvent facilement accéder à des informations détaillées en cliquant sur les entrées affichées. Cette action les dirigera vers la page formulaire correspondante, offrant une vue approfondie de l'enregistrement sélectionné. Ce processus de navigation est similaire à la transition habituelle entre une page liste et une page formulaire dans l'interface principale.

Types de mise en page pour la visionneuse de base de données

La mise en page en tableau affiche vos enregistrements sous forme de liste épurée, selon la présentation que vous avez choisie pour votre page liste.

La mise en page en bloc offre une flexibilité accrue en affichant vos enregistrements en lignes en fonction des champs que vous choisissez dans cette configuration. Passez simplement votre souris sur les champs affichés dans l'aperçu pour changer le champ associé.

La mise en page en album est adaptée si vous avez des images dans votre base de données. Cette mise en page affiche une image sous forme de vignette, et vos enregistrements seront disposés en grille. Tout comme avec la mise en page en bloc, vous pouvez survoler les champs affichés pour changer les champs auxquels ils sont associés.

(2) Requête de base de données

Le formulaire de requête de la base de données permet à vos utilisateurs d'effectuer des requêtes dans votre base de données Ragic en utilisant les critères disponibles pour chaque champ que vous décidez d'ajouter.

Vous pouvez choisir quels champs de requête seront affichés par défaut et l'ordre dans lequel vous souhaitez que les champs apparaissent sur la page de configuration. Pour ce faire, cliquez sur "Définir le champ de requête par défaut".

Les champs de requête s'adaptent automatiquement aux types de champs présents dans votre feuille. Par exemple, un champ de sélection dans votre feuille se traduira par un menu déroulant dans le formulaire de requête. Cette fonctionnalité permet aux utilisateurs de formuler des requêtes précises en sélectionnant plusieurs catégories si nécessaire.

Une fois la requête soumise, les utilisateurs de votre formulaire pourront visualiser les enregistrements qui correspondent à leurs critères de requête avec le type de mise en page de visualiseur de base de données que vous choisissez lors de l'étape suivante.

Pour un accès à des informations plus détaillées, les utilisateurs peuvent simplement cliquer sur les entrées affichées dans les résultats. Cette action les dirigera vers la page formulaire correspondante, offrant une vue approfondie de l'enregistrement sélectionné. Ce processus de navigation est similaire à la transition classique entre une page liste et une page formulaire dans l'interface principale.

Mode Requête exacte de base de données

Le paramètre Mode exact est disponible pour la Requête de base de données et la Requête de visionneuse de w & base de données. Avec ce paramètre, les utilisateurs ont la possibilité de rechercher des données en entrant une requête exacte, même si votre feuille n'est pas accessible au public. Pour plus d'informations, veuillez consulter cet article.

(3) Formulaire de base de données

Le formulaire de base de données vous offre la possibilité d'intégrer un formulaire que vos utilisateurs peuvent remplir. Les formulaires seront automatiquement enregistrés en tant qu'entrées dans votre base de données lorsqu'ils sont soumis par vos utilisateurs.

Après avoir choisi "Formulaire de base de données" comme type d'intégration web, vous pouvez prévisualiser et configurer la mise en page de votre formulaire. Vous pouvez consulter ce document pour obtenir plus d'informations sur la différence entre l'ancienne version et la nouvelle version.

Paramètres de la bannière

Vous pouvez cliquer sur la section "Paramètres de la bannière" pour choisir une image de bannière ou en télécharger une. La taille d'image recommandée est de 1500 x 300 pixels.

Paramètres de couleur de fond

Ici, vous pouvez sélectionner la couleur de fond de votre formulaire de base de données intégré.

Paramètres d'ordre des champs

Pour améliorer l'expérience utilisateur sur différents appareils, la nouvelle version du Formulaire de Base de Données adopte une mise en page à une seule colonne, similaire à celle de l'application mobile de Ragic. Par défaut, l'affichage des champs suit un ordre logique, se déroulant de gauche à droite et de haut en bas. Cette disposition permet une lecture naturelle et intuitive des informations. Pour personnaliser l'ordre d'affichage des champs, vous pouvez utiliser la section "Paramètres d'ordre des Champs". Dans cette section, sélectionnez le nom ou la description du champ que vous souhaitez repositionner. Utilisez ensuite les boutons fléchés pour ajuster sa position dans la séquence d'affichage.

Paramètres de pré-remplissage des valeurs

Si vous souhaitez permettre aux utilisateurs de remplir un formulaire web avec des valeurs par défaut, vous pouvez utiliser la fonction de pré-remplissage. Par exemple, si vous souhaitez que les membres de différents départements puissent automatiquement remplir leur catégorie de produit et leur département correspondants lors de leur inscription à une formation interne, vous pouvez configurer le modèle de Pré-remplissage des valeurs. Vous pouvez aussi définir plusieurs modèles pour chaque département. Après avoir terminé la configuration, cliquez sur le modèle que vous souhaitez choisir (il sera grisé) et enregistrez vos paramètres.

Imaginons que vous partagez avec les membres du département marketing le lien permettant d'appliquer le modèle "Pour le Marketing". Lorsqu'ils ouvriront ce formulaire, les champs "Catégorie de Produit" et "Département" seront automatiquement renseignés avec les valeurs que vous avez définies dans le modèle.

Paramètres d'affichage du champ de sélection

Vous pouvez ajuster légèrement la façon dont votre formulaire est affiché pour certains types de champs, tels que les champs de sélection. En cliquant sur le texte "changer le type" dans la configuration en bas des champs, vous pouvez changer un champ de sélection d'un menu déroulant à des boutons radio.

Veuillez noter que le champ de sélection ne peut pas être configuré pour s'afficher sous forme de "boutons radio" lors des situations décrites ci-dessous :

1.Le champ de sélection contient plus de 5 options.

2.Le champ de sélection est dans une sous-table.

3.Champ de sélection en cascade.

4.Champ sélectionné à partir d'une autre feuille.

Si le formulaire contient des champs de type Sélection ou Sélection multiple, vous avez la possibilité de d'ordonner aléatoirement l'ordre de sélection.

Vous pouvez également ajuster la mise en page de vos formulaires intégrés avec du CSS personnalisé en cliquant sur "Ajouter du CSS personnalisé" dans le coin inférieur gauche.

Après avoir configuré la mise en page, cliquez sur "Suivant" pour définir le message de réponse après la soumission du formulaire.

Vous pouvez choisir d'afficher ce message en "Texte brut" ou en "HTML" en sélectionnant l'onglet au-dessus de la zone de saisie de texte. Si vous ajoutez des codes HTML dans la zone de saisie de texte, vous devrez sélectionner l'onglet "HTML".

Si vous ajoutez une fonction de prévention du spam :

Les utilisateurs verront en bas du formulaire intégré une case à cocher destinée à vérifier si l'utilisateur est un être humain.

Lorsque vous activez "Afficher le lien "Soumettre une autre entrée" " :

Les utilisateurs verront ceci après avoir soumis une entrée, et ils pourront cliquer sur le lien pour soumettre une autre entrée.

Si vous souhaitez remplir des valeurs prédéfinies dans des champs sélectionnés, vous pouvez le faire en ajoutant les paramètres pfv dans l'URL d'intégration :

https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new&pfvfieldID=value

Pour ajouter plus de règles, utilisez "&" pour combiner chaque règle :

https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new&pfvfieldID1=value1&pfvfieldID2=value2...

L'URL se compose de 3 composants :

1. L'URL générée par l'outil d'intégration. Par exemple, https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new

2. ID du champ : l'ID du champ sélectionné. Par exemple, 1002358.

3. Valeur : la valeur que vous souhaitez remplir.

Avec les paramètres ci-dessus, lorsque les utilisateurs cliquent sur l'URL pour créer une entrée, le système peuplera les valeurs prédéfinies dans les champs sélectionnés.

(4) Chercher dans la base de données

Cette boîte de recherche permet à vos utilisateurs de faire des recherches dans votre base de données en utilisant des mots-clés.

Les résultats de la recherche seront affichés de manière similaire au visualiseur de base de données à partir des critères saisis. Après la soumission de la recherche, les utilisateurs de votre formulaire peuvent consulter les enregistrements correspondant à leurs critères avec le type de mise en page du visualisateur de base de données que vous avez choisi à l'étape suivante. Comme lors de la transition entre une page liste et une page formulaire, les utilisateurs pourront cliquer sur les entrées pour accéder à une page formulaire plus détaillée.

(5) Visualiseur et requête de base de données

Visualiseur et requête vous permet de visualiser les résultats de la requête sur la même page où vous saisissez la requête, au lieu de vous diriger vers une nouvelle page pour les résultats de la requête comme le fait la Requête de base de Données. C'est comme si la Requête de base de données était combinée avec le Visualiseur de base de données.

Mode Requête exacte de base de données

Le paramètre Mode exact est disponible pour la Requête de base de données et Visualiseur et requête de base de données. Avec ce paramètre, les utilisateurs ont la possibilité de rechercher des données en entrant une requête exacte, même si votre feuille n'est pas accessible au public. Pour plus d'informations, veuillez consulter cet article.

Afficher le bouton de déconnexion

Activer l'option Afficher le bouton de déconnexion va faire apparaître un bouton de déconnexion dans le coin supérieur droit de la page.

(6) Intégration brute

L'intégration brute vous permet d'incorporer l'interface utilisateur complète de la feuille de calcul Ragic directement sur votre site web via un iframe. Cette méthode se distingue des autres options d'intégration mentionnées précédemment, car elle ne se limite pas à un simple formulaire HTML ou à une liste basique. Elle offre une expérience utilisateur identique à celle de Ragic, directement sur votre plateforme.

Il est important de noter que cette intégration nécessite une authentification des utilisateurs sur votre compte Ragic, sauf si vous avez configuré des feuilles publiques, celle-ci n'étant alors pas nécessaire.

Lors de la configuration de l'intégration brute, vous disposez de plusieurs options de personnalisation. Vous pouvez choisir de créer automatiquement une nouvelle entrée par défaut, d'afficher la barre de recherche pour faciliter la navigation dans les données, ou encore de positionner les boutons de formulaire en haut de la page.

Après la configuration, vous pouvez copier et coller le code d'intégration pour l'utiliser sur votre site web et incorporer Ragic.

Les utilisateurs pourront effectuer des recherches en texte intégral en utilisant l'icône de recherche située dans le coin supérieur droit, à l'identique des recherches en texte intégral effectuées au sein de vos feuilles de base de données Ragic.

4. Droits d'accès

Un avantage majeur de l'utilisation des plug-ins est que vous n'avez pas besoin d'acheter des licences utilisateur pour les utilisateurs de plug-in si vos feuilles sont définies comme publiques.

Si vous n'avez pas défini vos feuilles comme publiques lors de votre utilisation des plug-ins, les visiteurs verront une page de connexion s'ils ne sont pas connectés (à l'exception de la Requête de base de données).

Rappelons ici que le mode Requête exacte de base de données et le mode Visualiseur et requête exacte de base de données sont des cas exceptionnels où les utilisateurs peuvent toujours rechercher les données en entrant une requête exacte même si vos feuilles n'ont pas été préalablement définies comme publiques.

5. Paramètres pour les intégrations web

Si vous souhaitez pré-remplir certains champs avec des valeurs déterminées par votre code d'intégration, vous pouvez ajouter un paramètre à l'URL de votre iframe d'intégration brute en commençant par le préfixe "pfv" pour spécifier la valeur que vous souhaitez remplir.

Par exemple, si vous souhaitez remplir la valeur "Ragic" dans le champ avec l'ID : 1000001, vous pouvez ajouter pfv1000001=Ragic à la chaîne de requête de l'URL de l'iframe.

De même, si vous avez activé la sauvegarde automatique sur votre feuille, vous pouvez également créer automatiquement un nouvel enregistrement en ajoutant le paramètre "autoSaveData" à l'URL.

Haut de page Table des matières

Essayer Ragic gratuitement

Connectez-vous avec Google