Saltar al contenido

Biblioteca de Descarga de Widgets

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 que un diseñador tome el control total sobre cómo se representa el campo. Los widgets se pueden usar para mejorar la experiencia de la interfaz de usuario para los usuarios. Para obtener más información sobre la despliegue y el trabajo con widgets en App Builder, vea Widgets. Para obtener información sobre la solución de problemas, consulte Solución de problemas de widgets.

Formato de Texto

Descargar

máscara de texto.zip

Descripción

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

Parámetros

  • TextFormat: cadena
  • TextPlaceholder: cadena

Formato de Texto

Cómo le gustaría que se enmascare el valor. Ejemplo: "(999) 999-9999" o "99/99/9999"

Aquí las definiciones de máscara son:

  • "a" representa un carácter alfa (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 que están predefinidas (por ejemplo, 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

selectordefechasenableddates.zip

Documentación

selector de fechas de bootstrap

Descripción

Este widget proporciona parámetros a un control de selección de fechas para habilitar fechas específicas en el calendario que el usuario puede seleccionar. No se podrán seleccionar las demás fechas.

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 fechas para determinar en qué mes debe abrirse. Por ejemplo: 08/03/2022- SelectedDateString: Cadena y es el valor de la columna de la tabla en la que está guardando la fila. Asegúrese de convertir la columna de fecha en el objeto comercial a una cadena antes de pasarla como parámetro. Por ejemplo: 08/12/2022

Notas de Despliegue

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

Es Escritorio

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 es un navegador de escritorio, establecerá un campo booleano (IsDesktop) en 1. El widget envuelve 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

  • Agregue una columna booleana IsDesktop a una tabla. Por ejemplo: Session
  • Para desplegar en un panel, puede agregar un control de casilla de verificación que apunte al nuevo control IsDesktop en un panel que esté configurado como totalmente transparente con una altura de 0. Esto garantiza que el control no ocupará ningún espacio en la página, pero se cargará
  • Una vez configurado como se describe anteriormente, ahora puede usar la columna Visibilidad para controlar la visibilidad del panel

Editor de Ases

Descargar

ace.zip

Descripción y Parámetros

El widget Ace Editor es una utilidad de edición de código de fuente abierta escrita en JavaScript. App Builder utiliza este editor dentro del IDE. Agrega este widget en cualquier parte de tu App Builder aplicación en la que desea incorporar una utilidad de edición de código.

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

Nombre del parámetro Predeterminado Traducible
autoComplete.mvSqlQueryId No
autoComplete.tableId No
bottom No
fontSize No
height No
left No
mode texto No
position No
right No
singleLine 0 No
theme mañana_por_la_noche No
top No
width No

Notas de Despliegue

  • Al agregar y definir el widget dentro App Builder, configure el valor Modos admitidos en Ver y editar
  • Al agregar Parámetros de widget, puede 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 le permite establecer dinámicamente el color de fondo de las filas en un panel de varias filas. El valor de la columna a la que está vinculado el widget determina el color de fondo para esa fila determinada. Un valor de columna de " o null revertirá el fondo de la fila 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 App Builder, configure el valor Modos admitidos en Ver y Editar
  • El color de la fila se determina en función del 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 declaració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 usar este widget

    • Configure la Prioridad en 1
    • Defina el Ancho en 1
    • Configure la Visibilidad de la etiqueta en Oculto
  • Si no ve el resultado deseado, verifique 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

imagen

Recuento de Caracteres

Descargar

contador_de_caracteres_v2.zip

Descripción

Este widget del panel SRP/Formulario le permite configurar un valor de parámetro 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 el widget está habilitado en un campo de texto, el widget muestra tanto el valor Límite de caracteres del campo como los valores Restantes mientras está en modo de edición.

Para localizar el TextFieldID, navegue hasta el campo Texto desde la vista de la interfaz de usuario de la aplicación, abra el campo en modo de edición y utilice una utilidad desarrollador de navegadores web para inspeccionar el campo. Por ejemplo: Text-Area_0aae73c8-2002-42a2-99c4-242dac4f84db

Opcionalmente, puede configurar un parámetro de índice con el widget si desea configurar el widget más de una vez en un panel.

Parámetros

Nombre del parámetro Predeterminado Traducible
CharLimit 32
TextFieldID
Index

Notas de Despliegue

  • Este widget requiere que crees una modelo en blanco y que la apliques a un control de plantilla en la página. Incluye un comentario en la plantilla, como "Hola mundo".

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

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

Ejemplo

imagen

Lector 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 dentro App Builder, configure el valor Modos admitidos en Solo lectura. Después de agregar, coloque el widget sobre el control que desea que se complete con el valor escaneado. Este control debe asignarse a una columna String/NVarchar en una tabla subyacente
  • Confirme que el estado del panel en el que aparece el widget esté configurado en Predeterminado. Marque el valor Panel > Edge Case > Initial Panel State = Predeterminado
  • Considere agregar un segundo control de texto al panel con Edit State = Read Only. 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 está intentando usar ya está en uso. Por ejemplo: si estás en una videoconferencia usando tu cámara para la transmisión de video, es posible que debas detener la transmisión de video si deseas hacer una demostración simultánea de una aplicación con el widget de escáner de código de barras o QR

enlace a la biblioteca de Github para ver las configuraciones admitidas por el widget: Código QR HTML5

Ejemplo

imagen

Ejecutor Automático de Eventos

Descargar

AutoEventRunner.zip

Descripción y Parámetros

Este widget actualizará automáticamente el App Builder página basada en el parámetro de intervalo especificado.

Otro posible caso de uso para este widget es cerrar un panel después de 10 segundos, por ejemplo. Agregue un botón a su página que ejecute un evento. Opcionalmente, configure el evento para actualizar los datos. Agregue este widget al control de botón.

Si configura Text en vacío y ShowTimestamp en 0, podrá ejecutarse oculto. El 90000 es milisegundos o 90 segundos.

Nombre del parámetro Predeterminado Traducible
Interval 90000 No
ClassNames No
Text Datos cargados No
ShowTimestamp 1 No
Clickable 1 No

Ejemplo

imagen

Control Deslizante de Rango

Descargar

control deslizante de rango.zip

Documentación

http://refreshless.com/nouislider

Descripción y Parámetros

Este control deslizante permite al usuario editar un campo numérico mediante un control deslizante móvil sobre una línea.

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

El widget establecerá automáticamente los "puntos" o pequeños puntos debajo de 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

imagen

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 al usuario editar dos campos numéricos mediante un control deslizante móvil sobre una línea.

Como diseñador, puede establecer los valores Mín, Máx y Paso que admita. El valor predeterminado es de 0 a 100, con un paso de 1.

El widget establecerá automáticamente los "puntos" o pequeños puntos debajo de 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 control a los que desea vincular los valores del control deslizante.

Nombre del parámetro Predeterminado Traducible
Min 0 No
Max 100 No
Step 1 No
LowColumn No
HighColumn No

Ejemplo

imagen

Análisis de Google

Descargar

google-analytics.zip

Descripción y Parámetros

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

Nombre del parámetro Predeterminado Traducible
Debug 0 No
GA4Tag No
ObsoleteOptimizeCode No
ObsoleteTrackingCode No

Ejemplo

imagen

A Partir de Ahora Formateador de Fechas

Descargar

desde-ahora-fecha-formateador.zip

Parámetros

Nombre del parámetro Predeterminado Traducible
FromDate No
HideSuffix {falso} No

Ejemplo

imagen

Rotador de Imagen

Descargar

rotador de imágenes.zip

Descripción

Gira una imagen almacenada en una celda binaria. Crea dos botones, uno gira la imagen en el sentido de las agujas del reloj y el otro en el sentido contrario.

Solo funciona en modo de edición, pero está diseñado para ejecutarse también en el estado de vista, de modo que el estado de vista no represente nada en absoluto.

Ejemplo

imagen

Depurador de API de Widgets

Descargar

widget-api-debugger.zip

Descripción y Parámetros

Widget simple que muestra los siguientes valores de API de widget:

  • Configuración regional (CultureId)
  • Idioma (UiCultureId)
  • Todos los parámetros
Nombre del parámetro Predeterminado Traducible
TestBindingControlName
TestBindingEmpty
TestBindingStringBrace
TestBindingStringQuoted
TestDefault Mi valor predeterminado
TestDefaultEmpty

Ejemplo

imagen

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 sucederá cuando el sitio se cargue por primera vez, por lo que el usuario no debería ver contenido que no tenga la fuente correcta.

  • WebFontHostName: Nombre de host para obtener las fuentes. Puede utilizar Google o cualquier otro proveedor de fuentes. Utilice // en lugar de http o https para evitar discrepancias con el estado seguro actual.
  • WebFontName: El nombre de la fuente que se cargará. Se adjunta 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 parte del texto mediante text=Hello o eligiendo negrita en lugar de 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

imagen

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 edición

  • InitialCountry: cadena
    Código de país único, utilizado como predeterminado cuando está vacío

  • OnlyCountries: cadena
    Limite la 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 del país o no

Nombre del parámetro Predeterminado Traducible
AllowDropdown Verdadero No
InitialCountry nosotros no
OnlyCountries No
PreferredCountries nosotros,gb No
UseNationalMode cierto no

Ejemplo

imagen

Cargador de Favicon

Descargar

faviconwidget.zip

Descripción

Se utiliza para mostrar un icono de favicon personalizado para el App Builder por ejemplo, se muestran 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 la pantalla de inicio del dispositivo móvil.

Al instalar Favicon Loader, primero cargue el archivo Zip en el área de Widgets de la Colección que utiliza la aplicación (en Temas), seleccione "Nivel del sitio" para Modos admitidos y agregue los 4 valores de parámetros que se enumeran a continuación. A continuación, vaya a App Builder IDE > Configuración > Widgets del sitio, agregue el widget Cargador de favicon y agregue el parámetro FaviconUrl con uno de los 3 tipos de formatos de URL aceptados (consulte a continuación) junto con las entradas para los otros parámetros. Si está especificando varios íconos de favicon, deberá agregar varias instancias del widget de favicon (una por cada ícono especificado).

Parámetros

  • FaviconRel: Valor obligatorio, agregue 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 agrega un parámetro a la configuración. Ejemplo: .png
  • FaviconUrl: Valor obligatorio, agregue 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/...)
Nombre del parámetro Predeterminado Traducible
FaviconRel icono No
FaviconSizes 16x16 No
FaviconType imagen/png No
FaviconUrl No

Ejemplo

imagen

Marcar

Descargar

dial.zip

Descripción

Cree un control de marcación de IU personalizable para mostrar en App Builder.

Al instalar el widget Dial, primero cargue el archivo Zip en el área Widgets de la Colección que utiliza la aplicación (en Temas), seleccione "Nivel de sitio" para Modos compatibles y agregue las entradas de Parámetros y los valores que necesita (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), configure la información de Parámetros para proporcionar una asignación entre DialValue y el Nombre del control que desea mostrar en el Dial. Configure también 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 de Fuentes Originales

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 más en un indicador. Ejemplo: 360
  • DialAngleOffset: Valor numérico de 0 a 360, donde comienza el 0 % y luego va aumentando. Ejemplo: 270
  • DialColor: Valor no requerido, define el color del dial en el widget
  • DialDisplayInput: Valor predeterminado = verdadero. Si desea ocultar la entrada, configúrela como falso.
  • DialMax: Valor máximo, predeterminado = 100. Al usar el widget para representar porcentajes, si el valor puede superar el 100 %, la mejor práctica es calcular el máximo en un campo diferente como 100. El valor que ingrese 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: Grosor del calibre
  • DialValue: Valor numérico que se representará mediante 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, ubicada antes o después del valor. Ejemplo: $
Nombre del parámetro Predeterminado Traducible
DialAngleArc 360 No
DialAngleOffset 270 No
DialColor No
DialDisplayInput cierto no
DialMax 100 No
DialMin 0 No
DialReadOnly cierto no
DialStep 1 No
DialThickness .05 No
DialValue No
DialValueSuffix % No
DialWidth 65% No
DialValuePrefix $ No

Ejemplos

imagen

imagen

Copiar al Portapapeles (con Icono)

Descargar

widget del portapapeles.zip

Descripción

Se utiliza para crear un control de botón del portapapeles de la 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 pegarlos y usarlos en otro lugar). No es necesario configurar parámetros para usar este widget, debe especificar el valor que 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 i class del archivo view.html
  • El texto de información sobre herramientas que aparece cuando copia también se puede personalizar editando el valor title en el archivo view.html. Este valor predeterminado es "¡Copiado!"

