Vous disposez de données (telles que des personnes, des événements ou des inventaires d'objets) et vous souhaitez les rendre facilement consultables sur votre site web à l'aide d'un moteur de recherche ?

Ce tutoriel vous guide dans la création d'un moteur de recherche multi-critères à partir de données tabulaires (Excel, CSV, etc.) et son intégration à votre site web, grâce à notre application Listes et Fiches.

Pour ce tutoriel, nous allons nous servir d'un extrait de l'inventaire des collections du musée d'Arts de Nantes pour obtenir une visualisation similaire à celle-ci : visualisation des collections :

Avec cette visualisation, vous avez la possibilité de rechercher parmi les œuvres du musée d'Arts de Nantes. Chaque œuvre dispose d'une fiche détaillée contenant des informations spécifiques. En cliquant sur les fiches, vous pouvez accéder à des détails supplémentaires concernant l'œuvre et avez également l'option de les enregistrer en format PDF.

Pour visualiser une œuvre, il vous suffit de cliquer sur le lien de la Page associée présent sur la fiche qui vous intéresse.

Dans la section Schéma, associez :

• le concept Libellé à la colonne titre, qui contient les noms des œuvres,
• le concept Page web à la colonne Lien Navigart, qui contient les adresses vers les pages d'un site présentant les œuvres.

Pour sauvegarder l'association des concepts aux colonnes, cliquez sur le bouton Appliquer et validez le brouillon de votre jeu de données.

Les concepts Libellé et Page web seront utilisés par notre futur moteur de recherche en tant que titre et lien pour chacune des fiches.

Données

Pour créer votre moteur de recherche, utilisez la visualisation Listes et Fiches.

Cliquez sur Applications dans la barre de navigation, puis sur Configurer une application. Choisissez la visualisation Listes et Fiches et ajoutez un titre à votre visualisation.

Vous êtes redirigé vers la page d'édition de votre visualisation. Sur cette page, vous pouvez définir les métadonnées de votre visualisation (titre, identifiant de publication, etc.) ainsi qu'éditer la configuration de votre application à l'aide du bouton Éditer la configuration.

Sur la page de configuration, dans la section Données, choisissez le jeu de données de l'inventaire des collections que vous avez chargé sur votre compte. Les vignettes par défaut utilisent les concepts Libellé et Page web.

Nous allons paramétrer la partie Vignette en optant pour une configuration manuelle.

1. Sélectionnez l'option de Réglage manuel
2. Sélectionnez la colonne qui servira de titre sur vos fiches
3. Remplissez votre fiche en y intégrant les champs requis. Sections dont les détails sont fournis dans le paragraphe suivant.
4. Intégrez un bouton d'action pour accéder à la Page web indiquée dans le schéma des données.

Sections

L'ajout de sections vous permet de sélectionner la disposition des éléments ainsi que les champs à inclure.
Dans cet exemple, nous allons concevoir une fiche avec un affichage en une seule colonne, où tous les éléments se succèdent.

1. Vous pouvez augmenter l'espace de remplissage, "padding", pour éloigner les éléments des bords de la fiche.
2. Choix de la disposition des éléments : nous avons choisi un affichage en une seule colonne pour cet exemple.
3. Ajout d'éléments.
4. Modification d'un élément.

Éléments

Lors de l'ajout d'un élément, choisissez la colonne à afficher [1].
Plusieurs options d'affichage de l'élément sont disponibles.
Cliquez sur OK [2] pour valider l'ajout de l'élément.

Ajoutez les différents éléments que vous souhaitez afficher.
Dans notre exemple, nous avons ajouté les colonnes Auteur, Date de création, Domaine, Technique et Dimensions. Ces éléments seront affichés sur notre fiche.

Fiche détaillée

Nous allons maintenant activer l'affichage détaillé des fiches ainsi que la fonctionnalité d'impression.

Nous avons mis en place trois actions pour nos fiches :

1. Cliquer sur une fiche pour accéder à sa version détaillée,
2. Accéder au lien du concept Page web,
3. Imprimer la fiche détaillée en format PDF.

Entête

Dans la section En-tête, nous allons intégrer un filtre dynamique permettant de filtrer par Domaine :

Cliquez sur la section En-tête, puis sur le bouton (+) des Filtres dynamiques, selenctionnez le champ Domaine et sauvegarder le filtre.

Vous pouvez intégrer votre moteur de recherche sur un autre site en copiant le code de votre visualisation à l'aide du bouton d'action à droite : intégrer dans un site. Votre code HTML devrait ressembler à celui-ci :

Vous pouvez intégrer votre moteur de recherche sur un autre site en copiant le code de votre visualisation à l'aide du bouton d'actionIntégrer dans un site. Votre code HTML devrait ressembler à ceci :

<iframe src="https://opendata.koumoul.com/data-fair/app/inventaire-des-collections-du-musee-d'arts-de-nantes?embed=true" width="100%" height="500px" style="background-color: transparent; border: none;"></iframe>

Pour rendre votre visualisation accessible à tous les visiteurs de votre site, activez l'accès public dans la page d'édition de vos données ainsi que dans la page de configuration de votre visualisation.

Si vous avez des remarques sur ce cours, n'hésitez pas à nous les communiquer.