Les widgets personnalisés offrent de la flexibilité dans la création du widget parfait avec un peu de codage requis.
Vous pouvez transmettre n'importe quel objet complexe à vos widgets personnalisés. Voir dans l'onglet de téléchargement un exemple d'objet complexe payload.json à utiliser dans cet exemple. Vous devez intégrer dans votre objet une propriété appelée "flatten" et la définir sur "false".
Voir dans l'onglet de téléchargement un exemple de code de widget personnalisé pour les codes CSS, HTML et JS à coller dans le widget personnalisé afin d'effectuer des tâches simples avec l'objet reçu :
Collez le code à l'étape 3 "Write code" de la création du widget personnalisé. Rien ne doit être ajouté à l'étape "Define widget properties".
La partie importante est l'instruction payload = {{value}} dans le script. C'est là que l'objet provenant du payload est affecté à une variable dans le script du widget personnalisé.
L'objet et les parties de l'objet sont affichés via les instructions el.textContent. La première instruction affiche simplement l'objet entier sous une forme lisible par l'homme, la seconde accède à un sous-objet : payload.myObject.anotherString
Voici le résultat final pour l'exemple :
Lors de l'utilisation de JQuery, gardez ce qui suit à l'esprit selon la méthode :
- Recommandé : téléchargez une version de la bibliothèque, hébergez-la sur le serveur IoT et servez-la (via le sous-flux "File Server" par exemple) aux widgets personnalisés (<script src="..."). De cette façon, vous avez une version unique.