Biblioteca de descarga de widgets en Jitterbit App Builder

Descripción general

Esta página contiene una biblioteca de descargas de widgets para usar en App Builder. Los widgets proporcionan un enlace de código a App Builder, lo que permite al diseñador tener control total sobre la representación del campo. Los widgets pueden usarse para mejorar la experiencia de usuario. (Ver también Widgets y Solución de problemas de widgets.)

Formato de texto

Descargar

text_mask.zip

Descripción

Crea una máscara en el cuadro de texto seleccionado según la entrada del usuario y luego almacena los datos introducidos.

Parámetros

• TextFormat: cadena
• TextPlaceholder: cadena

Formato de texto

Cómo desea enmascarar el valor. Ejemplo: "(999) 999-9999" o "99/99/9999" Las definiciones de máscara son:

• "a" representa un carácter alfabético (A-Z, a-z)
• "9" representa un carácter numérico (0-9)
• "*" representa un carácter alfanumérico (A-Z, a-z, 0-9)

Si necesita una definición de máscara aparte de las predefinidas (p. ej., hexadecimal), puede agregar su propia definición en jQuery. Por ejemplo:

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

Selector de fechas con fechas habilitadas

Descargar

seleccionador de fechas habilitado.zip

Documentación

Selector de fechas de Bootstrap

Descripción

Este widget proporciona parámetros a un selector de fechas para habilitar fechas específicas en el calendario que el usuario puede seleccionar. Las demás fechas no se podrán seleccionar.

Parámetros

• DatesToEnable:Cadena de fechas separadas por un espacio y formateadas como MM/DD/YYYY. Por ejemplo: 08/03/2022 08/12/2022 10/11/2022- MinAvailableDate: Cadena y es la fecha que el selector de fechas utiliza para determinar el mes en el que debe abrirse. Por ejemplo: 08/03/2022- SelectedDateString: Cadena y es el valor de la columna de la tabla donde se guarda la fila. Asegúrese de convertir la columna de fecha del objeto de negocio a una cadena antes de pasarla como parámetro. Por ejemplo: 08/12/2022

Notas de despliegue

Al agregar y definir el widget dentro de App Builder, configure el valor Modos admitidos en Ver y editar.

Isdesktop

Descargar

isdesktop.zip

Descripción

El widget IsDesktop se ejecutará al cargar la página y comprobará si la ventana gráfica resultante se considera un navegador de escritorio. Si el widget determina que sí lo es, establecerá un campo booleano (IsDesktop) en 1. El widget encapsula la salida en un .widget-template-output-text clase que luego puede ser utilizada por un desarrollador si se necesita control adicional sobre la apariencia de los elementos en la pantalla.

Parámetros

• IsDesktop: Booleano

Notas de despliegue

• Agregar una columna booleana IsDesktop a una tabla. Por ejemplo: Sesión
• Para desplegarlo en un panel, puede agregar un control de casilla de verificación que dirija el nuevo control IsDesktop a un panel con transparencia total y una altura de 0. Esto garantiza que el control no ocupe espacio en la página, pero se cargue.
• Una vez configurado como se describió anteriormente, puede usar la columna Visibilidad para controlar la visibilidad del panel.

Editor de Ace

Descargar

ace.zip

Descripción y parámetros

El widget Ace Editor es una utilidad de edición de código abierto escrita en JavaScript. App Builder utiliza este editor dentro del IDE. Añade este widget en cualquier lugar de tu aplicación App Builder donde quieras integrar una utilidad de edición de código.

Para obtener más información y documentación, consulte: Ace Code Editor v1.4.6

Notas de despliegue

• Al agregar y definir el widget dentro de App Builder, configure el valor Modos admitidos en Ver y editar
• Al agregar Parámetros de widget puedes definir Valores estáticos, por ejemplo:
  • tamaño de fuente, valor estático, 14
  • altura, Valor estático, 500
  • modo, valor estático, xml

Color de fila dinámico

Descargar

color_de_fila_dinámica.zip

Descripción