Ejemplo

imagen

Copiar al Portapapeles (con Botón)

Descargar

copiar al botón del portapapeles.zip

Descripción

Se utiliza para crear un control de botón del portapapeles de la 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 pegarlos y usarlos en otro lugar). Este widget le permite usar un botón en lugar de un ícono. No se requiere la configuración de parámetros para usar este widget, usted especifica el valor que 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 i class del archivo view.html
  • El texto de información sobre herramientas que aparece cuando copia también se puede personalizar editando el valor title en el archivo view.html. Este valor está predeterminado para leer "¡Copiado!"

Ejemplo

imagen

Carga y Descarga de Varios Archivos

Descargar

Descripción y Parámetros

El widget de carga de archivos múltiples utiliza la biblioteca FilePond, versión 4.28.2, que se puede encontrar en https://github.com/pqina/filepond. Este widget permite cargar varios archivos de forma sincrónica o asincrónica al almacenar temporalmente los archivos en una sola columna y utilizar el evento de guardado para extraer el binario del archivo y moverlo a una tabla separada donde se puede procesar más o mover 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. De forma predeterminada, el widget está configurado en "256 KB" y este valor se puede cambiar a cualquier archivo MB o KB de 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.

Nota

Si está cargando archivos en Amazon S3 Bucket y desea crear una estructura de directorio en niveles para los archivos, consulte el sistema de archivos de Amazon S3 artículo.

