Visão geral dos widgets personalizados

Crie seus próprios widgets no Tulip usando HTML, CSS e JavaScript

:::(Error) (Restrição) Esse recurso está disponível apenas para os planos Professional e superiores :::

Os itens que você arrasta e solta em seu aplicativo são chamados de Widgets. Eles podem ser botões, imagens, caixas de entrada e qualquer outra coisa disponível na barra de ferramentas.

Os widgets personalizados permitem que você escreva seu próprio código e crie seus próprios widgets, que podem ser arrastados e soltos em seu aplicativo e interagir com eles. Essa capacidade permite que os usuários da Tulip ampliem os limites do que é possível fazer na Tulip.

Assista ao vídeo de visão geral a seguir para um rápido mergulho profundo nesse recurso:

Confira os widgets personalizados na Biblioteca da Tulip!

Noções básicas de widgets personalizados

A tela de gerenciamento de Widgets personalizados pode ser encontrada na página de configurações da sua conta. É nela que você pode criar e excluir widgets. O editor de widgets personalizados permite que você escreva o código do widget, crie Props e Events e visualize o widget. Abaixo está um diagrama que descreve o que são props e eventos:

Props: Props são dados compartilhados entre widgets personalizados e aplicativos Tulip. As props serão expostas no editor de aplicativos e permitirão que os editores de aplicativos selecionem quais variáveis, registros de tabela ou outras informações devem ser associadas à prop.

Eventos: Os eventos são sinais que o Widget pode enviar ao aplicativo. Os eventos permitem que o aplicativo responda com um acionador e podem levar informações junto com eles.

Os widgets personalizados podem ser acessados por meio do seletor Custom down no App Editor.

Criação de um widget

:::(Warning) (Aviso) Somente usuários com acesso às configurações da conta (Account Owners) podem acessar a interface de edição de widgets personalizados:

A tela do editor de widgets é dividida em quatro seções. O código que você escrever na seção inferior esquerda aparecerá na seção de visualização quando você clicar na seção de visualização. Os valores de Prop podem ser alterados diretamente na seção de visualização para fins de teste.

Funções especiais para interagir com objetos e eventos.

Obtenção do valor dos objetos

:::(Warning) (Aviso) Não é garantido que a props usada por um widget seja carregada antes do carregamento do widget, portanto, todas as props associadas a campos de registro de tabela, agregações ou qualquer outro valor dinâmico devem incluir lógica para suportar casos em que elas sejam nulas no momento em que o widget for carregado. Consulte esta seção para obter detalhes sobre como acionar a lógica quando uma prop é alterada.
:::

/Obter o valor de uma prop getValue('My Prop');``/Armazenar prop em uma variável let myVariable = getValue('My Prop');

Fazer algo quando uma prop muda

//Fazer algo sempre que o valor de uma prop for alterado getValue('My Prop', (internalVariable) => { doSomething(internalVariable); });

Definição do valor de uma prop

//Defina o valor de uma prop de texto como "hello!" setValue("My Text Prop", "hello!");


//definir o valor de um item em um objeto setValue('My Object Prop', { 'Key inside object': 'new value' }); ```


### **Disparar um evento**


``` Disparar**um evento** fireEvent('event', *payload*); 


//disparar um evento sem carga útil fireEvent('My Event');


//disparar evento com carga útil fireEvent('My Event', myVariable); ```


## Exemplo de vídeo de criação de widget


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




---


## **Importação/Exportação de aplicativos**


**Exportar**


1. Na visão geral do widget personalizado, selecione os três pontos ao lado do widget que deseja exportar.


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


1. Selecione "Export" (Exportar).


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


**Importar**


1. Na tela de visão geral do widget personalizado, selecione os três pontos na parte superior.


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


1. Selecione "Import" (Importar).


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


1. Localize o arquivo .json do widget personalizado.


## **Ativação de bibliotecas externas**


As bibliotecas externas ampliam ainda mais o que os widgets personalizados podem fazer. As bibliotecas externas lidam com grande parte do trabalho *sujo* de escrever html diretamente em JavaScript. As bibliotecas externas devem ser ativadas para cada widget em que você deseja usá-las.


1. Em seu widget, clique no menu de três pontos na faixa de opções.


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


1. Selecione "Enable External Library" (Ativar biblioteca externa).


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


1. Selecione a extensão que deseja ativar.


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


Aqui está uma descrição básica do que cada uma delas faz. Muitas delas são excelentes em várias áreas, portanto, sinta-se à vontade para explorar. 


* **jQuery** - permite a seleção mais simplificada de elementos html, juntamente com a manipulação de elementos.
* **D3 -** O padrão ouro para visualização de dados, com uma curva de aprendizado acentuada, mas com muita flexibilidade.
* **Google Visualization -** Uma ótima ferramenta para fazer o que o nome indica, visualização.
* **javaascript-Ip-solver -** O Ip solver é uma biblioteca externa que pode lidar com cálculos complexos para resolver equações.
* **Lodash -** O Lodash fornece várias ferramentas que facilitam o trabalho com tipos de dados javascript.
* **ChartJS -** A biblioteca de gráficos mais simples possível, com muitos recursos on-line.
* **Moment -** O Moment fornece várias ferramentas para trabalhar com datas e horas.