Biblioteca de descargas 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 gancho de código en App Builder, lo que permite a un diseñador tener control total sobre cómo se representa el campo. Los widgets se pueden usar para mejorar la experiencia de interfaz de usuario para los usuarios. (Consulta también Widgets y Solución de problemas de widgets.)
Ace Editor
Descargar
Descripción y parámetros
El widget Ace Editor es una utilidad de edición de código 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 de App Builder donde desees incrustar una utilidad de editor de código.
Para más información y documentación, consulta Ace Code Editor. Desde App Builder 4.61, este widget utiliza ACE v1.43.6. Las versiones anteriores utilizan ACE v1.4.6.
| Nombre del parámetro | Predeterminado | Traducible |
|---|---|---|
autoComplete.mvSqlQueryId |
No | |
autoComplete.tableId |
No | |
bottom |
No | |
fontSize |
No | |
height |
No | |
left |
No | |
mode |
text | No |
position |
No | |
right |
No | |
singleLine |
0 | No |
theme |
tomorrow_night | No |
top |
No | |
width |
No |
Notas de implementación
- Al añadir y definir el widget en App Builder, establece el valor de Modos compatibles a Ver y editar
- Al añadir Parámetros de widget puedes definir Valores estáticos, por ejemplo:
- fontSize, Valor estático, 14
- height, Valor estático, 500
- mode, Valor estático, xml
Ejecutor automático de eventos
Descargar
Descripción y parámetros
Este widget actualizará automáticamente la página de App Builder según el parámetro de intervalo especificado.
Otro caso de uso posible para este widget es cerrar un panel después de 10 segundos, por ejemplo. Añade un botón a tu página que ejecute un evento. Opcionalmente, establece el evento para actualizar datos. Añade este widget al control de botón.
Al establecer Texto como vacío y MostrarMarcaTiempo a 0, permite que se ejecute de forma oculta. Los 90000 son milisegundos, o 90 segundos.
| Nombre del parámetro | Predeterminado | Traducible |
|---|---|---|
Interval |
90000 | No |
ClassNames |
No | |
Text |
Data loaded | No |
ShowTimestamp |
1 | No |
Clickable |
1 | No |
Ejemplo

Escáner de códigos de barras / códigos QR
Nota
Desde 4.0.35771 (11.34), el widget lector de códigos QR está integrado en App Builder y se selecciona cuando un campo contiene los nombres QRCode o Barcode.
Descargar
Descripción
Este widget es un lector de códigos de barras y/o códigos QR multiplataforma.
Notas de implementación
-
Al añadir y definir el widget en App Builder, establece el valor de Modos compatibles a Solo ver. Después de añadirlo, coloca el widget encima del control en el que deseas que se complete el valor escaneado. Este control debe asignarse a una columna de tipo Cadena/NVarchar en una tabla subyacente. Si el nombre de este control contiene el texto
qr, el widget de escáner de códigos QR se coloca automáticamente encima. -
Confirma que el estado del panel en el que aparece el widget esté configurado en Default. Verifica que Panel > Edge Case > Initial Panel State = Default.
-
Considera agregar un segundo Control de Texto al panel con Edit State = Read Only. Este Control renderizará y mostrará el valor de salida del código QR o de barras escaneado.
-
Si recibes un
NotReadableError, esto indica que la cámara que el widget intenta usar ya está en uso. Por ejemplo: Si estás en una videollamada usando tu cámara para la transmisión de video, es posible que necesites detener la transmisión de video si deseas demostrar simultáneamente 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 del widget: HTML5 QR Code
Ejemplo

