Plataforma heredada

Adición de widgets

Puede añadir varios widgets en una pantalla. Al añadir widgets, también puede reorganizar los widgets según sea necesario.

Procedimiento

  1. Inicie sesión en Sterling Store Engagement. Se abre la página Inicio.
  2. En la cabecera de la aplicación, haga clic en el icono Herramientas de desarrollo Personalizar una pantalla o panel, y seleccione Personalizar en la lista.

    De forma alternativa, puede seleccionar Personalizar desde esquema. Se abre la ventana Seleccionar pantalla para ampliar . Se visualiza la lista de pantallas presentes en la pantalla actual. Por ejemplo, si abre la pantalla Búsqueda de orden , el árbol muestra Búsqueda de orden, Pantalla Lista de orden y otros presentes en esta pantalla.

    En el árbol, seleccione la pantalla que desea personalizar y pulse Ampliar pantalla.
    Nota:
    • Si no puede personalizar la pantalla seleccionada, se muestra un mensaje adecuado.
    • No puede utilizar la opción de personalización para personalizar pantallas que contienen iframes, como por ejemplo la pantalla Imprimir contenedor PDF.
    • Si se encuentran varias instancias de la misma pantalla, de forma predeterminada, la primera instancia de la pantalla se selecciona para la personalización.
  3. Seleccione la pantalla a la que desea añadir widgets.
    Nota:
    • Después de seleccionar una pantalla determinada para añadir extensiones, no puede seleccionar ninguna otra pantalla. Para seleccionar otra pantalla, pulse Cerrar.
    • Si no puede aplicar extensiones para la pantalla seleccionada, se muestra un mensaje adecuado.
  4. Pulse la pestaña Diseño , si es necesario.

    De forma predeterminada, la pestaña Diseño está seleccionada.

  5. Desde el panel Paleta de widgets , seleccione y arrastre el widget al panel Esquema de pantalla y coloque el widget en la posición adecuada. Se abre la ventana < widget seleccionado>: Propiedades básicas .
    Nota: Mientras coloca el widget seleccionado, el color verde indica que puede colocar el widget en la posición seleccionada. El color rojo indica que no puede colocar el widget en la posición seleccionada. También puede reorganizar los widgets colocando el widget seleccionado antes, después o dentro de un widget.
  6. En el campo Identificador exclusivo , especifique el identificador exclusivo para el widget.
  7. Si añade varios widgets a la pantalla, pulse Aplicar para ver los cambios.

    Si encuentra algún error durante la personalización, el registro de errores se muestra en la pestaña Problema . Para ver los mensajes de aviso, si los hay, pulse el separador Problema .

    La tabla siguiente proporciona las propiedades de widget obligatorias y mínimas:
    Tabla 1. Propiedades y descripción del widget

    La tabla siguiente proporciona las propiedades de widget obligatorias y mínimas

    Propiedades de widget Nombre de metadatos Descripción
    Widgets editables
    Recuadro de selección
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Etiqueta de campo etiqueta La etiqueta del widget.
    Valor seleccionado CheckedValue Presente en la pestaña Enlace. Se muestra el valor rellenado por el recuadro de selección cuando se selecciona.
    Valor no seleccionado UncheckedValue Presente en la pestaña Enlace. Se muestra el valor rellenado por el recuadro de selección cuando no se selecciona.
    Origen SourceBinding Muestra datos en la pantalla.
    Destino TargetBinding Transmite datos de la pantalla a un mashup.
    Lista de recuadros de selección
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Origen SourceBinding Muestra datos en la pantalla. Se recomienda añadir enlaces de origen para todos los widgets.
    Destino TargetBinding Transmite datos de la pantalla a un mashup. Se recomienda añadir un enlace de destino para todos los widgets.
    Opciones OptionsBinding Presente en la pestaña Enlace. Muestra todos los recuadros de selección de los datos.
    Recuadro de texto de fecha
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Origen SourceBinding Muestra datos en la pantalla.
    Destino TargetBinding Transmite datos de la pantalla a un mashup.
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Selección de filtro
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Opciones OptionsBinding Presente en la pestaña Enlace. Muestra todas las opciones aplicables para el widget.
    Origen SourceBinding Muestra datos en la pantalla.
    Destino TargetBinding Transmite datos de la pantalla a un mashup.
    Recuadro de texto de número
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Origen SourceBinding Muestra datos en la pantalla. Se recomienda añadir enlaces de origen para todos los widgets.
    Destino TargetBinding Transmite datos de la pantalla a un mashup. Se recomienda añadir un enlace de destino para todos los widgets.
    Botón de selección establecido
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Opciones OptionsBinding Presente en la pestaña Enlace. Muestra todos los botones de selección aplicables al widget.
    Origen SourceBinding Muestra datos en la pantalla.
    Destino TargetBinding Transmite datos de la pantalla a un mashup.
    Área de texto
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Origen SourceBinding Muestra datos en la pantalla.
    Destino TargetBinding Transmite datos de la pantalla a un mashup.
    Cuadro de texto
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Origen SourceBinding Muestra datos en la pantalla.
    Destino TargetBinding Transmite datos de la pantalla a un mashup.
    Recuadro de texto de moneda
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Origen SourceBinding Muestra datos en la pantalla.
    Destino TargetBinding Transmite datos de la pantalla a un mashup.
    Moneda CurrencyBinding Muestra el símbolo de moneda.
    Widgets no editables
    Botón
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Suceso onClick No aplicable Presente en la pestaña Eventos. Este evento se llama al hacer clic en cualquier botón de la pantalla.
    Etiqueta de datos
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Origen SourceBinding Presente en la pestaña Enlace. Muestra la etiqueta.
    Nota: No utilice el atributo de etiqueta.
    Etiqueta de campo etiqueta Muestra la etiqueta del widget.
    Valor valor Proporciona el texto de visualización para la etiqueta.
    Etiqueta
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Valor valor Proporciona el texto de visualización para la etiqueta.
    Campo oculto
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Origen SourceBinding Muestra datos en la pantalla. Se recomienda añadir enlaces de origen para todos los widgets.
    Destino TargetBinding Transmite datos de la pantalla a un mashup. Se recomienda añadir un enlace de destino para todos los widgets.
    Imagen
    Imagen ImageBinding Presente en la pestaña Enlace. Proporciona los detalles de imagen de los datos que se van a representar.
    Enlace
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Valor valor Proporciona el texto de visualización para el enlace.
    Origen SourceBinding Presente en la pestaña Enlace. Proporciona el texto de visualización para el enlace a partir de los datos.
    Suceso onClick No aplicable Presente en la pestaña Eventos. Este evento se llama al pulsar el enlace.
    Contenedores
    Panel de Contenido

    Se recomienda añadir al menos un widget dentro de un Panel de contenido.

    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Diseños soportados No aplicable Solo se da soporte al diseño de tabla. El diseño de tabla se puede añadir pulsando el botón Añadir . Se puede añadir un diseño de tabla para los nuevos widgets añadidos en la extensión. Después de añadir un diseño de tabla, no puede suprimirlo.
    Título de campo título Muestra el título de la pestaña cuando se añade dentro de un Contenedor de pestañas.
    ID de pantalla repetitiva repeatingscreenID Identificador de una pantalla que se repite basándose en los datos.
    Datos de pantalla repetitiva No aplicable Presente en la pestaña Enlace que llena las pantallas especificadas utilizando la propiedad de widget Repeating Screen ID .
    Diseño de tabla: Columnas columnas El número de columnas en un diseño de tabla.
    Diseño de tabla: ID de pantalla de repetición repeatingscreenID Identificador de una pantalla que se repite basándose en los datos.
    Diseño de tabla: Datos de pantalla repetitivos No aplicable Presente en la pestaña Enlace que llena las pantallas especificadas utilizando la propiedad de widget Repeating Screen ID .
    Contenedor con pestañas

    Añada al menos un Panel de contenido como widget hijo y especifique las propiedades adecuadas.

    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Panel de Título
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    Título de campo título Muestra el título especificado para un panel.
    Diseños soportados No aplicable Solo se da soporte al diseño de tabla. El diseño de tabla se puede añadir pulsando el botón Añadir . Se puede añadir un diseño de tabla para los nuevos widgets añadidos en la extensión. Después de añadir un diseño de tabla, no puede suprimirlo.
    Diseño de tabla: Columnas columnas El número de columnas en un diseño de tabla.
    Diseño de tabla: ID de pantalla de repetición repeatingscreenID Identificador de una pantalla que se repite basándose en los datos.
    Diseño de tabla: Datos de pantalla repetitivos No aplicable Presente en la pestaña Enlace que llena las pantallas especificadas utilizando la propiedad de widget Repeating Screen ID .
    Widgets especiales
    Referencia de pantalla
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    packageName packageName El nombre de paquete de la pantalla y es obligatorio.
    className className El nombre de clase de la pantalla y es obligatorio.
    Correlaciones de origen SourceMapping Presente en la pestaña Enlace, que es un enlace de reenvío para rellenar datos desde la pantalla padre.
    Correlaciones de destino TargetMapping Presente en la pestaña Enlace, que es un enlace de reenvío que se utiliza para enviar datos a la pantalla padre.
    Inicialización de manejador handleInit Indica si la pantalla dentro de la referencia de pantalla se inicializa automáticamente. Cuando cargue una pantalla personalizada dentro de este widget, asegúrese de que el valor esté establecido en false, si es necesario. De forma predeterminada, el valor se establece en false.
    Carga dinámica dynamicLoading Indica si el contenido del widget se carga utilizando un código personalizado. Si el valor se establece en true, el contenido no se visualiza al cargar el widget. Para visualizar el contenido del widget, asegúrese de escribir un código personalizado utilizando los métodos ControllerUtils.showChildScreen() y ScreenUtils.showChildScreen() .
    Cuadrícula De forma predeterminada, se añade una GridColumn . Puede editar la GridColumn, e introducir las propiedades adecuadas.
    Identificador exclusivo uId Obligatorio: El identificador exclusivo del widget. Añada el prefijo extn_al identificador.
    noDataMessage noDataMessage Muestra el mensaje adecuado cuando no se encuentran datos.
    Módulos No aplicable Los módulos controlan un comportamiento o características diferentes como, por ejemplo, la selección de una sola fila o la selección de varias filas de una cuadrícula. Para obtener más información sobre los módulos, consulte la documentación de JavaScript .
    Origen SourceBinding Muestra datos en la pantalla.
    Destino TargetBinding Transmite datos de la pantalla a un mashup.
    Columna de cuadrícula
    Campo campo Presente en la pestaña Enlace. Atributo exclusivo para las columnas que corresponden a los datos de columna.
    Origen SourceBinding Muestra datos en la pantalla.
    Destino TargetBinding Transmite datos de la pantalla a un mashup.
    Nombre de columna nombre Muestra la cabecera de columna.
    Oculto oculto Oculta una columna en una cuadrícula.
    Es editable editable Se utiliza para marcar una columna como editable. Asegúrese de que la cuadrícula también esté marcada como editable.
    Tipo de editor widgetType El tipo de widget se visualiza cuando la celda está en modalidad editable.
    Propiedades de editor EditorProps Propiedades que se pasan al tipo de widget. Por ejemplo, si desea marcarlo como obligatorio, asegúrese de que la propiedad esté seleccionada como required, escriba Booleany el valor true.
  8. Haga clic en Guardar para guardar todas las extensiones.
    Nota: Se recomienda renovar o volver a cargar la aplicación después de guardar las extensiones.
  9. Haga clic en Cerrar.