Saltar al contenido

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

ace.zip

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

AutoEventRunner.zip

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

image

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

qr_scanner2.zip

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

image

Contador de caracteres

Descargar

character_counter_v2.zip

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

image

Copiar al portapapeles (con botón)

Descargar

copytoclipboardbutton.zip

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

image

Copiar al portapapeles (con icono)

Descargar

clipboardwidget.zip

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

image

Formato de Moneda

Descarga

currencyformatwidget.zip

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

image

Selector de Fecha con Fechas Habilitadas

Descarga

datepickerenableddates.zip

Documentación

bootstrap-datepicker

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 como MM/DD/YYYY. Por ejemplo: 08/03/2022 08/12/2022 10/11/2022
  • MinAvailableDate: Cadena y es la fecha que utiliza el selector de fecha para derivar qué mes debe abrir. Por ejemplo: 08/03/2022
  • SelectedDateString: 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

dial.zip

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: 360
  • DialAngleOffset: Valor numérico de 0-360, para donde comienza el 0% y luego gira alrededor. Ejemplo: 270
  • DialColor: Valor no requerido, define el color del marcador en el widget
  • DialDisplayInput: Predeterminado = verdadero, si desea ocultar la entrada, establézcalo en falso
  • DialMax: 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 = 0
  • DialReadOnly: Deshabilita la entrada y los eventos
  • DialStep: Tamaño de paso, predeterminado = 1
  • DialThickness: Grosor del indicador
  • DialValue: Valor numérico a ser representado por el Marcador. Ejemplo: 98.1
  • DialValueSuffix: 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

image

image

Color dinámico de filas

Descarga

dynamic_row_color.zip

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

image

Cargador de Favicon

Descarga

faviconwidget.zip

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: icon
  • FaviconSizes: Valor no requerido, pero agrega el parámetro a la configuración. Ejemplo: 16x16
  • FaviconType: 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.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 codificada en Base64 (Ejemplo: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/...)
Nombre de parámetro Predeterminado Traducible
FaviconRel icon No
FaviconSizes 16x16 No
FaviconType image/png No
FaviconUrl No

Ejemplo

image

Formateador de fechas desde ahora

Descargar

from-now-date-formatter.zip

Parámetros

Nombre de parámetro Predeterminado Traducible
FromDate No
HideSuffix {false} No

Ejemplo

image

Geolocalización

Descargar

geolocation.zip

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

image

Google Analytics

Descargar

google-analytics.zip

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

image

Redimensionador de Iframe

Descargar

iframeresizercontent.zip

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

iframe-resizer

Parámetros

En general, se requieren dos componentes para configurar el widget Iframe Resizer para usarlo con una aplicación de App Builder:

  1. La página externa que aloja App Builder en un iframe
  2. 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

image-rotater.zip

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

image

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

isdesktop.zip

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

Utiliza los enlaces a continuación para descargar las diferentes versiones del widget Multi File Upload.

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 de 1.

  • 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

org-chart-panel.zip

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 widget
  • jsonUrl: Este valor representa la ruta de URL completamente calificada para acceder a los datos JSON
  • property.id: El valor de clave del objeto comercial. Por ejemplo: employeeID
  • property.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: FullName
  • property.parent: Este valor debe ser del objeto comercial y representa a quién reporta el asunto. Por ejemplo: reportsTo
  • property.subtitle: Este valor debe ser del objeto comercial y representa la clasificación del asunto en la jerarquía. Por ejemplo: title
  • support.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

image

Range Slider

Descargar

range-slider.zip

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

image

Rating Bars

Descargar

rating-bars.zip

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ón
  • RatingValueOptions: 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

image

Firma

Descargar

signature.zip

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 firma
  • Height: Valor numérico del alto de la caja de firma
  • BackgroundColor: Color de fondo de la caja de firma
  • Color
  • ImageFieldName: 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

image

Banner del sitio

Descargar

site_banner.zip

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

image

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

image

Formato de texto

Descargar

text_mask.zip

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: string
  • TextPlaceholder: 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

two-point-slider.zip

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

image

Cargador de Fuentes Web

Descargar

web-font-loader.zip

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

image

Depurador de API de Widget

Descargar

widget-api-debugger.zip

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

image