Contador de caracteres
Descargar
Descripción
Este widget de panel SRP/Form permite configurar un valor de parámetro Limit (Límite) de caracteres superior y requiere un parámetro definido tanto para CharLimit (límite de caracteres) como para TextFieldID (ID del campo donde se colocará el widget). Una vez que habilitas el widget en un campo de Texto, el widget muestra tanto el Limit (Límite) de caracteres del campo como los valores Remaining (Restantes) mientras estés en modo Edit.
Para localizar el TextFieldID, navega al campo de Texto desde la vista de interfaz de usuario de la aplicación, abre el campo en modo Edit y utiliza una utilidad de desarrollador del navegador web para inspeccionar el campo. Por ejemplo: Text-Area_0aae73c8-2002-42a2-99c4-242dac4f84db
Opcionalmente, configura un parámetro Index con el widget si tienes la intención de configurar el widget más de una vez en un panel.
Parámetros
| Nombre del parámetro | Predeterminado | Traducible |
|---|---|---|
CharLimit |
32 | Sí |
TextFieldID |
Sí | |
Index |
Sí |
Notas de implementación
-
Este widget requiere que crees una Plantilla en blanco y apliques esta plantilla en blanco a un control de Plantilla en la página. Incluye un comentario en la Plantilla, como "Hello World"
Cuando apliques el widget Contador de caracteres al control de Plantilla, asegúrate de especificar TextFieldID en el parámetro del widget
-
Si no ves la información del contador de caracteres despejada fuera del modo Edit, desmarca el campo Target Container (Contenedor de destino) de la Definición del Widget.
Ejemplo

Copiar al portapapeles (con botón)
Descargar
Descripción
Se utiliza para crear un control de botón del portapapeles de interfaz de usuario en App Builder que permite a un usuario copiar la información/datos configurados en la memoria del portapapeles de su máquina (para ser pegados y utilizados en otro lugar). Este widget permite usar un botón en lugar de un icono. No es necesario configurar parámetros para utilizar este widget; especificas el valor que deseas copiar en el campo Control.
- Si necesitas cambiar la apariencia del widget del botón del portapapeles a otra cosa, edita el valor i class del archivo view.html
- El texto de la información sobre herramientas que aparece cuando copias también es personalizable editando el valor title en el archivo view.html. Este valor está configurado por defecto para leer "Copied!" (¡Copiado!)
Ejemplo

Copiar al portapapeles (con icono)
Descargar
Descripción
Se utiliza para crear un control de botón del portapapeles de interfaz de usuario en App Builder que permite a un usuario copiar la información/datos configurados en la memoria del portapapeles de su máquina (para ser pegados y utilizados en otro lugar). No es necesario configurar parámetros para utilizar este widget; especificas el valor que deseas copiar en el campo Control.
- Si necesita cambiar la apariencia del widget del botón de portapapeles a algo más, edite el valor de i class en el archivo view.html
- El texto de información sobre herramientas que aparece al copiar también se puede personalizar editando el valor de title en el archivo view.html. Este valor está configurado de forma predeterminada para leer "¡Copiado!"
Ejemplo

Formato de Moneda
Descarga
Descripción
Este widget está disponible para Controles y convierte una entrada al formato USD donde los centavos son opcionales.
Parámetros
N/A
Ejemplo