El widget Color de Fila Dinámico permite configurar dinámicamente el color de fondo de las filas de un Panel Multifila. El valor de la columna a la que está vinculado el widget determina el color de fondo de esa fila. Un valor de columna de " Si se establece en null, el fondo de la fila se revertirá al color predeterminado utilizado para las filas MRP.

El color se puede especificar como nombre de color o valor CSS. Por ejemplo: red, #f00, o #ff0000.

Parámetros

N / A

Notas de despliegue

• Al agregar y definir el widget dentro de App Builder, configure el valor Modos admitidos en Ver y Editar El color de la fila se determina según el control asignado al widget. Este control debe asignarse a una columna que defina el color.

• Agregue una columna derivada a la regla de negocio del panel MRP que defina el valor del color. Por ejemplo: RowColor. Esta columna puede contener lógica dinámica, como una instrucción IIF, para determinar el valor del color. Por ejemplo:

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

• Agregue la columna derivada de la regla de negocio al MRP como un control de tipo Texto y configure el valor del widget para usarlo.

  • Establezca la Prioridad en 1
  • Defina el Ancho en 1
  • Configure la Visibilidad de la etiqueta como Oculta

• Si no obtiene el resultado deseado, revise los temas del panel para ver si la fila activa tiene un valor de color definido (incluido el blanco). Es posible que deba cambiar el color de fondo de la fila activa a transparente.

Ejemplo

Recuento de caracteres

Descargar

Contador de caracteres v2.zip

Descripción

Este widget del panel SRP/Formulario permite configurar un valor de parámetro Límite de caracteres superior y requiere que se definan tanto CharLimit (límite de caracteres) como TextFieldID (ID del campo donde se colocará el widget). Una vez habilitado en un campo de texto, el widget muestra los valores Límite de caracteres y Restantes en el modo de edición.

Para localizar el TextFieldID, acceda al campo Texto desde la interfaz de usuario de la aplicación, abra el campo en modo de edición y utilice una utilidad de desarrollador de navegador web para inspeccionarlo. Por ejemplo: Text-Area_0aae73c8-2002-42a2-99c4-242dac4f84db opcionalmente, configure un parámetro de índice con el widget si desea configurarlo más de una vez en un panel.