Nombre del parámetro Predeterminado Traducible Descripción
allowImagePreview 1 No Habilitar (1) o deshabilitar (0) la vista previa para los tipos de archivos de imagen.
allowMultiple 1 No Habilitar (1) o deshabilitar (0) la adición de múltiples archivos.
forceReload 1 No Habilite (1) o deshabilite (0) la ejecución de una actualización global después de que se haya cargado un lote de archivos.
runSave 1 No Habilite (1) o deshabilite (0) la ejecución del evento de guardar para cada archivo que se cargue en la columna de archivo del objeto comercial.
allowFileSizeValidation 1 No Habilite (1) o deshabilite (0) para permitir el uso de la configuración del parámetro maxFileSize.
maxFileSize 5000 KB No Valor del tamaño de archivo más grande que permitirá el widget. Debe expresarse en kilobytes y es un valor de cadena.

Además de los parámetros especificados, se deben configurar los siguientes parámetros del widget para aprovechar la restricción del 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 en https://pqina.nl/filepond/docs/api/plugins/file-validate-size/ en la sección "Propiedades". Para agregar parámetros o propiedades adicionales, deberá editar el archivo "binder.js" directamente en el widget. Tenga en cuenta que los parámetros o propiedades adicionales que agregue pueden no funcionar como se espera y solo se han probado los parámetros anteriores.