Selector de Fecha con Fechas Habilitadas
Descarga
Documentación
Descripción
Este widget proporciona parámetros a un control selector de fecha para habilitar fechas específicas en el calendario que el usuario puede seleccionar. Todas las otras fechas estarán deshabilitadas para la selección.
Parámetros
DatesToEnable: Cadena de fechas separadas por un espacio y formateadas comoMM/DD/YYYY. Por ejemplo:08/03/2022 08/12/2022 10/11/2022MinAvailableDate: Cadena y es la fecha que utiliza el selector de fecha para derivar qué mes debe abrir. Por ejemplo:08/03/2022SelectedDateString: Cadena y es el valor de la columna de la tabla en la que guarda en la fila. Asegúrese de convertir la columna de fecha en el objeto de negocio a una cadena antes de pasarla como parámetro. Por ejemplo:08/12/2022
Notas de implementación
Al agregar y definir el widget dentro de App Builder, establezca el valor de Modos Compatibles en Vista y Edición.
Marcador
Descarga
Descripción
Cree un control de marcador UI personalizable para mostrar en App Builder.
Al instalar el Widget de Marcador, primero cargue el archivo Zip en el área de Widgets de la Colección utilizada por la aplicación (en Temas), seleccione "Nivel de sitio" para Modos Compatibles y agregue las entradas de Parámetros y los valores que necesite (los Parámetros compatibles se enumeran a continuación). Esto asume que ya tiene una columna en la Fuente de Datos que contiene datos que desea mostrar con el Marcador. A continuación, diríjase a la página donde desea mostrar el Marcador para un Control. En el Diseñador de Control, sección Información del Widget, especifique el nombre del Widget (por ejemplo, Marcador), establezca la información de Parámetros para proporcionar una asignación entre DialValue y el Nombre de Control que desea mostrar en el Marcador. También establezca el Modo de Interfaz del Widget (por ejemplo, Siempre) y el Modo Activo del Widget (por ejemplo, Vista y Edición).
Definición de la biblioteca de origen original
https://github.com/aterrien/jQuery-Knob
Parámetros
DialAngleArc: Valor numérico de 0-360, 360 es un círculo completo, cualquier cosa menor lo convierte más en un indicador. Ejemplo: 360DialAngleOffset: Valor numérico de 0-360, para donde comienza el 0% y luego gira alrededor. Ejemplo: 270DialColor: Valor no requerido, define el color del marcador en el widgetDialDisplayInput: Predeterminado = verdadero, si desea ocultar la entrada, establézcalo en falsoDialMax: Valor máximo, predeterminado = 100. Cuando utiliza el widget para representar porcentajes, si el valor puede superar el 100%, la práctica recomendada es 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 = 0DialReadOnly: Deshabilita la entrada y los eventosDialStep: Tamaño de paso, predeterminado = 1DialThickness: Grosor del indicadorDialValue: Valor numérico a ser representado por el Marcador. Ejemplo: 98.1DialValueSuffix: Unidad de medida representada por el Marcador, el predeterminado es porcentaje. Ejemplo: %DialWidth: Ancho del marcador. Ejemplo: 65%DialValuePrefix: Unidad de medida representada por el Marcador, posicionada después/antes del valor. Ejemplo: $
| Nombre de parámetro | Predeterminado | Traducible |
|---|---|---|
DialAngleArc |
360 | No |
DialAngleOffset |
270 | No |
DialColor |
No | |
DialDisplayInput |
true | No |
DialMax |
100 | No |
DialMin |
0 | No |
DialReadOnly |
true | No |
DialStep |
1 | No |
DialThickness |
.05 | No |
DialValue |
No | |
DialValueSuffix |
% | No |
DialWidth |
65% | No |
DialValuePrefix |
$ | No |
Ejemplos


