Aperçu des widgets personnalisés

Créez vos propres widgets dans Tulip en utilisant HTML, CSS et JavaScript

Aperçu des widgets personnalisés

Créez vos propres fonctionnalités dans Tulip en utilisant HTML, CSS et JavaScript. Les widgets de la bibliothèque sont disponibles ici : https://tulip.co/library/?query=Widgets

Introduction

Les éléments que vous glissez-déposez dans votre application sont appelés "Widgets". Il peut s'agir de boutons, d'images, de boîtes de saisie et de tout autre élément disponible dans la barre d'outils.

Les widgets personnalisés vous permettent d'écrire votre propre code et de créer vos propres widgets que vous pouvez ensuite glisser-déposer dans votre application et avec lesquels vous pouvez interagir. Cette capacité permet aux utilisateurs de Tulip de repousser les limites de ce qui est possible dans Tulip.

Dans cet article, nous allons vous donner un aperçu rapide du fonctionnement des widgets personnalisés.

Les bases des widgets personnalisés

L'écran de gestion des widgets personnalisés se trouve sur la page des paramètres de votre compte. C'est là que vous pouvez créer et supprimer des widgets. L'éditeur de widgets personnalisés vous permet d'écrire le code de votre widget, de créer des accessoires et des événements et de prévisualiser votre widget. Vous trouverez ci-dessous un diagramme décrivant ce que sont les accessoires et les événements :

Props : Les Props sont des données qui sont partagées entre les widgets personnalisés et les applications Tulip. Les Props seront exposés dans l'éditeur d'application et permettront aux éditeurs d'applications de sélectionner les variables, les enregistrements de table ou d'autres informations à associer au Props.

Événements : Les événements sont des signaux que votre widget peut envoyer à votre application. Les événements permettent à votre application de répondre par un déclencheur et peuvent être accompagnés d'informations.

Les widgets personnalisés sont accessibles via le sélecteur Custom down dans l'éditeur d'application.

Création d'un widget

:::(Warning) (Attention) Seuls les utilisateurs ayant accès aux paramètres du compte (Propriétaires de compte) peuvent accéder à l'interface d'édition des widgets personnalisés :: :

L'écran de l'éditeur de widgets est divisé en quatre sections. Le code que vous écrivez dans la section en bas à gauche apparaîtra dans la section d'aperçu une fois que vous aurez cliqué dans la section d'aperçu. Les valeurs des accessoires peuvent être modifiées directement dans la section de prévisualisation à des fins de test.

Fonctions spéciales permettant d'interagir avec les accessoires et les événements.

Obtenir la valeur des accessoires

:::(Warning) (Avertissement) Il n'est pas garanti que l'accessoire utilisé par un widget se charge avant le chargement de ce widget. Par conséquent, tous les accessoires associés à des champs d'enregistrement de table, à des agrégations ou à toute autre valeur dynamique doivent inclure une logique permettant de prendre en charge les cas où ils sont nuls au moment où le widget est chargé. Voir cette section pour plus de détails sur le déclenchement de la logique lorsqu'une propriété change.
:: :

//Obtention de la valeur d'une propriété getValue('My Prop') ;``//Stockage de la propriété dans une variable let myVariable = getValue('My Prop') ;

Faire quelque chose lorsqu'une variable change

//Faire quelque chose à chaque fois que la valeur d'une propriété change getValue('My Prop', (internalVariable) => { doSomething(internalVariable) ; }) ;

Fixer la valeur d'une propriété

//Définir la valeur d'une variable texte à 'hello!' setValue('My Text Prop', 'hello!') ;


//réglage de la valeur d'un élément dans un objet setValue('My Object Prop', { 'Key inside object' : 'new value' }) ; ```


### **Déclencher un événement**


```**Déclencher un** événement fireEvent('event', *payload*) ; 


//envoie un événement sans charge utile fireEvent('My Event') ;


//envoie un événement avec une charge utile fireEvent('My Event', myVariable) ; ```


## Exemple de construction d'un widget (vidéo)


![Video](https://www.youtube.com/embed/H08-W2M2Ypo?rel=0){height="576" width="1024"}




---


## **Importer/Exporter des applications**


**Exportation**


1. Dans l'aperçu des widgets personnalisés, sélectionnez les 3 points à côté du widget que vous souhaitez exporter.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477703991.png){height="" width=""}


1. Sélectionnez "Exporter".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704053.png){height="" width="800"}


**Importer**


1. Dans l'écran de présentation des widgets personnalisés, sélectionnez les 3 points en haut.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704175.png){height="" width="800"}


1. Sélectionnez "Importer".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477704228.png){height="" width="350"}


1. Recherchez le fichier .json du widget personnalisé.


## **Activation des bibliothèques externes**


Les bibliothèques externes permettent d'étendre les possibilités des widgets personnalisés. Les bibliothèques externes prennent en charge une grande partie du travail d'écriture du code HTML directement en JavaScript. Les bibliothèques externes doivent être activées pour chaque widget où vous souhaitez les utiliser.


1. Dans votre widget, cliquez sur le menu à trois points dans le ruban.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684182.png){height="" width=""}


1. Sélectionnez "Activer la bibliothèque externe".


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684247.png){height="" width="250"}


1. Sélectionnez l'extension que vous souhaitez activer.


![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Custom%20Widgets%20Overview_477684294.png){height="" width="450"}


Voici une description de base de ce que fait chacune d'entre elles. Beaucoup d'entre elles excellent dans de nombreux domaines, alors n'hésitez pas à les explorer. 


* **jQuery** - permet une sélection plus rationnelle des éléments html, ainsi que la manipulation des éléments.
* **D3 -** L'étalon-or pour la visualisation des données, une courbe d'apprentissage abrupte mais des tonnes de flexibilité.
* **Google Visualization -** Un excellent outil pour faire, comme son nom l'indique, de la visualisation.
* **javaascript-Ip-solver -** Ip solver est une bibliothèque externe qui peut gérer des calculs complexes pour résoudre des équations.
* Lodash**-** Lodash fournit une tonne d'outils qui facilitent le travail avec les types de données en javascript.
* **ChartJS -** La bibliothèque graphique la plus simple possible avec des tonnes de ressources en ligne.
* **Moment -** Moment fournit des tonnes d'outils pour travailler avec des dates et des heures.