Biblioteca de Download de Widgets¶

Visão Geral¶

Esta página contém uma biblioteca de downloads de widgets para uso em App Builder. Os widgets fornecem um gancho de código para App Builder, permitindo que um designer tenha controle total sobre como o campo é renderizado. Widgets podem ser usados para melhorar a experiência da IU para os usuários. Para obter mais informações sobre como implementar e trabalhar com widgets em App Builder, veja Widgets. Para obter informações sobre solução de problemas, consulte 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 alfa (A-Z, a-z)
• "9" representa um caractere numérico (0-9)
• "*" representa um caractere alfanumérico (A-Z, a-z, 0-9)

Se você precisar de uma definição de máscara além daquelas que são predefinidas (ex. 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¶

selecionador de datas 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 em qual mês ele deve abrir. Por exemplo: 08/03/2022
• SelectedDateString: String e é o valor da coluna da tabela na qual você está salvando na linha. Certifique-se de converter a coluna de data no objeto de negócios para uma string antes de passá-la como um parâmetro. Por exemplo: 08/12/2022

Notas de Implementação¶

Ao adicionar e definir o widget dentro App Builder, defina o valor Modes Supported como View and Edit.

É Desktop¶

Download¶

isdesktop.zip

Descrição¶

O widget IsDesktop será executado no carregamento da página e verificará se a viewport resultante é considerada um navegador de desktop. Se o widget determinar que é 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 Boolean IsDesktop a uma tabela. Por exemplo: Session
• Para implementar em um painel, você pode adicionar um Checkbox Control que tenha como alvo o novo controle IsDesktop em um painel que esteja definido como totalmente transparente com uma altura de 0. Isso garante que o controle não ocupe espaço na página, mas será carregado
• Uma vez configurado conforme descrito acima, agora você pode usar a coluna Visibility 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 de código aberto escrito em JavaScript. App Builder usa este editor dentro do IDE. Adicione este widget em qualquer lugar do seu App Builder aplicativo onde você deseja incorporar um utilitário de editor de código.

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

Notas de Implementação¶

• Ao adicionar e definir o widget dentro App Builder, defina o valor Modos Suportados para Visualizar 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 Dynamic Row Color permite que você defina dinamicamente a cor de fundo para linhas em um Painel Multi-linha. O valor da coluna à qual o widget está vinculado determina a cor de fundo para aquela linha específica. Um valor de coluna de " ou null reverterá o 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 dentro 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 você não estiver vendo o resultado desejado, verifique todos os temas do painel para ver se a linha ativa tem 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/Form permite que você configure um valor de parâmetro de Limite de caractere superior e requer um parâmetro definido para CharLimit (limite de caractere) e TextFieldID (ID do campo onde o widget será colocado). Depois que o widget é habilitado em um campo de Texto, o widget exibe os valores de Limite e Restante de caractere de campo enquanto estiver no modo de Edição.

Para localizar o TextFieldID, navegue até o campo Text na visualização da IU do aplicativo, abra o campo no modo Edit e use um utilitário de desenvolvedor de navegador da Web para inspecionar o campo. Por exemplo: Text-Area_0aae73c8-2002-42a2-99c4-242dac4f84db

Opcionalmente, configure um parâmetro Index com o widget, se você pretende configurar o widget mais de uma vez em um painel.

Parâmetros¶

Notas de Implementação¶

• Este widget requer que você crie um Template em branco e aplique este template em branco a um controle Template na página. Inclua um comentário no Template, como "Hello World"

  Ao aplicar o widget Character Count ao controle Template, 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 Edit, desmarque o campo Target Container na Widget Definition.

Exemplo¶

Leitor de Código de Barras/qr Code¶

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 dentro App Builder, defina o valor Modos Suportados como Somente Visualização. Após adicionar, coloque o widget em cima do Controle que você deseja que o valor escaneado preencha. Este Controle deve mapear para uma Coluna String/NVarchar em uma tabela subjacente
• Confirme se o estado do painel em que o widget aparece está definido como Padrão. Marque Painel > Caso Extremo > Estado Inicial do Painel valor = Padrão
• Considere adicionar um segundo Controle de Texto ao painel com Estado de Edição = 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 parar a transmissão de vídeo se quiser demonstrar simultaneamente um aplicativo com o widget do scanner de código de barras/QR

Link da biblioteca do Github para visualizar as configurações suportadas pelo widget: HTML5 QR Code

Exemplo¶

Corredor de Eventos Automático¶

Download¶

AutoEventRunner.zip

Descrição e Parâmetros¶

Este widget atualizará automaticamente o App Builder página 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 Texto como vazio e ShowTimestamp como 0 permite que ele seja executado oculto. O 90000 é milissegundos, ou 90 segundos.

Exemplo¶

Controle Deslizante de Alcance¶

Download¶

controle deslizante de alcance.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 Min, Max e Step que você suporta. O padrão é de 0 a 100, com um 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 Min, Max e Step que você suporta. O padrão é de 0 a 100, com um 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 para os nomes de controle aos quais você deseja vincular os valores do controle deslizante.

Exemplo¶

Análise do Google¶

Download¶

google-analytics.zip

Descrição e Parâmetros¶

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

Exemplo¶

A Partir de Agora Formatador de Data¶

Download¶

from-now-date-formatter.zip

Parâmetros¶

Exemplo¶

Rotador de Imagem¶

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.

Só funciona no modo de edição, mas foi projetado para rodar também no estado de exibição, então o estado de exibiçã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¶

carregador-de-fonte-da-web.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, então o usuário não deverá ver conteúdo que não esteja com a fonte correta.

• 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 seguro atual.
• WebFontName: O nome da fonte a ser carregada. Isso é anexado à URL para que você também possa usar esse parâmetro para carregar quaisquer outros parâmetros de URL que este hospedar exigir. (selecionando apenas algum texto via text=Hello ou escolhendo negrito vs 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úmero 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
  Esses 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 o App Builder por exemplo, que são exibidos na área da 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 para a área Widgets da Coleção que está sendo usada pelo aplicativo (em Temas), selecione "Nível do site" para Modos suportados e adicione os 4 valores de Parâmetro listados abaixo. Em seguida, vá para App Builder IDE > Configuration > Site Widgets, e adicione o widget Favicon Loader, e adicione o Parâmetro FaviconUrl com um dos 3 tipos de formatos de URL aceitos (veja abaixo) junto com entradas para os outros Parâmetros. Se você estiver especificando vários ícones favicon, precisará adicionar várias instâncias do widget Favicon (uma por ícone sendo especificado).

Parâmetros¶

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

• FaviconUrl: Valor obrigatório, adicione 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¶

discar.zip

Descrição¶

Criar um controle de discagem de IU personalizável para exibição em App Builder.

Ao instalar o Dial Widget, primeiro carregue o arquivo Zip na área Widgets da Coleção que está sendo usada pelo aplicativo (em Temas), selecione "Nível do site" para 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 contém dados que você deseja exibir com o Dial. Em seguida, vá para a página onde deseja exibir o Dial para um Controle. No Control Designer, 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 DialValue e o Nome do Controle que você 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 Fonte Original¶

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

Parâmetros¶

• DialAngleArc: Valor numérico de 0-360, 360 é um círculo completo, qualquer valor menor o torna mais um medidor. Exemplo: 360
• DialAngleOffset: Valor numérico de 0-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 melhor prática é calcular o Máx. 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: Desabilita entrada 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 depois/antes 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 de área de transferência de IU em App Builder que permite que um usuário copie as informações/dados configurados na memória da área de transferência da máquina (para serem colados e usados em outro lugar). Nenhum parâmetro precisa ser configurado 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 i class do arquivo view.html
• O texto da dica de ferramenta que aparece quando você copia também é personalizável editando o valor title no arquivo view.html. Este valor é definido como "Copiado!"

Exemplo¶

Copiar para a Área de Transferência (com Botão)¶

Download¶

copytoclipboardbutton.zip

Descrição¶

Use para criar um controle de botão de área de transferência de IU em App Builder que permite que um usuário copie as informações/dados configurados na memória da área de transferência da máquina (para serem colados e usados em outro lugar). Este widget permite que você use um botão em vez de um ícone. Nenhum parâmetro precisa ser configurado 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 i class do arquivo view.html
• O texto da dica de ferramenta que aparece quando você copia também é personalizável editando o valor title no arquivo view.html. Este valor é definido como "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 Multi File Upload Widget usa 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 temporariamente os arquivos em uma única coluna e utilizando o evento save para puxar o binário do arquivo e movê-lo para uma tabela separada, onde ele pode ser processado posteriormente ou movido para um sistema de arquivos local ou de rede.

O widget é obrigató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 MB ou KB da documentação do filepond, editando o arquivo binder.js. Para obter mais informações, consulte Validação do tamanho do arquivo Filepond.

Além dos parâmetros especificados, os seguintes Parâmetros de 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 serem configurados 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 como esperado e apenas os parâmetros acima foram testados.

Geolocalização¶

Download¶

geolocalização.zip

Descrição¶

Este widget pega a localização atual do seu dispositivo da Geolocalização HTML5. Ele salvará as coordenadas nas colunas que estão vinculadas aos controles com os nsmes "Latitude" e "Longitude". Eles podem ser ocultados.

Parâmetros¶

• RefreshRate(em milissegundos)

O widget padrão é definido como -1 (Desabilitado). O registro não será alterado/salvo até que o sistema reconheça uma alteração no local, comparando o registro da tabela com seu local atual.

Exemplo: RefreshRate=5000verificará 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 em que os usuários assinam

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¶

classificação-barras.zip

Descrição¶

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

Parâmetros¶

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

Exemplo¶

Organograma¶

Download¶

organograma-painel.zip

Descrição¶

Este widget permite que você gere um Organograma em um painel com base em dados subjacentes.

Parâmetros¶

• ApiKey: Este valor representa a chave da API App Builder emite o recurso REST API configurado que o widget utilizará
• jsonUrl: Este valor representa o caminho de URL totalmente qualificado para acessar os dados JSON
• property.id: O valor Key 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 assunto que aparece no Organograma. Por exemplo: FullName
• property.parent: Este valor deve ser do objeto de negócio e representa a quem o assunto se reporta. Por exemplo: reportsTo
• property.subtitle: Este valor deve ser do objeto de negócio e representa a classificação dos assuntos 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 suporta manter um iframe dimensionado para seu respectivo conteúdo. Lida com redimensionamento de janela e conteúdo, em links de página, aninhamento e múltiplos iframes.

Documentação¶

iframe-resizer

Parâmetros¶

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

1. A hospedagem da página externa App Builder em um iframe
2. Dentro do iframe onde App Builder está em execução

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

Banner do Site¶

Download¶

banner_do_site.zip

Descrição e Parâmetros¶

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

• BannerText: BannerText deve conter o texto que você quer que seja exibido dentro do banner. Por exemplo: "Este é o ambiente Sandbox"
• BannerStyle: BannerStyles conterá o CSS inline que estiliza o banner. Por exemplo: text-align:center;background-color:yellow

Exemplo¶