Parámetros {: #parameters }| Nombre del parámetro | Predeterminado | Traducible |

Notas de despliegue

Este widget requiere crear una plantilla en blanco y aplicarla a un control de modelo en la página. Incluya un comentario en la plantilla, como "Hola mundo".

Cuando aplique el widget Recuento de caracteres al control Plantilla, asegúrese de especificar TextFieldID en el parámetro del widget

• Si no ve la información del recuento de caracteres clara fuera del modo de edición, desmarque el campo Contenedor de destino en la Definición de widget.

Ejemplo

Escáner de código de barras/código QR

Descargar

qr_scanner2.zip

Descripción

Este widget es un lector de códigos de barras y/o códigos QR multiplataforma.

Notas de despliegue

Al agregar y definir el widget en App Builder, configure el valor Modos admitidos en Solo lectura. Después de agregarlo, coloque el widget sobre el control que desea que se rellene con el valor escaneado. Este control debe asignarse a una columna de cadena/NVarchar en una tabla subyacente. Si el nombre de este control contiene el texto... qr el widget del escáner de código QR se coloca automáticamente en la parte superior.

• Confirme que el estado del panel en el que aparece el widget esté configurado como Predeterminado. Compruebe que el valor de Panel > Caso límite > Estado inicial del panel sea Predeterminado.

• Considere agregar un segundo control de texto al panel con Estado de edición = Solo lectura. Este control representará y mostrará el valor de salida del código QR o de barras escaneado.

• Si recibe un NotReadableError Esto indica que la cámara que el widget intenta usar ya está en uso. Por ejemplo: si estás en una videoconferencia usando la cámara para la transmisión de video, es posible que tengas que detener la transmisión si quieres hacer una demostración simultánea de una aplicación con el widget de escáner de código de barras/QR.

enlace de la biblioteca de Github para ver las configuraciones compatibles con el widget: Código QR HTML5

Ejemplo

Ejecutor automático de eventos

Descargar

AutoEventRunner.zip

Descripción y parámetros

Este widget actualizará automáticamente la página del App Builder según el parámetro de intervalo especificado.

Otro posible uso de este widget es, por ejemplo, cerrar un panel después de 10 segundos. Añade un botón a tu página que ejecute un evento. Opcionalmente, configura el evento para que actualice los datos. Añade este widget al control de botón.

Si se deja Texto vacío y MostrarMarcaDeTiempo a 0, se permite su ejecución oculta. Los 90000 son milisegundos, o 90 segundos.

Ejemplo

Control deslizante de rango

Descargar

controlador de rango.zip

Documentación

http://refreshless.com/nouislider

Descripción y parámetros

Este control deslizante permite editar un campo numérico moviéndolo sobre una línea.

Como diseñador, puede establecer los valores mínimo, máximo y de paso que desee. El valor predeterminado es de 0 a 100, con un paso de 1.

El widget establecerá automáticamente los "puntos" debajo de la línea para indicar su escala.

Ejemplo

Control deslizante de dos puntos

Descargar

control deslizante de dos puntos.zip

Documentación

http://refreshless.com/nouislider

Descripción y parámetros

Este control deslizante permite editar dos campos numéricos moviéndolo sobre una línea.

Como diseñador, puede establecer los valores mínimo, máximo y de paso que desee. El valor predeterminado es de 0 a 100, con un paso de 1.

El widget establecerá automáticamente los "puntos" debajo de la línea para indicar su escala.

Los parámetros "ColumnaInferior" y "ColumnaAlta" no tienen valores predeterminados y deben configurarse con los nombres de los controles a los que desea vincular los valores del control deslizante.

Ejemplo

Google Analytics

Descargar

google-analytics.zip

Descripción y parámetros

Rastrea los cambios de página y la autenticación. Envía a Google Analytics.

Ejemplo

A partir de ahora formateador de fechas

Descargar

formato-de-fecha-desde-ahora.zip

Parámetros {: #parameters }| Nombre del parámetro | Predeterminado | Traducible |

Ejemplo

Rotador de imágenes

Descargar

image-rotater.zip

Descripción

Gira una imagen almacenada en una celda binaria. Crea dos botones: uno gira la imagen en sentido horario y el otro en sentido antihorario.

Solo funciona en modo de edición, pero está diseñado para ejecutarse también en modo de vista, por lo que este no representa nada.

Ejemplo

Depurador de API de widgets

Descargar

widget-api-debugger.zip

Descripción y parámetros

Widget simple que genera los siguientes valores de API:

• Configuración regional (CultureId)
• Idioma (UiCultureId)
• Todos los parámetros

Ejemplo

Cargador de fuentes web

Descargar

cargador de fuentes web.zip

Descripción y parámetros

Carga la fuente especificada mediante el parámetro. El valor predeterminado es Roboto.

El widget cargará la fuente especificada en el navegador. Esto ocurrirá al cargar el sitio web por primera vez, para que el usuario no vea contenido con una fuente incorrecta.

• WebFontHostName: Nombre del host para obtener las fuentes. Puede usar Google o cualquier otro proveedor de fuentes. Use // en lugar de http o https para evitar discrepancias con el estado seguro actual.
• WebFontName: El nombre de la fuente que se cargará. Se añade a la URL, por lo que también puede usar este parámetro para cargar cualquier otro parámetro de URL que requiera este alojar (seleccionando solo texto mediante text=Hello o eligiendo negrita o grosor de fuente normal).
• LinkMediaString: Un valor que especifica las condiciones para aplicar la fuente. Los valores incluyen un ancho mínimo para excluir dispositivos móviles. screen and (min-width:500px)o excluir al imprimir, not print| Nombre del parámetro | Predeterminado | Traducible | | ----------------- | ---------------------------------- | ------------ | | LinkMediaString| todos | No | | WebFontHostName| //fonts.googleapis.com/css?family= | No | | WebFontName | Lato | No |

Ejemplo

Formateador de números de teléfono

Descargar

formateador-de-número-de-teléfono.zip

Descripción

Formatea números de teléfono y permite editarlos.

Definición de biblioteca

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

Parámetros

• AllowDropdown: bool
  Mostrar el icono en modo de edición

• InitialCountry: cadena
  Código de país único, usado por defecto cuando está vacío

• OnlyCountries: cadena
  Limite la selección de países. En formato "us,gb,cz,mx" sin espacios.

• PreferredCountries: cadena
  Estos países aparecen al principio de la lista. En formato "us,gb,cz,mx" sin espacios.

• UseNationalMode: bool
  Si el widget debe mostrar el código de país o no

Ejemplo

Cargador de faviconos

Descargar

faviconwidget.zip

Descripción

Úselo para mostrar un favicon personalizado para la instancia de App Builder, que se mostrará en la barra de direcciones de la pestaña del navegador. El icono también se mostrará en la pantalla de inicio de un dispositivo móvil (iOS y Android) cuando el sitio se agregue a dicha pantalla.

Al instalar el Cargador de Faviconos, primero suba el archivo Zip al área de Widgets de la Colección que usa la aplicación (en Temas), seleccione "Nivel de sitio" en Modos compatibles y agregue los 4 valores de parámetro que se indican a continuación. A continuación, vaya a App Builder IDE > Configuración > Widgets del sitio, agregue el widget Cargador de Faviconos y el parámetro FaviconUrl con uno de los 3 formatos de URL aceptados (ver más abajo), junto con las entradas para los demás parámetros. Si especifica varios iconos de faviconos, deberá agregar varias instancias del widget de faviconos (una por cada icono especificado).

Parámetros

• FaviconRel Valor obligatorio: añadir el parámetro a la configuración junto con el valor. Ejemplo: icono
• FaviconSizes Valor no obligatorio: pero se añade un parámetro a la configuración. Ejemplo: 16x16
• FaviconType Valor no obligatorio: pero añade un parámetro a la configuración. Ejemplo: .png

• FaviconUrl Valor obligatorio: añadir el parámetro a la configuración junto con el valor. Ejemplo: https://realfavicongenerator.net/blog/wp-content/uploads/fbrfg/apple-touch-icon.png

  Valores de URL aceptados:

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

Ejemplo

Marcar

Descargar

dial.zip

Descripción

Cree un control de dial de UI personalizable para mostrar en App Builder.

Al instalar el widget Dial, primero cargue el archivo Zip en el área de Widgets de la Colección que usa la aplicación (en Temas), seleccione "Nivel de sitio" en Modos compatibles y agregue las entradas y valores de parámetro que necesite (los parámetros compatibles se enumeran a continuación). Esto supone que ya tiene una columna en la Fuente de datos que contiene los datos que desea mostrar con el Dial. A continuación, diríjase a la página donde desea mostrar el Dial para un Control. En el Diseñador de Controles, sección "Información del Widget", especifique el nombre del Widget (p. ej., Dial) y configure la información de los Parámetros para establecer una correspondencia entre el Valor del Dial y el Nombre del Control que desea mostrar en el Dial. También configure el Modo de Interfaz del Widget (p. ej., Siempre) y el Modo Activo del Widget (p. ej., Ver y Editar).

Definición de la biblioteca fuente original

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

Parámetros

• DialAngleArc: Valor numérico de 0 a 360. 360 es un círculo completo; cualquier valor menor lo convierte en un indicador. Ejemplo: 360
• DialAngleOffset: Valor numérico de 0 a 360, donde comienza el 0% y luego se va redondeando. Ejemplo: 270
• DialColor: Valor no requerido, define el color del dial en el widget
• DialDisplayInput: Valor predeterminado = verdadero. Si desea ocultar la entrada, configúrelo como falso.
• DialMax: Valor máximo, predeterminado = 100. Al usar el widget para representar porcentajes, si el valor puede superar el 100 %, se recomienda calcular el máximo en un campo diferente como 100. El valor que pase debe multiplicarse por 100. Por ejemplo: IIF(Value>100, 100, Value) AS Max.
• DialMin: Valor mínimo, predeterminado = 0
• DialReadOnly: Desactiva la entrada y los eventos
• DialStep: Tamaño del paso, predeterminado = 1
• DialThickness: Espesor del calibre
• DialValue: Valor numérico que representará el dial. Ejemplo: 98.1
• DialValueSuffix: Unidad de medida representada por el dial; el valor predeterminado es porcentaje. Ejemplo: %
• DialWidth: Ancho del dial. Ejemplo: 65%
• DialValuePrefix: Unidad de medida representada por el dial, colocada antes o después del valor. Ejemplo: $

Ejemplos

Copiar al portapapeles (con icono)

Descargar

clipboardwidget.zip

Descripción

Úselo para crear un control de botón del portapapeles de la interfaz de usuario en App Builder que permite al usuario copiar la información o los datos configurados en el portapapeles de su equipo (para pegarlos y usarlos en otro lugar). No se requieren parámetros para usar este widget; el valor que desea copiar se especifica como campo de control.

• Si necesita cambiar la apariencia del widget del botón del portapapeles a otra cosa, edite el valor de la clase i del archivo view.html El texto de la descripción emergente que aparece al copiar también se puede personalizar editando el valor title en el archivo view.html. Este valor predeterminado es "¡Copiado!".

Ejemplo

Copiar al portapapeles (con botón)

Descargar

botón copiar al portapapeles.zip

Descripción

Úselo para crear un control de botón del portapapeles de la interfaz de usuario en App Builder que permite al usuario copiar la información o los datos configurados en el portapapeles de su equipo (para pegarlos y usarlos en otro lugar). Este widget permite usar un botón en lugar de un icono. No se requieren parámetros para usar este widget; solo se especifica el valor que se desea copiar como campo de control.

• Si necesita cambiar la apariencia del widget del botón del portapapeles a otra cosa, edite el valor de la clase i del archivo view.html El texto de la descripción emergente que aparece al copiar también se puede personalizar editando el valor title en el archivo view.html. Este valor predeterminado es "¡Copiado!".

Ejemplo

Carga y descarga de varios archivos

Descargar

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

Descripción y parámetros

El widget de carga de múltiples archivos utiliza la biblioteca FilePond, versión 4.28.2, disponible en https://github.com/pqina/filepond este widget permite cargar varios archivos de forma síncrona o asíncrona. Para ello, los almacena temporalmente en una sola columna y utiliza el evento "save" para extraer el binario del archivo y moverlo a una tabla independiente, donde puede procesarse posteriormente o transferirse a un sistema de archivos local o de red.

El widget es obligatorio e incluye nuevos parámetros para allowFileSizeValidation y maxFileSize.

El widget de la versión 3.0 se puede configurar para restringir las cargas que superen un tamaño determinado. Por defecto, el widget está configurado en "256 KB" y este valor se puede cambiar a cualquier archivo de MB o KB desde la documentación de Filepond, editando el archivo binder.js. Para obtener más información, consulte Validación del tamaño de archivo de Filepond.

Además de los parámetros especificados, se deben configurar los siguientes parámetros del widget para aprovechar la restricción de tamaño de archivo:

• allowFileSizeValidation: valor predeterminado de '1'
• maxFileSize: Sin valor predeterminado

Se pueden configurar más parámetros según la documentación de FilePond en https://pqina.nl/filepond/docs/api/plugins/file-validate-size/ en la sección "Propiedades". Para añadir parámetros o propiedades adicionales, deberá editar el archivo "binder.js" directamente en el widget. Tenga en cuenta que cualquier parámetro o propiedad adicional que añada podría no funcionar correctamente, y solo se han probado los parámetros anteriores.

Geolocalización

Descargar

geolocalización.zip

Descripción

Este widget obtiene la ubicación actual de tu dispositivo mediante la geolocalización de HTML5. Guardará las coordenadas en las columnas asociadas a los controles con los valores de "Latitud" y "Longitud". Estas se pueden ocultar.

Parámetros

• RefreshRate(en milisegundos)

El widget está configurado en -1 (deshabilitado) por defecto. El registro no se modificará ni guardará hasta que el sistema detecte un cambio de ubicación al comparar el registro de la tabla con su ubicación actual.

Ejemplo: RefreshRate=5000 comprobará tu ubicación cada 5 segundos. Cuando se detecte un cambio, el registro se modificará.

Ejemplo

Firma

Descargar

firma.zip

Documentación

https://willowsystems.github.io/jSignature

Descripción

Este widget te permitirá mostrar o editar una firma dibujada directamente en el navegador.

Es compatible con dispositivos táctiles y guardará la firma como datos de imagen en un campo de base de datos.

Parámetros

• Width: Ancho del valor numérico del cuadro de firma
• Height: Altura del valor numérico del cuadro de firma
• BackgroundColor: Color de fondo del cuadro de firma
• Color
• ImageFieldName: Parámetro pasado desde el control de texto. Es el nombre del control de la imagen.
• LineWidth: Ancho del valor numérico de la línea sobre la que el usuario firma

Ejemplo

Formato de moneda

Descargar

currencyformatwidget.zip

Descripción

Este widget está disponible para Controles y cambia una entrada al formato USD, donde los centavos son opcionales.

Parámetros

N / A

Ejemplo

Barras de calificación

Descargar

barras de calificación.zip

Descripción

Este widget permite al usuario introducir o modificar un valor seleccionándolo en una interfaz gráfica de calificación.

Parámetros

• RatingTheme: Este valor es una cadena y cambiará la apariencia de la barra de calificación. RatingValueOptions este valor es una cadena y cambiará los valores disponibles en la barra de calificación.

Ejemplo

Organigrama

Descargar

organigrama-panel.zip

Descripción

Este widget permite generar un organigrama en un panel basado en datos subyacentes.

Parámetros

• ApiKey: Este valor representa la clave API que App Builder emite para el recurso API REST configurado que utilizará el widget.
• jsonUrl: Este valor representa la ruta URL completa para acceder a los datos JSON
• property.id: El valor clave del objeto de negocio. Por ejemplo: employeeID
• property.items: El valor para esto debería ser 'items'
• property.label: Este valor debe provenir del objeto de negocio y representa el valor del sujeto que aparece en el organigrama. Por ejemplo: FullName
• property.parent: Este valor debe provenir del objeto de negocio y representa a quién reporta el sujeto. Por ejemplo: reportsTo
• property.subtitle: Este valor debe provenir del objeto de negocio y representa la clasificación de los sujetos en la jerarquía. Por ejemplo: title
• support.linktopage: Este valor debe ser '1'
• support.wrapping: Este valor debe ser '1'

Ejemplo

Redimensionador de iframe

Descargar

iframeresizercontent.zip

Descripción

Este widget permite mantener el tamaño de un iframe según su contenido. Gestiona el cambio de tamaño de ventanas y contenido, enlaces dentro de la página, la anidación y la gestión de múltiples iframes.

Documentación

cambiador de tamaño de iframe

Parámetros

En términos generales, se requieren dos componentes para configurar el widget iframe Resizer para su uso con una aplicación App Builder:

1. La página externa que aloja App Builder en un iframe
2. Dentro del iframe donde se ejecuta App Builder

Para obtener más información sobre la configuración, consulte Mostrar una página de App Builder en un sitio web con iframe

Banner del sitio

Descargar

banner_del_sitio.zip

Descripción y parámetros

El Banner del Sitio es un widget para todo el sitio que muestra un banner en la parte superior de todas las páginas de la aplicación. El banner es personalizable y se puede configurar fácilmente para que muestre cualquier texto. El widget admite los siguientes dos parámetros:

• BannerText: BannerText debe contener el texto que desea que se muestre en el banner. Por ejemplo: "Este es el ambiente Sandbox". Estilo de banner: Los estilos de banner contendrán el CSS en línea que estiliza el banner. Por ejemplo: text-align:center;background-color:yellow

Ejemplo