Geolocalización

Descargar

geolocalización.zip

Descripción

Este widget toma la ubicación actual de su dispositivo de Geolocalización HTML5. Guardará las coordenadas en las columnas que están vinculadas a los controles con los nmsmes "Latitud" y "Longitud". Estas pueden ocultarse.

Parámetros

  • RefreshRate(en milisegundos)

El valor predeterminado del widget es -1 (deshabilitado). El registro no se modificará ni guardará hasta que el sistema reconozca un cambio en la ubicación al comparar el registro de la tabla con su ubicación actual.

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

Nombre del parámetro Predeterminado Traducible
RefreshRate -1 No

Ejemplo

imagen

Firma

Descargar

firma.zip

Documentación

https://willowsystems.github.io/jSignature

Descripción

Este widget le permitirá visualizar o editar una firma dibujada directamente en el 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: 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 que se pasa desde el control de texto. Es el nombre del control de la imagen.
  • LineWidth: Ancho del valor numérico de la línea en la que el usuario firma
Nombre del parámetro Predeterminado Traducible
Width Ninguno No
Height Ninguno No
BackgroundColor #FFFFFF No
Color #000000 No
LineWidth 1 No
ImageFieldName En blanco (establecido por el campo de datos del mismo nombre) No

Ejemplo

imagen

Formato de Moneda

Descargar

widget de formato de moneda.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

imagen

Barras de Calificación

Descargar

barras de calificación.zip

Descripción

Este widget permite al usuario ingresar o cambiar un valor seleccionándolo desde una interfaz de calificación gráfica.

Parámetros

  • RatingTheme:Este valor es una cadena y cambiará el aspecto 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

imagen

Organigrama

Descargar

panel-organigrama.zip

Descripción

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

Parámetros

  • ApiKey:Este valor representa la clave API App Builder emite 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 comercial. Por ejemplo: employeeID- property.items:El valor para esto debería ser 'items'
  • property.label:Este valor debe ser del objeto de negocio y representa el valor del sujeto que aparece en el organigrama. Por ejemplo: FullName- property.parent: Este valor debe ser del objeto comercial y representa a quién informa el sujeto. Por ejemplo: reportsTo- property.subtitle: Este valor debe ser del objeto comercial 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'
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

imagen

Redimensionador de Iframe

Descargar

iframeresizercontent.zip

Descripción

Este widget permite mantener un iframe con el tamaño de su contenido correspondiente. Controla el cambio de tamaño de la ventana y el contenido, los enlaces en la página, la anidación y varios 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 an App Builder aplicación:

  1. El alojamiento de la página externa 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, consulte Mostrar an App Builder página en un sitio web con iframe

Banner del Sitio

Descargar

banner_del_sitio.zip

Descripción y Parámetros

Site Banner es un widget para todo el sitio que ofrece 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 lea cualquier texto que desee. El widget admite los siguientes 2 parámetros:

  • BannerText: BannerText debe contener el texto que desea que se muestre dentro del banner. Por ejemplo: "Este es el ambiente Sandbox".
  • BannerStyle: BannerStyles contendrá el CSS en línea que estiliza el banner. Por ejemplo: text-align:center;background-color:yellow
Nombre del parámetro Predeterminado Traducible
BannerText ¡Soy un banner del sitio! No
BannerStyle alineación del texto:centro;color de fondo:amarillo No

Ejemplo

imagen