Dans l'environnement numérique rapide d'aujourd'hui, la mise à jour manuelle des affichages numériques peut être à la fois fastidieuse et sujette aux erreurs. Ce guide vous montrera comment intégrer des données en direct dans vos écrans numériques, permettant des mises à jour automatiques transparentes sur vos affichages.
Dans cet article :
- Qu'est-ce qu'OptiSync ?
- Ajouter votre source de données
- Saisir votre source de données dans Designer
- Modifier et concevoir votre répéteur dans Designer
- Envoyer vers les écrans
| Note : OptiSync n'est disponible que sur les forfaits Pro Plus et supérieurs. |
Qu'est-ce qu'OptiSync ?
OptiSync est une solution intégrée conçue pour se connecter de manière transparente à diverses sources de données, y compris des feuilles de calcul, des API et des tableaux.
Fonctionnalités clés :
- Configuration facile : La configuration de votre source de données nécessite peu ou pas de code, garantissant un processus rapide et simple.
- Mises à jour automatiques : Vous pouvez lier votre source de données directement à notre application Designer, qui mettra automatiquement à jour votre contenu.
- Données en temps réel : Cela garantit que votre affichage numérique reflète toujours les dernières données, éliminant le besoin de saisie manuelle, réduisant les erreurs et économisant du temps.
Cas d'utilisation :
OptiSync est idéal pour une large gamme de cas d'utilisation, tels que :
- Affichage des anniversaires des employés
- Menus de restaurant
- Anniversaires de travail
- Catalogues de produits
- Présentations d'équipe
- Et bien plus encore !
Avec OptiSync, vos affichages numériques restent précis et à jour, améliorant la communication et l'engagement dans divers contextes.
Ajouter votre source de données
Vous pouvez ajouter votre source de données via les Paramètres du compte ou via l'application Designer.
Paramètres du compte
- Cliquez sur votre nom de compte dans le coin supérieur droit
- Sélectionnez Plus
- Sélectionnez Sources de données
- Sélectionnez Ajouter une source de données
- Choisissez votre source de données dans la liste d'options et suivez les instructions sur la façon de l'importer
- Si vous ouvrez complètement vos paramètres de compte, elle sera sous "Avancé" dans la colonne de gauche
Application Designer :
- Ouvrez l'application Designer
- Sélectionnez Sources de données dans la colonne de gauche
- Sélectionnez Ajouter une source de données
- Choisissez votre source de données dans la liste d'options et suivez les instructions sur la façon de l'importer
Veuillez suivre ces guides pour télécharger différents types de sources de données :
- Comment ajouter Google Sheets comme source de données pour OptiSync
- Comment ajouter une feuille de calcul Microsoft 365 Excel comme source de données pour OptiSync
De plus, vous pouvez intégrer et tester des requêtes API, et exécuter tout codage nécessaire avant ou après la requête.
Une fois votre source de données configurée, vous pouvez voir Où elle est utilisée, Modifier la source de données et/ou la Dupliquer.
- Où elle est utilisée : Ceci vous montrera lesquels de vos designs utilisent cette source de données. C'est utile pour suivre l'utilisation de cette source de données à travers différents actifs.
- Modifier les données : Accédez à votre source de données et apportez toute mise à jour/modification.
- Dupliquer : Ceci créera une copie de votre source de données.
Saisir votre source de données dans Designer
Une fois votre source de données configurée, vous pouvez la connecter à l'application Designer.
Allez à Source de données sur le côté gauche du menu latéral.
Comme mentionné précédemment, vous pouvez ajouter votre source de données ici. Ou, si vous l'avez déjà créée dans la section Source de données de Avancé, elle devrait apparaître sous Autres sources de données.
Sélectionnez votre source de données.
Glissez-déposez les éléments de la source de données sur le canevas Designer.
- Vous pouvez soit glisser-déposer une ligne entière, soit les aspects individuels dans les lignes.
Un message contextuel apparaîtra, demandant « Souhaitez-vous utiliser ces données dans un répéteur ou seules ? »
-
Utiliser seules : Ce sera un élément autonome et se mettra à jour automatiquement en fonction de la source de données.
-
Utiliser dans un répéteur : Cela inclura l'élément de source de données dans un composant répéteur.
- Répéteur est un outil qui peut être utilisé dans l'application Designer pour afficher et répéter dynamiquement une liste d'éléments.
| IMPORTANT |
| OptiSync ne prend pas en charge les caractères spéciaux (c'est-à-dire tout ce qui est en dehors d'un clavier de langue anglaise). Cela entraînera la lecture des données du système comme vides, et elles ne s'afficheront pas. |
Modifier et concevoir votre répéteur dans Designer
Vous pouvez modifier à la fois le modèle et le répéteur dans Designer !
Le répéteur peut être trouvé dans le menu latéral de l'application Designer.
Dans la section Répéteurs, elle contiendra plusieurs « Composants répéteurs » et « Modèles répéteurs » prêts à l'emploi.
| Quelle est la différence entre les deux ? |
|
Composant répéteur : conçu pour gérer et afficher des éléments répétitifs avec quelques éléments de design. Vous pouvez incorporer ce composant répéteur dans n'importe quel modèle de conception de votre choix - il n'a pas besoin d'être un modèle répéteur. Une fois ajouté, vous le connectez simplement à votre source de données. Pensez-y comme un widget qui peut être facilement implémenté et personnalisé dans différents designs pour afficher dynamiquement des données. |
|
Modèle répéteur : spécifiquement conçu pour afficher des éléments répétitifs dans un modèle ou une mise en page de conception prédéfinie. Comme les autres modèles, il remplacera tout design existant lorsqu'il sera appliqué. Vous pouvez toujours apporter des modifications et des changements comme souhaité. Encore une fois, les utilisateurs n'auront qu'à le télécharger et se connecter à votre source de données souhaitée. |
N'importe lequel de ces éléments peut avoir une source de données mappée, puis être modifié de la même manière que tout autre composant Designer.
Pour plus d'informations à ce sujet, consultez nos guides :
Vous pouvez également ajuster le formatage d'un répéteur en le sélectionnant, puis en sélectionnant Paramètres.
Cela ouvrira la section Mappage de données pour le répéteur dans le menu latéral :
Ensuite, ces options seront présentées :
- Remplacer la source de données : Changer votre source de données
- Gérer : Apporter des modifications aux informations de votre source de données.
- Filtrer : Appliquer des filtres basés sur des conditions à la source de données. Les conditions de filtre peuvent être appliquées en utilisant une valeur fixe ou des attributs d'appareil.
- Déconnecter : Déconnecter votre source de données du répéteur
-
Gestion des données vides : Lorsqu'il n'y a pas d'élément de source de données, le comportement par défaut est d'utiliser une valeur vide. Vous pouvez ajuster cela avec les options suivantes :
- Ignorer : Ignorer ou se débarrasser des éléments répéteurs supplémentaires s'il n'y a pas assez de données pour atteindre le « Nombre total d'éléments affichés par page » défini.
- Utiliser la valeur par défaut : Afficher le contenu par défaut, qui est l'apparence de votre élément répéteur par lui-même.
- Utiliser vide : Le répéteur n'affichera rien.
- Espacement entre les éléments : Augmenter ou diminuer l'espace entre les éléments répéteurs.
-
Direction d'affichage des éléments : Changer le positionnement des lignes de votre source de données dans les éléments répéteurs.
- De gauche à droite : Il affichera les lignes allant de gauche à droite.
- De haut en bas : Il affichera les lignes allant de haut en bas.
- Alignement d'affichage des éléments : Changer l'alignement des éléments restants (moins que les éléments configurés) pour être alignés à gauche/centre/droite ou haut/centre/bas.
- Nombre total d'éléments affichés par page : Augmenter ou diminuer le nombre d'éléments répéteurs que vous souhaitez afficher.
- Nombre maximum d'éléments dans chaque ligne/colonne : Augmenter ou diminuer le nombre d'éléments répéteurs que vous souhaitez afficher dans chaque ligne/colonne.
- Espacement supplémentaire entre lignes/colonnes : Augmenter ou diminuer l'espacement entre les lignes/colonnes.
- Durée (secondes) : Ajuster la durée du temps pendant lequel chaque élément répéteur est affiché avant.
- Mélanger : Mélanger aléatoirement les éléments de votre source de données à afficher sur le répéteur.
Si vous modifiez un répéteur, il répliquera vos mises à jour pour chaque instance de données dans l'ensemble de données.
- Cela permet un aspect cohérent entre des éléments similaires sans avoir besoin de concevoir chacun individuellement.
Si vous souhaitez utiliser un modèle ou composant répéteur spécifique et que vous souhaitez mettre à jour l'exemple de source de données avec l'une de vos sources de données, veuillez suivre les étapes ci-dessous :
Comment utiliser la fonction de mappage des propriétés
Cette fonction avancée vous permet de modifier l'apparence de données spécifiques dans votre répéteur en fonction de conditions définies par l'utilisateur. Ces conditions, définies dans la source de données, sont mappées aux valeurs ou éléments correspondants dans le répéteur, et le formatage spécifié est ensuite appliqué.
- Dans Designer, double-cliquez sur le répéteur que vous souhaitez modifier. (Cela ouvrira l'éditeur de répéteur.)
- Sélectionnez l'élément dans le répéteur que vous souhaitez modifier, puis cliquez sur Paramètres en haut
- Cliquez sur Options avancées dans le menu latéral
- Cliquez sur + Mappage de propriétés (Vous appuierez sur ceci pour chaque nouvelle instance de mappage que vous souhaitez)
- En cliquant sur le menu Propriété, sélectionnez l'une des options du menu déroulant ci-dessus ou tapez manuellement l'une des options disponibles listées ci-dessous.
- En cliquant sur le menu Valeur, sélectionnez le nom de colonne correspondant (Cette information est extraite de votre source de données).
- Répétez ceci pour autant d'instances que vous le souhaitez pour plusieurs éléments dans votre répéteur.
- Cliquez sur Mettre à jour pour vous assurer que ces informations sont enregistrées et appliquées à votre répéteur.
Voici les options de mappage de propriétés listées dans les paramètres avancés :
| Propriété | Ce qu'elle fait | Valeur |
| Couleur de remplissage | Changer la couleur d'une forme ou d'un texte sélectionné dans votre répéteur | Accepte une valeur de couleur Hex valide ou un nom de couleur (ex. : #CE657E ou Rouge) |
| Taille de police | Changer la taille d'une police de texte et son apparence sur les écrans | Accepte une valeur numérique (ex. : 20) |
| Famille de police | Changer la police d'un texte sélectionné, comme Arial, Times New Roman ou des polices personnalisées. | Accepte des valeurs de chaîne représentant la famille de police. (ex. : Times New Roman) |
| Couleur de fond | Changer la couleur de fond d'une forme ou d'un texte sélectionné dans votre répéteur. | Accepte une valeur de couleur Hex valide ou un nom de couleur (ex. : #CE657E ou Rouge) |
| Épaisseur de police | Changer le poids ou l'épaisseur de la police de texte, la rendant plus claire ou plus grasse. | Accepte des valeurs spécifiques : normal, bold, lighter, bolder, unset, ou 100, 200, 300, 400, 500, 600, 700, 800, 900 |
| Souligner | Spécifier si vous voulez que le texte soit souligné pour l'emphase. | Valeur booléenne ; accepte true/false ou 0/1 |
| Barrer | Spécifier si vous voulez une ligne barrant le texte. | Valeur booléenne ; accepte true/false ou 0/1 |
| Surligner | Spécifier si le texte a une ligne au-dessus. | Valeur booléenne ; accepte true/false ou 0/1 |
| Alignement du texte | Changer l'alignement horizontal du texte. | Accepte des valeurs spécifiques : left, center, right, justify, justify-left, justify-center, justify-right |
| Couleur de contour | Changer la couleur du contour/bordure | Accepte une valeur de couleur Hex valide ou un nom de couleur (ex. : #CE657E ou Rouge) |
| Largeur de contour | Spécifier la largeur du contour, qui détermine l'épaisseur ou la finesse de la bordure. | Accepte une valeur numérique. |
| Direction | Définir la direction du texte : de gauche à droite ou de droite à gauche | Accepte des valeurs spécifiques : ltr ou rtl |
| Visible | Déterminer si l'élément est visible ou non. | Valeur booléenne ; accepte true/false ou 0/1 |
| Opacité | Changer le niveau de transparence d'une forme, d'un texte ou d'une photo sélectionné dans votre répéteur | Accepte une valeur numérique de 0-1 (ex. : 0.2 équivaut à 20%) |
Voici un exemple d'une source de données configurée avec Couleur de remplissage, Couleur de fond, Opacité, Épaisseur de police et Alignement du texte :
Comment utiliser les options de format d'affichage
Si vous souhaitez modifier la façon dont le formatage de certaines données de votre source de données apparaît sur votre répéteur, vous pouvez le faire avec l'option Format d'affichage disponible dans l'éditeur de répéteur. Cela vous fait gagner du temps en évitant de modifier votre source de données originale, et appliquera le formatage à tous les éléments répétés dans le répéteur.
Suivez les étapes de la section précédente concernant le mappage des propriétés pour accéder aux options de format d'affichage.
| Option de format d'affichage | Ce qu'elle fait |
| Texte | Cela affichera la valeur brute sans formatage. |
| Date Heure | Vous pouvez modifier le fuseau horaire, le format de date et le format d'heure avec les options disponibles. |
| Nombre | Vous pouvez formater les nombres pour qu'ils s'affichent sous forme de pourcentages, décimales, devises et plus encore. |
Envoyer vers les écrans
Une fois votre conception terminée, elle est prête à être envoyée à l'écran.
(Voici un guide si vous avez besoin d'aide supplémentaire pour cela.)
Votre écran se mettra automatiquement à jour en fonction de votre source de données connectée.
Vous n'avez plus besoin de mettre à jour manuellement vos données, ce qui prend du temps et est sujet aux erreurs.