Os Custom Widgets oferecem flexibilidade na criação do widget perfeito com algum código necessário.
Você pode passar qualquer objeto complexo para seus widgets personalizados. Veja na guia de download um exemplo de um objeto complexo payload.json para uso neste exemplo. Você precisa integrar ao seu objeto uma propriedade chamada "flatten" e defini-la como "false".
Veja na guia de download um exemplo de código de Custom Widget para os códigos CSS, HTML e JS a serem colados no widget personalizado para realizar tarefas simples com o objeto recebido:
Cole o código na etapa 3 "Write code" na criação do widget personalizado. Nada precisa ser adicionado na etapa "Define widget properties".
A parte importante é a instrução payload = {{value}} no script. É aí que o objeto vindo do payload é atribuído a uma variável no script do Custom Widget.
O objeto e partes dos objetos são exibidos por meio das instruções el.textContent. A primeira instrução apenas exibe o objeto inteiro de forma legível para humanos, a segunda acessa um subobjeto: payload.myObject.anotherString
Este é o resultado final para o exemplo:
Ao usar JQuery, mantenha o seguinte em mente dependendo do método:
- Recomendado: baixe uma version da biblioteca, hospede-a no servidor IoT e forneça-a (por meio do subflow "File Server", por exemplo) aos widgets personalizados (<script src="..."). Dessa forma, você tem uma versão única.