Aperçu des widgets personnalisés

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

:: :(Error) (Restriction)
This feature is only available for Professional plans and above.
:: :

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.

Regardez la vidéo suivante pour un aperçu rapide de cette fonctionnalité :

Découvrez les widgets personnalisés dans la bibliothèque de Tulip !

Notions de base sur les 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'App Editor.

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

Création d'un widget

:: :(Warning) (Warning)
Only users with access to account settings (Account Owners) can access the custom widget editing UI.
:: :

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 de prévisualisation une fois que vous aurez cliqué sur cette dernière. Les valeurs de prop peuvent être modifiées directement dans la section de prévisualisation à des fins de test.

Il existe des fonctions spéciales pour interagir avec les accessoires et les événements.

Obtenir la valeur des accessoires

:: :(Warning) (Warning)
It is not guaranteed that the prop being used by a widget will load before that widget loads, so all props associated with Table record fields, Aggregations, or any other dynamic value should include logic to support cases where they are null at the point the widget is loaded. See this section for details on triggering logic when a prop changes.
:: :

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

Faire quelque chose lorsqu'une propriété change

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

Fixer la valeur d'une propriété

/Régler 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**


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


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


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


Le diagramme suivant illustre le flux d'informations à travers un widget personnalisé dans une application. Les données de la variable d'entrée sont stockées dans l'accessoire. Le changement de valeur signale un événement où un déclencheur stocke les données dans la variable de sortie.


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


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


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




---

## **Importation/exportation d'applications**


**Exporter**


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){Sélectionnez "Exporter".}


1. Sélectionnez "Exporter".


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


**Importer**


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


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


1. Sélectionnez "Importer".


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


1. Trouvez 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 dans lequel 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){Sélectionnez "Activer la bibliothèque externe".}


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){Sélectionnez l'extension que vous souhaitez activer.}


Voici une description de base de ce que fait chacune de ces extensions. 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.