Color dinámico de filas
Descarga
Descripción
El widget Dinámico de Color de Filas permite establecer dinámicamente el color de fondo de las filas en un Panel de múltiples filas. 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 " o null revierte el color de fondo de la fila al color predeterminado utilizado para las filas MRP.
Se puede especificar el color como nombre de color o valor CSS. Por ejemplo: red, #f00, o #ff0000.
Parámetros
N/A
Notas de implementación
- Al agregar y definir el widget dentro de App Builder, establece el valor de Modos compatibles a Ver y Editar
- El color de la fila se determina según el control asignado al widget. Este control debe estar asignado a una columna que defina el color
-
Agrega 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 declaración IIF, para determinar el valor del color. Por ejemplo:
IIF((C.CompanyName is null or C.ContactName is null, '#fee', '') -
Agrega la columna derivada de la Regla de negocio al MRP como control de tipo Texto y establece el valor de Widget para usar este widget
- Establece la Prioridad a 1
- Define el Ancho como 1
- Establece Visibilidad de etiqueta a Oculta
-
Si no ves el resultado deseado, verifica cualquier tema del panel para ver si la fila activa tiene un valor de color definido (incluyendo blanco). Puede que necesites cambiar el color de fondo de la fila activa a transparente.
Ejemplo

Cargador de Favicon
Descarga
Descripción
Úsalo para mostrar un icono de Favicon personalizado para la instancia de App Builder, que se muestra en el área de 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 la pantalla de inicio del dispositivo móvil.
Al instalar el Cargador de Favicon, primero carga el archivo Zip al área de Widgets de la Colección utilizada por la aplicación (en Temas), selecciona "Nivel de sitio" para Modos compatibles, y agrega los 4 valores de parámetros listados a continuación. Luego ve a App Builder IDE > Configuración > Widgets de sitio, agrega el widget Cargador de Favicon, y agrega el parámetro FaviconUrl con uno de los 3 formatos de URL aceptados (ver a continuación) junto con entradas para los otros parámetros. Si especificas múltiples iconos de favicon, necesitarás agregar múltiples instancias del widget Favicon (una por cada icono que especifiques).
Parámetros
FaviconRel: Valor requerido, agrega el parámetro a la configuración junto con el valor. Ejemplo: iconFaviconSizes: Valor no requerido, pero agrega el parámetro a la configuración. Ejemplo: 16x16FaviconType: Valor no requerido, pero agrega el parámetro a la configuración. Ejemplo: .png-
FaviconUrl: Valor requerido, agrega el parámetro a la configuración junto con el valor. Ejemplo:https://realfavicongenerator.net/blog/wp-content/uploads/fbrfg/apple-touch-icon.pngValores 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 codificada en Base64 (Ejemplo:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/...)
- URL completa (Ejemplo:
| Nombre de parámetro | Predeterminado | Traducible |
|---|---|---|
FaviconRel |
icon | No |
FaviconSizes |
16x16 | No |
FaviconType |
image/png | No |
FaviconUrl |
No |
Ejemplo
![]()
Formateador de fechas desde ahora
Descargar
Parámetros
| Nombre de parámetro | Predeterminado | Traducible |
|---|---|---|
FromDate |
No | |
HideSuffix |
{false} | No |
Ejemplo

Geolocalización
Descargar
Descripción
Este widget toma la ubicación actual del dispositivo desde la geolocalización HTML5. Guardará las coordenadas en las columnas vinculadas a controles con los nombres "Latitude" y "Longitude". Estos pueden ocultarse.
Parámetros
RefreshRate(en milisegundos)
El widget está configurado de forma predeterminada en -1 (Deshabilitado). El registro no cambiará ni se guardará hasta que el sistema reconozca un cambio de ubicación comparando el registro de tabla con la ubicación actual.
Ejemplo: RefreshRate=5000 verificará la ubicación cada 5 segundos. Cuando se detecte un cambio, el registro se modificará.
| Nombre de parámetro | Predeterminado | Traducible |
|---|---|---|
RefreshRate |
-1 | No |
Ejemplo

Google Analytics
Descargar
Descripción y parámetros
Rastrea cambios de página y autenticación. Envía información a Google Analytics.
| Nombre de parámetro | Predeterminado | Traducible |
|---|---|---|
Debug |
0 | No |
GA4Tag |
No | |
ObsoleteOptimizeCode |
No | |
ObsoleteTrackingCode |
No |
Ejemplo

Redimensionador de Iframe
Descargar
Descripción
Este widget permite mantener un iframe ajustado al tamaño de su contenido. Maneja el redimensionamiento de ventanas y contenido, enlaces en la página, anidación e iframes múltiples.
Documentación
Parámetros
En general, se requieren dos componentes para configurar el widget Iframe Resizer para usarlo con una aplicación de App Builder:
- La página externa que aloja App Builder en un iframe
- Dentro del iframe donde App Builder se está ejecutando
Para obtener más información sobre la configuración, consulta Mostrar una página de App Builder en un sitio web con iframe
Rotador de imágenes
Descargar
Descripción
Rota una imagen almacenada en una celda binaria. Crea dos botones: uno rota la imagen en sentido horario y el otro en sentido antihorario.
Solo funciona en modo edición, pero está diseñado para ejecutarse también en modo de vista, por lo que la vista no renderiza nada en absoluto.
Ejemplo

Visor de imágenes
Descripción
Muestra una imagen con parámetros de tamaño adicionales. Se distribuye como parte de la colección de App Builder.
Consulta Widget Visor de imágenes para obtener la documentación completa.
IsDesktop
Descargar
Descripción
El widget IsDesktop se ejecutará al cargar la página y verificará si el viewport resultante se considera un navegador de escritorio. Si el widget determina que es un navegador de escritorio, establecerá un campo booleano (IsDesktop) en 1. El widget envuelve el resultado en una clase .widget-template-output-text que los desarrolladores pueden dirigir si necesitan un control adicional sobre la apariencia de los elementos en la pantalla.
Parámetros
IsDesktop: Booleano
Notas de implementación
- Agrega una columna Booleana IsDesktop a una tabla. Por ejemplo: Session
- Para implementar en un panel, puedes agregar un Control de Casilla que apunte al nuevo control IsDesktop en un panel configurado con transparencia total y altura de 0. Esto garantiza que el control no ocupe espacio en la página pero se cargará
- Una vez configurado como se describe arriba, ahora puedes usar la columna Visibility para controlar la visibilidad del panel
Markdown Renderer
Descripción y parámetros
Renderiza texto con formato Markdown de una columna o control vinculado como HTML formateado. Se distribuye como parte de la colección App Builder. Disponible en versiones 4.64 de App Builder y posteriores.
| Nombre del parámetro | Predeterminado | Traducible |
|---|---|---|
Sanitize |
1 | No |
Consulta la documentación completa del widget Markdown Renderer.
Multi File Upload
Enlaces de descarga
Utiliza los enlaces a continuación para descargar las diferentes versiones del widget Multi File Upload.
- Multi File Upload - Versión 3.4
- Multi File Upload - Versión 3.3
- Multi File Upload - Versión 3.0
- Multi File Upload - Versión 2.0
Descripción y parámetros
El widget Multi File Upload utiliza la biblioteca FilePond. Este widget permite cargar múltiples archivos de forma sincrónica o asincrónica almacenándolos temporalmente en una sola columna. Utiliza el evento Save para extraer el binario del archivo y moverlo a una tabla separada. Desde allí, se puede procesar más o mover a un sistema de archivos local o de red.
El widget es obligatorio e incluye parámetros para allowFileSizeValidation y maxFileSize.
La versión 3.4 del widget no muestra un icono de eliminar en los archivos cargados. En las versiones 3.3, 3.0 y 2.0, el icono de eliminar está presente, pero no es funcional. Se pueden eliminar archivos cargados con lógica de aplicación.
La versión 3.0 del widget se puede configurar para restringir cargas que superen un cierto tamaño. De forma predeterminada, el límite se establece en 256KB y este valor se puede cambiar a cualquier archivo en MB o KB desde la documentación de FilePond, editando el archivo binder.js. Para más información, consulta Validación de tamaño de archivo de FilePond.
Nota
Si estás cargando archivos en Amazon S3 Bucket y deseas crear una estructura de directorio escalonada para los archivos, consulta Sistema de archivos Amazon S3.
| Nombre del parámetro | Predeterminado | Traducible | Descripción |
|---|---|---|---|
allowImagePreview |
1 | No | Habilita (1) o deshabilita (0) la vista previa para tipos de archivo de imagen. |
allowMultiple |
1 | No | Habilita (1) o deshabilita (0) la adición de múltiples archivos. |
forceReload |
1 | No | Habilita (1) o deshabilita (0) la ejecución de una actualización global después de cargar un lote de archivos. |
runSave |
1 | No | Habilita (1) o deshabilita (0) la ejecución del evento save para cada archivo que se carga en la columna de archivo del Business Object. |
allowFileSizeValidation |
1 | No | Habilita (1) o deshabilita (0) permitir el uso de la configuración del parámetro maxFileSize. |
maxFileSize |
5000KB | No | Valor del tamaño de archivo más grande que permite el widget. Se debe expresar en kilobytes y es un valor de cadena. |
Además de los parámetros especificados, se deben configurar los siguientes parámetros para aprovechar la restricción de tamaño de archivo:
-
allowFileSizeValidation: Valor predeterminado de1. -
maxFileSize: Sin valor predeterminado.
Hay más parámetros disponibles para configurar según la documentación de FilePond bajo la sección Properties. Para agregar parámetros/propiedades adicionales, será necesario editar el archivo binder.js en el widget directamente.
Nota
Los parámetros/propiedades adicionales que se agreguen pueden no funcionar como se espera y solo se han probado los parámetros anteriores.
Org Chart
Descargar
Descripción
Este widget permite generar un Org Chart en un panel basado en datos subyacentes.
Parámetros
ApiKey: Este valor representa la clave de API que App Builder emite al recurso de API REST configurado que utilizará el widgetjsonUrl: Este valor representa la ruta de URL completamente calificada para acceder a los datos JSONproperty.id: El valor de clave del objeto comercial. Por ejemplo:employeeIDproperty.items: El valor para esto debe ser 'items'property.label: Este valor debe ser del objeto comercial y representa el valor del asunto que aparece en el Org Chart. Por ejemplo:FullNameproperty.parent: Este valor debe ser del objeto comercial y representa a quién reporta el asunto. Por ejemplo:reportsToproperty.subtitle: Este valor debe ser del objeto comercial y representa la clasificación del asunto en la jerarquía. Por ejemplo:titlesupport.linktopage: Este valor debe ser '1'support.wrapping: Este valor debe ser '1'
| Nombre del parámetro | Predeterminado | Traducible |
|---|---|---|
ApiKey |
Ninguno | No |
jsonUrl |
Ninguno | No |
property.id |
Ninguno | No |
property.items |
Ninguno | No |
property.label |
Ninguno | No |
property.parent |
Ninguno | No |
property.subtitle |
Ninguno | No |
support.linktopage |
1 | No |
support.wrapping |
1 | No |
Ejemplo

Range Slider
Descargar
Documentación
http://refreshless.com/nouislider
Descripción y parámetros
Este control deslizante permite al usuario editar un campo numérico usando un control deslizante móvil sobre una línea.
Como diseñador, puedes establecer los valores mínimo, máximo y paso que admites. El valor predeterminado es de 0 a 100, con un paso de 1.
El widget establecerá automáticamente los "pips", o pequeños puntos bajo la línea para indicar la escala de la línea.
| Nombre del parámetro | Predeterminado | Traducible |
|---|---|---|
Max |
100 | No |
Min |
0 | No |
Step |
1 | No |
Ejemplo

Rating Bars
Descargar
Descripción
Este widget permite al usuario ingresar/cambiar un valor seleccionando desde una interfaz de calificación gráfica.
Parámetros
RatingTheme: Este valor es una cadena y cambiará la apariencia de la barra de calificaciónRatingValueOptions: Este valor es una cadena y cambiará los valores disponibles en la barra de calificación
| Nombre del parámetro | Predeterminado | Traducible |
|---|---|---|
RatingTheme |
No | |
RatingValueOptions |
No |
Ejemplo

Firma
Descargar
Documentación
https://willowsystems.github.io/jSignature
Descripción
Este widget te permite mostrar o editar una firma dibujada directamente dentro del navegador.
Es compatible con dispositivos de pantalla táctil y guardará la firma como datos de imagen dentro de un campo de base de datos.
Parámetros
Width: Valor numérico del ancho de la caja de firmaHeight: Valor numérico del alto de la caja de firmaBackgroundColor: Color de fondo de la caja de firmaColorImageFieldName: Parámetro pasado desde el control de texto. Es el nombre del control de la imagen.LineWidth: Valor numérico del ancho de la línea sobre la que los usuarios firman
| Parameter Name | Default | Translatable |
|---|---|---|
Width |
None | No |
Height |
None | No |
BackgroundColor |
#FFFFFF | No |
Color |
#000000 | No |
LineWidth |
1 | No |
ImageFieldName |
Blank (Set by Data Field of Same Name) | No |
Ejemplo

Banner del sitio
Descargar
Descripción y parámetros
Site Banner es un widget de sitio completo que proporciona 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 leer cualquier texto que desees. El widget admite los siguientes 2 parámetros:
- BannerText: BannerText debe contener el texto que deseas mostrar dentro del banner. Por ejemplo: "Este es el entorno Sandbox"
- BannerStyle: BannerStyles contendrá el CSS inline que estiliza el banner. Por ejemplo: text-align:center;background-color:yellow
| Parameter Name | Default | Translatable |
|---|---|---|
BannerText |
I am a site banner! | No |
BannerStyle |
text-align:center;background-color:yellow | No |
Ejemplo

Formateador de números telefónicos
Descargar
telephone-number-formatter.zip
Descripción
Formatea números telefónicos y permite edición.
Definición de biblioteca
https://github.com/jackocnr/intl-tel-input
Parámetros
-
AllowDropdown: bool
Muestra el icono en modo de edición -
InitialCountry: string
Código de país único, usado como predeterminado cuando está vacío -
OnlyCountries: string
Limita tu lista de selección de países. En formato "us,gb,cz,mx" sin espacios -
PreferredCountries: string
Estos países aparecen en la parte superior 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
| Parameter Name | Default | Translatable |
|---|---|---|
AllowDropdown |
True | No |
InitialCountry |
us | No |
OnlyCountries |
No | |
PreferredCountries |
us,gb | No |
UseNationalMode |
true | No |
Ejemplo

Formato de texto
Descargar
Descripción
Crea una máscara en la caja de texto objetivo basada en la entrada del usuario, y luego almacena los datos ingresados.
Parámetros
TextFormat: stringTextPlaceholder: string
Formato de texto
Cómo deseas que se enmascare el valor. Ejemplo: "(999) 999-9999" o "99/99/9999"
Aquí están las definiciones de Máscara:
- "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 necesitas una definición de máscara distinta a las predefinidas (p. ej. Hex) puedes agregar tu propia definición en jquery. Por ejemplo:
$.mask.definitions['h'] = "[A-Fa-f0-9]";
Deslizador de Dos Puntos
Descargar
Documentación
http://refreshless.com/nouislider
Descripción y parámetros
Este deslizador permite al usuario editar dos campos numéricos usando un deslizador que se mueve sobre una línea.
Como diseñador puedes establecer los valores Mín., Máx. y Paso que deseas admitir. El valor predeterminado es de 0 a 100, con un paso de 1.
El widget establecerá automáticamente los "pips", o pequeños puntos bajo la línea para indicar la escala de la línea.
Los parámetros LowColumn y HighColumn no tienen valores predeterminados y deben configurarse con los nombres de los controles a los que deseas vincular los valores del deslizador.
| Nombre del Parámetro | Predeterminado | Traducible |
|---|---|---|
Min |
0 | No |
Max |
100 | No |
Step |
1 | No |
LowColumn |
No | |
HighColumn |
No |
Ejemplo

Cargador de Fuentes Web
Descargar
Descripción y parámetros
Carga la fuente especificada mediante parámetro. Por defecto utiliza Roboto.
El widget cargará la fuente especificada en el navegador. Esto sucederá cuando el sitio se cargue por primera vez, por lo que el usuario no debería ver contenido que no esté formateado correctamente.
WebFontHostName: Nombre del host para obtener las fuentes. Puede usar Google o cualquier otro proveedor de fuentes. Usa // en lugar de http o https para evitar desajustes con el estado seguro actual.WebFontName: El nombre de la fuente a cargar. Se agrega a la URL por lo que también puedes usar este parámetro para cargar otros parámetros de URL que requiera este host. (seleccionar solo texto mediante text=Hello o elegir fuente negrita vs 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 |
all | No |
WebFontHostName |
//fonts.googleapis.com/css?family= | No |
WebFontName |
Lato | No |
Ejemplo

Depurador de API de Widget
Descargar
Descripción y parámetros
Widget simple que muestra los siguientes valores de la API de widget:
- Configuración regional (CultureId)
- Idioma (UiCultureId)
- Todos los Parámetros
| Nombre del Parámetro | Predeterminado | Traducible |
|---|---|---|
TestBindingControlName |
Sí | |
TestBindingEmpty |
Sí | |
TestBindingStringBrace |
Sí | |
TestBindingStringQuoted |
Sí | |
TestDefault |
My Default Value | Sí |
TestDefaultEmpty |
Sí |
Ejemplo
