Biblioteca de download de widgets no Jitterbit App Builder

Visão geral

Esta página contém uma biblioteca de downloads de widgets para uso no App Builder. Os widgets fornecem um gancho de código para o App Builder, permitindo que um designer assuma controle total sobre como o campo é renderizado. Os widgets podem ser usados para melhorar a experiência da interface do usuário. (Consulte também Widgets e Solução de problemas de widget.)

Formato de texto

Download

text_mask.zip

Descrição

Cria uma máscara na caixa de texto de destino com base na entrada do usuário e, em seguida, armazena os dados inseridos.

Parâmetros

• TextFormat: corda
• TextPlaceholder: corda

Formato de texto

Como você gostaria que o valor fosse mascarado. Exemplo: "(999) 999-9999" ou "99/99/9999"

Aqui estão as Definições de Máscara:

• "a" representa um caractere alfabético (A-Z, a-z)
• "9" representa um caractere numérico (0-9)
• "*" representa um caractere alfanumérico (A-Z, a-z, 0-9)

Se precisar de uma definição de máscara além daquelas predefinidas (por exemplo, Hex), você pode adicionar sua própria definição no jquery. Por exemplo:

$.mask.definitions['h'] = "[A-Fa-f0-9]";

Seletor de datas com datas habilitadas

Download

datepickerenableddates.zip

Documentação

seletor de data bootstrap

Descrição

Este widget fornece parâmetros para um controle seletor de datas para habilitar datas específicas no calendário que podem ser selecionadas pelo usuário. Todas as outras datas serão desabilitadas da seleção.

Parâmetros

• DatesToEnable: Sequência de datas separadas por um espaço e formatadas como MM/DD/YYYY. Por exemplo: 08/03/2022 08/12/2022 10/11/2022
• MinAvailableDate: String e é a data que o seletor de data usa para derivar o mês em que deve abrir. Por exemplo: 08/03/2022
• SelectedDateString: String e é o valor da coluna da tabela na qual você está salvando a linha. Certifique-se de converter a coluna de data no objeto de negócios para uma string antes de passá-la como parâmetro. Por exemplo: 08/12/2022

Notas de implementação

Ao adicionar e definir o widget no App Builder, defina o valor Modos suportados como Exibir e editar.

É desktop

Download

isdesktop.zip

Descrição

O widget IsDesktop será executado no carregamento da página e verificará se a janela de visualização resultante é considerada um navegador de desktop. Se o widget determinar que se trata de um navegador de desktop, ele definirá um campo booleano (IsDesktop) como 1. O widget encapsula a saída em um .widget-template-output-text classe que pode então ser alvo de um desenvolvedor caso seja necessário controle adicional sobre a aparência dos elementos na tela.

Parâmetros

• IsDesktop: Booleano

Notas de implementação

• Adicione uma coluna booleana IsDesktop a uma tabela. Por exemplo: Sessão
• Para implementar em um painel, você pode adicionar um Controle de Caixa de Seleção que tenha como alvo o novo controle IsDesktop em um painel definido como totalmente transparente com altura 0. Isso garante que o controle não ocupe espaço na página, mas seja carregado.
• Após a configuração conforme descrito acima, agora você pode usar a coluna Visibilidade para controlar a visibilidade do painel.

Editor ás

Download

ace.zip

Descrição e parâmetros

O widget Ace Editor é um utilitário de edição de código aberto escrito em JavaScript. O App Builder usa esse editor dentro do IDE. Adicione este widget em qualquer lugar do seu aplicativo App Builder onde você deseja incorporar um utilitário de edição de código.

Para mais informações e documentação, consulte: Ace Code Editor v1.4.6

Notas de implementação

• Ao adicionar e definir o widget no App Builder, defina o valor Modos suportados como Exibir e editar
• Ao adicionar Parâmetros de Widget você pode definir Valores Estáticos, por exemplo:
  • fontSize, Valor Estático, 14
  • altura, valor estático, 500
  • modo, valor estático, xml

Cor de linha dinâmica

Download

dynamic_row_color.zip

Descrição

