Les données dynamiques vous permettent de générer automatiquement du contenu à partir d’une base de données. Cette fonctionnalité offre un véritable gain de temps aux projets qui requièrent un grand volume de contenus ou un contenu évolutif dans le temps : catalogues, magazines...

Cette fonctionnalité est disponible sur demande dans la version bêta de PandaSuite. Elle nécessite de posséder un compte Pro.

 

Introduction au contenu dynamique 

Le contenu statique est un contenu qui est inséré manuellement dans vos écrans. 

Le contenu dynamique est généré automatiquement à partir d’une base de données. Il permet de gérer plus facilement d’importants volumes de contenus et de dissocier le design du contenu. 

Tout le contenu est stocké dans un fournisseur de données.

Cette fonctionnalité est pour le moment uniquement disponible dans la version bêta de PandaSuite. Elle nécessite une bonne connaissance de l’outil et quelques manipulations techniques.

 

Créer la base de données

Prenons l’exemple d’un catalogue de biens immobiliers. Nous allons préparer la base de données qui contient l'ensemble des biens. Chaque fiche contient le nom du bien, le visuel, l'adresse, le prix et une description. 

pandimmo.png 

Créer le fournisseur de données (data provider)

Cliquez sur Projet dans le fil d'ariane.

Double-cliquez sur le Data provider présent dans la liste des Objets. Vous pouvez changer le nom de ce fournisseur de données 

se_lection_du_fournisseur_de_donne_es.png

 

 

Comprendre les propriétés 

Une base de données est construite à partir de propriétés. Il existe plusieurs types de propriétés : 

  • Booléan comprend 2 états : vrai ou faux 
  • Nombre
  • Couleur
  • Chaîne
  • Date
  • Ecran
  • Image
  • Audio
  • Vidéo
  • Séquence
  • Image HD
  • Zip
  • Tableau
  • Clés/Valeurs
  • Collection
  • Référence
  • Références

 

Créer une collection

Tout commence par une collection. Dans le cadre de notre exemple, cette Collection contient les biens immobiliers et est composée de plusieurs propriétés : Nom, Image, Prix, Localisation etc… 

add_new_property.png

 

Ajoutez une propriété Collection et choisissez son nom, en remplacement de new_key. Ce nom sera réutilisé, nous le mentionnerons ainsi  : COLLECTION_NAME

Cliquez sur l’icône Réglages pour éditer les propriétés de votre collection. 

nouvelle_proprie_te_.png

 

Par défaut, votre nouvelle collection comprend 2 propriétés : id et name

Cliquez Add new property pour ajouter les champs date, description, prix et image :

  • Une propriété date pour la date
  • Une propriété string pour la description
  • Une propriété number pour le prix
  • Une propriété image pour le visuel

Notez le nom de ces propriétés (en remplacement new_key). Ce sera votre PROPERTY_NAME

Cliquez sur Save

 

Éditer le contenu 

Cliquez sur O ITEM(S) pour ajouter le contenu de vos biens immobiliers.

Pour ajouter un item, cliquez sur Add new item. Renommez chaque item (par exemple : appartement 2 chambres Paris). Cliquez sur le bouton à droite pour éditer le contenu de la fiche 

NB : si vous avez un grand volume de contenus, notre équipe peut vous accompagner pour l'intégration via des solutions plus automatisées. 

 

Récupérer l’identifiant du fournisseur de données (data provider)

L’identifiant est indispensable pour ajouter des variables. 

Pour récupérer l’identifiant de votre fournisseur de données, double-cliquez sur le nom. 

name_data_provider.png

Collez dans un champ de texte et récupérez l'identifiant. DataProvider -> dataprovider : #######################. Notez précieusement cet identifiant : ID_BDD

 

Afficher une collection 

Maintenant que vous avez intégré le contenu, préparons l’affichage de la liste de biens immobiliers. C'est une liste déroulante présentant l'ensemble des biens sous la forme d'une vignette synthétique. 

Insérer le composant Collection

Le composant Collection vous permet d’afficher le contenu d’une collection, en fonction de certains paramètres d’affichage.

Insérez le composant Collection depuis la fenêtre des Composants

composant_collection.png

 

A l’intérieur, insérez un Groupe (un container) qui contient un exemple de vignette. Ce container sera dupliqué à partir de vos contenus. 

 exemple_de_card.png

 

 

Ajouter une variable dans le composant Collection

Ouvrez la fenêtre Propriétés du composant Collection. 

Renseigner la source : 

[data:ID_BDD(/COLLECTION_NAME)] 

 

 
 source_composant_collection.png
 
 

Ajouter une variable sur du texte et des images

Rendez-vous dans le groupe. Pour chaque élément, ajoutez la variable correspondante depuis la fenêtre Propriétés. Cliquez sur l'icône en haut et à droite et le bouton Ajouter.

source_texte.png

Pour les textes :

[data:ID_BDD(/COLLECTION_NAME/@getById:[data:ID_BDD(rowId)]/PROPERTY_NAME)]

Pour les images : 

[data:ID_BDD(/COLLECTION_NAME/@getById:[data:ID_BDD(rowId)]/PROPERTY_NAME/value)]

 

Actualiser les données de l’écran

La dernière étape est d'actualiser les données à l'affichage de l'écran. 

Sélectionnez l'écran et ouvrez la fenêtre Interactivités

Sélectionnez Affichage courant > Agir sur composant > sélectionnez la base de données dans la fenêtre Objets au niveau du Projet > Rafraîchir les données

 actualiser_les_donne_es.png
 

 

Afficher un contenu sélectionné 

Imaginons maintenant que vous souhaitez afficher l'intégralité de la fiche au clic sur la vignette. Il faut désormais intégrer le paramètre {selected}. 

pandimmo_selected.png

 

Dans un premier temps, préparez l'effet d'ouverture en plaçant un composant Pop-up au-dessus de la vignette ou en utilisant les états. 

Préparez le design de la fiche. 

Ajouter un paramètre {selected} sur du texte et des images

Rendez-vous dans le groupe. Pour chaque élément, ajoutez la variable correspondante depuis la fenêtre Propriétés. Cliquez sur l'icône en haut et à droite et le bouton Ajouter.

 Pour les textes :

[data:ID_BDD(/COLLECTION_NAME/@getById:[data:ID_BDD(/selected/value)]/PROPERTY_NAME)]

Pour les images : 

[data:ID_BDD(/COLLECTION_NAME/@getById:[data:ID_BDD(/selected/value)]/PROPERTY_NAME/value)]

 

Ouvrir un contenu {selected}

Sélectionnez la vignette. 

Cliquez sur Interactivités.

  1. Choisissez le déclencheur Simple Tap et l’interactivité Agir sur un composant > Sélectionner la base de données dans la fenêtre Objets au niveau du Projet > Modifier la donnée

Donnée : /REFERENCE_NAME/value
Fonction : set
Valeur : [data:ID_BDD(rowId)]

modifier_la_se_lection.png

Veuillez nous contacter si vous souhaitez avoir accès au projet présenté Pandimmo.

 

Mises à jour

Pour mettre à jour votre contenu dynamique, rendez-vous dans le fournisseur de données et cliquez sur Mettre en productionCette mise à jour ne requiert pas d’action utilisateur. 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez des apps et expériences interactives sans ligne de code

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

S'inscrire (gratuit)