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 et 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 du widget personnalisé

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 toute autre information à associer au prop.

É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 par le biais du sélecteur descendant personnalisé dans l'éditeur d'applications.

Création d'un widget

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

L'écran de l'éditeur de widget se décompose 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 propriétés peuvent être modifiées directement dans la section d'aperçu à des fins de test.

Fonctions spéciales pour interagir avec les accessoires et les événements.

Obtenir la valeur des accessoires

//Récupérer la valeur d'un accessoire getValue('Mon accessoire') ;
//Stocker l'accessoire dans une variable let myVariable = getValue('My Prop') ;

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

Définition de la valeur d'une prop

**Définition de la valeur d'une proposition** 
setValue('My Prop', *value\_to\_set*) ; 


//Définir la valeur d'une proposition de texte à 'hello !
setValue('Mon accessoire texte', 'hello!') ;


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

Déclenchement d'un événement

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


//lance un événement sans données utiles
fireEvent('Mon événement') ;


//lance un événement avec une charge utile
fireEvent('Mon événement', maVariable) ;

Exemple de vidéo de construction de widget

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 voulez exporter.

1. Sélectionnez "Exporter".

Importer

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

1. Sélectionnez "Importer".

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

Activation des bibliothèques externes

Les bibliothèques externes permettent d'étendre les fonctionnalités des widgets personnalisés. Les bibliothèques externes prennent en charge une grande partie du travail fastidieux 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 à 3 points dans le ruban.

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

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

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

• jQuery - permet une sélection plus rationnelle des éléments html, ainsi que la manipulation des éléments.
• D3 - L'étalon-or de la visualisation des données, une courbe d'apprentissage raide 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 javascript.
• ChartJS - La bibliothèque de graphiques la plus simple possible avec des tonnes de ressources en ligne.
• Moment - Moment fournit des tonnes d'outils pour travailler avec les dates et les heures.