O widget Cor de Linha Dinâmica permite definir dinamicamente a cor de fundo das linhas em um Painel de Várias Linhas. O valor da coluna à qual o widget está vinculado determina a cor de fundo dessa linha específica. Um valor de coluna de " ou nulo reverterá o plano de fundo da linha para a cor padrão usada para linhas MRP.

A cor pode ser especificada como o nome da cor ou valor CSS. Por exemplo: red, #f00, ou #ff0000.

Parâmetros

N / D

Notas de implementação

• Ao adicionar e definir o widget no App Builder, defina o valor Modos suportados como Exibir e Editar
• A cor da linha é determinada com base no controle mapeado para o widget. Este controle deve ser mapeado para uma coluna que define a cor.

• Adicione uma coluna derivada à Regra de Negócios do painel MRP que define o valor da cor. Por exemplo: RowColor. Esta coluna pode conter lógica dinâmica, como uma instrução IIF, para determinar o valor da cor. Por exemplo:

  IIF((C.CompanyName is null or C.ContactName is null, '#fee', '')

• Adicione a coluna derivada da Regra de Negócios ao MRP como um controle do tipo Texto e defina o valor do Widget para usar este widget.

  • Defina a Prioridade como 1.
  • Defina a Largura como 1.
  • Defina a Visibilidade do Rótulo como Oculto.

• Se não estiver visualizando o resultado desejado, verifique os temas dos painéis para ver se a linha ativa possui um valor de cor definido (incluindo branco). Pode ser necessário alterar a cor de fundo da linha ativa para transparente.

Exemplo

Contagem de caracteres

Download

contador_de_caracteres_v2.zip

Descrição

Este widget do painel SRP/Formulário permite configurar um valor de parâmetro de Limite de caracteres máximos e requer um parâmetro definido para CharLimit (limite de caracteres) e TextFieldID (ID do campo onde o widget será colocado). Assim que o widget for habilitado em um campo de Texto, ele exibirá os valores de Limite e Restante de caracteres do campo no modo de Edição.

Para localizar o TextFieldID, navegue até o campo Texto na interface do aplicativo, abra o campo no modo de edição e use um utilitário de desenvolvedor do navegador para inspecioná-lo. Por exemplo: Text-Area_0aae73c8-2002-42a2-99c4-242dac4f84db

Opcionalmente, configure um parâmetro de Índice com o widget, caso pretenda configurá-lo mais de uma vez em um painel.

Parâmetros

Notas de implementação

• Este widget requer que você crie um modelo em branco e aplique-o a um controle de modelo na página. Inclua um comentário no modelo, como "Olá, Mundo".

  Ao aplicar o widget Contagem de Caracteres ao controle de modelo, certifique-se de especificar TextFieldID no parâmetro do widget.

• Se você não estiver vendo as informações de contagem de caracteres claras fora do modo de edição, desmarque o campo Contêiner de Destino na Definição do Widget.

Exemplo

Leitor de código de barras/código QR

Download

qr_scanner2.zip

Descrição

Este widget é um leitor de código de barras e/ou QR code multiplataforma.

Notas de implementação

• Ao adicionar e definir o widget no App Builder, defina o valor Modos Suportados como Somente Visualização. Após a adição, coloque o widget sobre o Controle que você deseja que o valor escaneado preencha. Este Controle deve mapear para uma Coluna String/NVarchar em uma tabela subjacente. Se o nome deste Controle contiver o texto qr, o widget do leitor de QR Code será automaticamente colocado no topo.

• Confirme se o estado do painel em que o widget aparece está definido como Padrão. Marque o valor de Painel > Caixa de Borda > Estado Inicial do Painel = Padrão.

• Considere adicionar um segundo Controle de Texto ao painel com Editar Estado = Somente Leitura. Este Controle renderizará e exibirá o valor de saída do QR ou código de barras escaneado.

• Se você receber um NotReadableError, isso indica que a câmera que o widget está tentando usar já está em uso. Por exemplo: se você estiver em uma videoconferência usando sua câmera para transmissão de vídeo, pode ser necessário interromper a transmissão de vídeo se quiser demonstrar um aplicativo simultaneamente com o widget de leitor de código de barras/QR.

Link da biblioteca do GitHub para visualizar as configurações suportadas pelo widget: Código QR HTML5

Exemplo

Corredor de eventos automático

Download

AutoEventRunner.zip

Descrição e parâmetros

Este widget atualizará automaticamente a página do App Builder com base no parâmetro de intervalo especificado.

Outro possível caso de uso para este widget é fechar um painel após 10 segundos, por exemplo. Adicione um botão à sua página que execute um evento. Opcionalmente, defina o evento para atualizar os dados. Adicione este widget ao controle de botão.

Definir Text como vazio e ShowTimestamp como 0 permite que ele seja executado de forma oculta. 90000 são milissegundos, ou 90 segundos.

Exemplo

Controle deslizante de alcance

Download

range-slider.zip

Documentação

http://refreshless.com/nouislider

Descrição e parâmetros

Este controle deslizante permite que o usuário edite um campo numérico usando um controle deslizante móvel sobre uma linha.

Como designer, você pode definir os valores Mín., Máx. e Passo que você suporta. O padrão é de 0 a 100, com passo de 1.

O widget definirá automaticamente os "pips", ou pequenos pontos sob a linha para indicar a escala da linha.

Exemplo

Controle deslizante de dois pontos

Download

dois-pontos-deslizante.zip

Documentação

http://refreshless.com/nouislider

Descrição e parâmetros

Este controle deslizante permite que o usuário edite dois campos numéricos usando um controle deslizante móvel sobre uma linha.

Como designer, você pode definir os valores Mín., Máx. e Passo que você suporta. O padrão é de 0 a 100, com passo de 1.

O widget definirá automaticamente os "pips", ou pequenos pontos sob a linha para indicar a escala da linha.

Os parâmetros LowColumn e HighColumn não têm padrões e devem ser definidos com os nomes dos controles aos quais você deseja vincular os valores do controle deslizante.

Exemplo

Google Analytics

Download

google-analytics.zip

Descrição e parâmetros

Rastreia alterações de página e autenticação. Envia para o Google Analytics.

Exemplo

Formatador de data a partir de agora

Download

formato-data-a-partir.zip

Parâmetros

Exemplo

Rotador de imagens

Download

image-rotater.zip

Descrição

Gira uma imagem armazenada em uma célula binária. Cria dois botões: um gira a imagem no sentido horário e o outro no sentido anti-horário.

Funciona apenas no modo de edição, mas foi projetado para ser executado também no estado de visualização, de forma que o estado de visualização não renderiza nada.

Exemplo

Depurador de API de widget

Download

widget-api-debugger.zip

Descrição e parâmetros

Widget simples que exibe os seguintes valores de API do widget:

• Localidade (CultureId)
• Idioma (UiCultureId)
• Todos os Parâmetros

Exemplo

Carregador de fontes da Web

Download

web-font-loader.zip

Descrição e parâmetros

Carrega a fonte especificada via parâmetro. O padrão é Roboto.

O widget carregará a fonte especificada no navegador. Isso acontecerá quando o site for carregado pela primeira vez, para que o usuário não veja conteúdo com fonte incorreta.

• WebFontHostName: Nome do host para obter as fontes. Pode usar o Google ou qualquer outro provedor de fontes. Use // em vez de http ou https para evitar incompatibilidade com o estado de segurança atual.
• WebFontName: O nome da fonte a ser carregada. Ele é anexado à URL para que você também possa usar este parâmetro para carregar quaisquer outros parâmetros de URL exigidos por este hospedar. (selecionando apenas parte do texto via text=Hello ou escolhendo negrito em vez de espessura de fonte normal)
• LinkMediaString: Um valor que especifica as condições para aplicar a fonte. Os valores incluem uma largura mínima para excluir dispositivos móveis, screen and (min-width:500px)ou excluir ao imprimir, not print

Exemplo

Formatador de números de telefone

Download

formatador-de-número-de-telefone.zip

Descrição

Formata números de telefone e permite edição.

Definição de biblioteca

https://github.com/jackocnr/intl-tel-input

Parâmetros

• AllowDropdown: bool
  Mostrar o ícone no modo de edição

• InitialCountry: string
  Código de país único, usado como padrão quando vazio

• OnlyCountries: string
  Limite sua lista de seleção de países. No formato "us,gb,cz,mx" sem espaços

• PreferredCountries: string
  Estes países aparecem no topo da lista. No formato "us,gb,cz,mx" sem espaços

• UseNationalMode: bool
  Se o widget deve mostrar o código do país ou não

Exemplo

Carregador de favicon

Download

faviconwidget.zip

Descrição

Use para exibir um ícone Favicon personalizado para a instância do App Builder, que é exibido na barra de endereço da aba do navegador. O ícone também será exibido na tela inicial de um dispositivo móvel (iOS e Android) quando o site for adicionado à tela inicial do dispositivo móvel.

Ao instalar o Favicon Loader, primeiro carregue o arquivo Zip na área de Widgets da Coleção usada pelo aplicativo (em Temas), selecione "Nível do site" em "Modos suportados" e adicione os 4 valores de Parâmetros listados abaixo. Em seguida, acesse App Builder IDE > Configuração > Widgets do site e adicione o widget Favicon Loader e o Parâmetro FaviconUrl com um dos 3 tipos de formatos de URL aceitos (veja abaixo), juntamente com as entradas para os outros Parâmetros. Se você estiver especificando vários ícones de favicon, precisará adicionar várias instâncias do widget Favicon (uma para cada ícone especificado).

Parâmetros

• FaviconRel: Valor obrigatório, adicione o parâmetro à configuração junto com o valor. Exemplo: ícone
• FaviconSizes: Valor não obrigatório, mas adicione o parâmetro à configuração. Exemplo: 16x16
• FaviconType: Valor não obrigatório, mas adicione o parâmetro à configuração. Exemplo: .png

• FaviconUrl: Valor obrigatório, adicione o parâmetro à configuração junto com o valor. Exemplo: https://realfavicongenerator.net/blog/wp-content/uploads/fbrfg/apple-touch-icon.png

  Valores de URL aceitos:

  • URL completa (Exemplo: https://example.com/service/image/4264b246-79d6-40ad-8f38-4213fa955de5?tag=%22eDWmFG%2Bwe4ismdUwh5fW0A%3D%3D%22)
  • URL relativa (Exemplo: /service/image/4264b246-79d6-40ad-8f38-4213fa955de5?tag=%22eDWmFG%2Bwe4ismdUwh5fW0A%3D%3D%22)
  • URL de dados codificados em Base64 (Exemplo: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/...)

Exemplo

Discar

Download

dial.zip

Descrição

Crie um controle de discagem de interface de usuário personalizável para exibição no App Builder.

Ao instalar o Widget Dial, primeiro carregue o arquivo Zip para a área de Widgets da Coleção usada pelo aplicativo (em Temas), selecione "Nível do Site" em Modos Suportados e adicione as entradas e valores de Parâmetros necessários (os Parâmetros suportados estão listados abaixo). Isso pressupõe que você já tenha uma coluna na Fonte de Dados que contenha os dados que deseja exibir com o Dial. Em seguida, acesse a página onde deseja exibir o Dial para um Controle. No Designer de Controles, seção Informações do Widget, especifique o nome do Widget (por exemplo, Dial), defina as informações de Parâmetros para fornecer um mapeamento entre o Valor do Dial e o Nome do Controle que deseja exibir no Dial. Defina também o Modo de Interface do Widget (por exemplo, Sempre) e o Modo Ativo do Widget (por exemplo, Exibir e Editar).

Definição de biblioteca de fontes originais

https://github.com/aterrien/jQuery-Knob

Parâmetros

• DialAngleArc: Valor numérico de 0 a 360, 360 é um círculo completo, qualquer valor menor o torna mais um medidor. Exemplo: 360
• DialAngleOffset: Valor numérico de 0 a 360, para onde o 0% começa e depois gira. Exemplo: 270
• DialColor: Valor não obrigatório, defina a cor do mostrador no widget
• DialDisplayInput: Padrão = verdadeiro, se você quiser ocultar a entrada, defina como falso
• DialMax: Valor máximo, padrão = 100. Ao usar o widget para representar porcentagens, se o valor puder ultrapassar 100%, a prática recomendada é calcular o máximo em um campo diferente como 100. O valor que você passa precisa ser multiplicado por 100. Por exemplo: IIF(Value>100, 100, Value) AS Max.
• DialMin: Valor mínimo, padrão = 0
• DialReadOnly: Desativa entradas e eventos
• DialStep: Tamanho do passo, padrão = 1
• DialThickness: Espessura do medidor
• DialValue: Valor numérico a ser representado pelo Dial. Exemplo: 98,1
• DialValueSuffix: Unidade de medida representada pelo Dial, o padrão é porcentagem. Exemplo: %
• DialWidth: Largura do mostrador. Exemplo: 65%
• DialValuePrefix: Unidade de medida representada pelo Dial, posicionado antes/depois do valor. Exemplo: $

Exemplos

Copiar para a área de transferência (com ícone)

Download

clipboardwidget.zip

Descrição

Use para criar um controle de botão da área de transferência da interface do usuário no App Builder que permite ao usuário copiar as informações/dados configurados para a memória da área de transferência da máquina (para serem colados e usados em outro lugar). Não é necessário configurar parâmetros para usar este widget; você especifica o valor que deseja copiar como o campo Controle.

• Se você precisar alterar a aparência do widget do botão da área de transferência para outra coisa, edite o valor da classe i do arquivo view.html
• O texto da dica de ferramenta que aparece ao copiar também pode ser personalizado editando o valor title no arquivo view.html. O valor padrão é "Copiado!".

Exemplo

Copiar para a área de transferência (com botão)

Download

copiarparabotãodaáreadetransferência.zip

Descrição

Use para criar um controle de botão da área de transferência da interface do usuário no App Builder que permite ao usuário copiar as informações/dados configurados para a memória da área de transferência da máquina (para serem colados e usados em outro lugar). Este widget permite usar um botão em vez de um ícone. Não é necessário configurar parâmetros para usar este widget; você especifica o valor que deseja copiar como o campo Controle.

• Se você precisar alterar a aparência do widget do botão da área de transferência para outra coisa, edite o valor da classe i do arquivo view.html
• O texto da dica de ferramenta que aparece ao copiar também pode ser personalizado editando o valor title no arquivo view.html. O valor padrão é "Copiado!".

Exemplo

Upload de vários arquivos

Download

• multifileupload_3.3.zip
• multifileupload_3.0.zip
• multifileupload_2.0.zip

Descrição e parâmetros

O widget de upload de vários arquivos utiliza a biblioteca FilePond, versão 4.28.2, que pode ser encontrada em https://github.com/pqina/filepond. Este widget permite que vários arquivos sejam carregados de forma síncrona ou assíncrona, armazenando-os temporariamente em uma única coluna e utilizando o evento "save" para extrair o binário do arquivo e movê-lo para uma tabela separada, onde pode ser processado posteriormente ou movido para um sistema de arquivos local ou de rede.

O widget é necessário e inclui novos parâmetros para allowFileSizeValidation e maxFileSize.

O widget da versão 3.0 pode ser configurado para restringir uploads que excedam um determinado tamanho. Por padrão, o widget é definido como "256 KB" e esse valor pode ser alterado para qualquer arquivo em MB ou KB da documentação do Filepond, editando o arquivo binder.js. Para obter mais informações, consulte Validação de tamanho de arquivo do Filepond.

Além dos parâmetros especificados, os seguintes Parâmetros do Widget devem ser configurados para aproveitar a restrição de tamanho de arquivo:

• allowFileSizeValidation: valor padrão de '1'
• maxFileSize: sem padrão

Mais parâmetros estão disponíveis para configuração com base na documentação do FilePond em https://pqina.nl/filepond/docs/api/plugins/file-validate-size/ na seção "Propriedades". Para adicionar parâmetros/propriedades adicionais, você precisará editar o arquivo "binder.js" diretamente no widget. Observe que quaisquer parâmetros/propriedades adicionais adicionados podem não funcionar conforme o esperado e apenas os parâmetros acima foram testados.

Geolocalização

Download

geolocalização.zip

Descrição

Este widget obtém a localização atual do seu dispositivo a partir da geolocalização HTML5. Ele salvará as coordenadas nas colunas vinculadas aos controles com os termos "Latitude" e "Longitude". Elas podem ser ocultadas.

Parâmetros

• RefreshRate(em milissegundos)

O widget padrão é definido como -1 (Desativado). O registro não será alterado/salvo até que o sistema reconheça uma mudança de localização, comparando o registro da tabela com sua localização atual.

Exemplo: RefreshRate=5000 verificará sua localização a cada 5 segundos. Quando uma alteração for determinada, o registro será alterado.

Exemplo

Assinatura

Download

assinatura.zip

Documentação

https://willowsystems.github.io/jSignature

Descrição

Este widget permitirá que você exiba ou edite uma assinatura desenhada diretamente no navegador.

Ele é compatível com dispositivos touchscreen e salvará a assinatura como dados de imagem em um campo de banco de dados.

Parâmetros

• Width: Largura do valor numérico da caixa de assinatura
• Height: Altura do valor numérico da caixa de assinatura
• BackgroundColor: Cor de fundo da caixa de assinatura
• Color
• ImageFieldName: Parâmetro passado do controle de texto. É o nome do controle da imagem.
• LineWidth: Largura do valor numérico da linha sobre a qual o usuário assina

Exemplo

Formato de moeda

Download

currencyformatwidget.zip

Descrição

Este widget está disponível para Controles e altera uma entrada para o formato USD, onde os centavos são opcionais.

Parâmetros

N / D

Exemplo

Barras de classificação

Download

rating-bars.zip

Descrição

Este widget permite que o usuário insira/altere um valor selecionando-o em uma interface gráfica de classificação.

Parâmetros

• RatingTheme: Este valor é uma string e mudará a aparência da Barra de Classificação
• RatingValueOptions: Este valor é uma string e alterará os valores disponíveis na Barra de Classificação

Exemplo

Organograma

Download

organograma-panel.zip

Descrição

Este widget permite gerar um organograma em um painel com base nos dados subjacentes.

Parâmetros

• ApiKey: Este valor representa a chave de API que o App Builder emite, o recurso de API REST configurado que o widget utilizará
• jsonUrl: Este valor representa o caminho de URL totalmente qualificado para acessar os dados JSON
• property.id: O valor da chave do objeto de negócios. Por exemplo: employeeID
• property.items: O valor para isso deve ser 'itens'
• property.label: Este valor deve ser do objeto de negócio e representa o valor do sujeito que aparece no Organograma. Por exemplo: FullName
• property.parent: Este valor deve ser do objeto de negócio e representar a quem o sujeito se reporta. Por exemplo: reportsTo
• property.subtitle: Este valor deve ser do objeto de negócio e representa a classificação dos sujeitos na hierarquia. Por exemplo: title
• support.linktopage: Este valor deve ser '1'
• support.wrapping: Este valor deve ser '1'

Exemplo

Redimensionador de iframe

Download

iframeresizercontent.zip

Descrição

Este widget permite manter um iframe dimensionado de acordo com seu respectivo conteúdo. Permite redimensionar janelas e conteúdo, links em páginas, aninhamento e múltiplos iframes.

Documentação

redimensionador de iframe

Parâmetros

De modo geral, há dois componentes necessários para configurar o widget iframe Resizer para uso com um aplicativo App Builder:

1. A página externa que hospeda o App Builder em um iframe
2. Dentro do iframe onde o App Builder está sendo executado

Para obter mais informações sobre a configuração, consulte Exibir uma página do App Builder em um site com iframe

Banner do site

Download

banner_do_site.zip

Descrição e parâmetros

O Banner do Site é um widget para todo o site que exibe um banner na parte superior de todas as páginas do aplicativo. O banner é personalizável e pode ser facilmente configurado para exibir qualquer texto que você desejar. O widget suporta os 2 parâmetros a seguir:

• BannerText: O BannerText deve conter o texto que você deseja exibir no banner. Por exemplo: "Este é o ambiente Sandbox".
• BannerStyle: BannerStyle conterá o CSS embutido que estiliza o banner. Por exemplo: text-align:center;background-color:yellow

Exemplo