Cómo modificar la interfaz web mediante Web Screen Painter

casm173
Web Screen Painter (WSP) permite modificar los formularios web en función de los requisitos del sitio sin programación.
Algunos de los formularios de la Gestión del conocimiento no se pueden modificar en la vista de diseño de Web Screen Painter. En estos casos, existen enfoques alternativos para lograr la personalización, como por ejemplo:
  • Vista de documento: la plantilla de documento que se utiliza al crear el documento determina el contenido de esta página. Estas plantillas se pueden modificar en la ficha Administración, en Documentos, Plantillas de documento.
  • Lista de documentos sobre categorías de conocimiento: esta página se puede modificar mediante WSP, pero también la gestionan las preferencias del usuario. La pantalla Preferencias ofrece a los usuarios posibilidades de personalización que les permiten definir qué propiedades de los documentos deben mostrarse en la lista de documentos y cuántos documentos deben aparecer en cada página.
Siga los pasos siguientes:
  1. Modificación de un formulario
    WSP siempre guarda cambios en el servidor donde se instala WSP. Cuando se guarda un archivo, este pasa a estar disponible para otros usuarios de Web Screen Painter en sesiones de vista previa; sin embargo, los usuarios habituales de CA SDM no pueden visualizarlo. Esto se debe a que WSP guarda todos los archivos en el directorio site/mods/wsp y las sesiones normales de CA SDM no utilizan esto directorio.
  2. Si se realizan cambios en el formulario web en el sistema de prueba, migre del sistema de prueba al de producción.
  3. Suprima formularios tras la publicación (si procede).
Verificación de los requisitos previos
Verifique los siguientes requisitos previos antes de iniciar la personalización:
  • Se ha modificado el esquema que se desea agregar a los formularios web.
  • Se han comprobado estos requisitos previos para publicar los formularios web correctamente (solo para la configuración de disponibilidad avanzada):
    • (Recomendado) Los servicios de CA SDM están en ejecución en todos los servidores de CA SDM. De lo contrario, Web Screen Painter solamente publicará en los servidores de CA SDM que funcionan correctamente.
    • (Obligatorio) Se está ejecutando al menos una instancia del motor web en todos los servidores de CA SDM.
Inicie Web Screen Painter
En primer lugar, para poder modificar formularios web, se debe iniciar Web Screen Painter.
Siga los pasos siguientes:
  1. Inicie sesión en el equipo donde está instalado WSP.
  2. Inicie Web Screen Painter.
    • (Windows) Haga clic en Inicio, Programas, CA, Service Desk, WSP.
    • (UNIX) Escriba el comando
      pdm_wsp
      con $NX_ROOT/bin en la ruta.
      Cuando se utiliza UNIX, asegúrese de que Firefox esté instalado para emplear WSP.
    Se abrirá la ventana de inicio de sesión de Web Screen Painter.
  3. Introduzca las credenciales de inicio de sesión.
    WSP muestra el formulario principal.
Selección del formulario para modificar
Si se desea, se puede crear un formulario o abrir uno existente para su modificación. Elija una de las opciones siguientes:
Crear un formulario
Cree un formulario en WSP
Siga los pasos siguientes:
  1. Haga clic en Archivo, Nuevo.
    Aparecerá el cuadro de diálogo Nuevo formulario.
  2. Rellene los campos siguientes según sea necesario:
    • Tipo de interfaz o archivo
      Indica el tipo de archivo del formulario. Por ejemplo, para crear un formulario HTMPL, se selecciona una interfaz (Analista, Cliente, Empleado, Predeterminada o PDA). Para crear un formulario de otro tipo de archivo, seleccione el tipo directamente (Hoja de estilo CSS, HTML o JavaScript). Cuando se selecciona una interfaz o tipo de archivo, WSP muestra una lista de todas las plantillas disponibles para el tipo de archivo seleccionado en el campo Nombre de archivo.
    • Grupo de formularios
      Indica el grupo de formularios (tal y como se ha definido para la instalación de CA SDM) donde se desea crear el nuevo formulario o archivo. Si no ha definido ningún grupo de formularios, solo se mostrará el grupo de formularios predeterminado.
    • Nombre de archivo
      Indica la plantilla para el tipo de archivo o la interfaz seleccionada. Las plantillas contienen los requisitos básicos para los formularios o archivos nuevos según su tipo.
    • Seleccione una tabla para la nueva lista o el formulario de detalles.
      Indica las tablas de CA SDM para las que se puede crear un nuevo formulario de detalles o lista. Este campo se rellena en función de la selección de una interfaz (Analista, Cliente, Empleado, Predeterminada o PDA).
      Solo puede existir un formulario de detalles o de lista por cada tabla en los grupos de formularios, de forma que será necesario editar un formulario existente (en lugar de crear otro nuevo) en el caso de las tablas que ya dispongan de un formulario. Si desea disponer de varias versiones de un formulario, cree uno o varios grupos de formularios para albergar las otras versiones.
  3. Haga clic en Nuevo.
  4. Se mostrará el formulario para las personalizaciones. Se mostrarán estas dos fichas:
    1. Diseño
      Está disponible para los formularios de detalles, los formularios de lista y los formularios de barra de menús, y muestra los controles del formulario con la misma disposición aproximada que verían los usuarios. No se trata de una imagen del aspecto del formulario para los usuarios finales. Para verla, seleccione
      Herramientas
      ,
      Vista previa
      .
    2. Fuente
      Se trata de un editor similar a Bloc de notas que permite revisar y editar el código fuente de los formularios. Algunos formularios solo se pueden editar en la ficha Fuente. En estos casos, la ventana de edición se abre en la ficha Fuente y la ficha Diseño se desactiva.
    El formulario estará preparado para la personalización.
    Cuando se crea o edita un formulario de detalle o lista, se deben usar los prefijos list_ y detail_ en el nombre del archivo HTMPL. Por ejemplo, utilice list_test.htmp y detail_test.htmpl. Este prefijo permite mostrar una vista previa correcta de un formulario. Cuando guarde una plantilla de detalle con un nombre personalizado, manualmente debe editar también la etiqueta <PDM_WSP>. Por ejemplo, <PDM_WSP mode=edit preview="test.htmpl+OP=CREATE_NEW" factory=cr>.
Apertura de formularios existentes
Se puede abrir un formulario existente en Web Screen Painter para modificarlo.
Siga los pasos siguientes:
  1. Seleccione Archivo, Abrir.
    Aparecerá el cuadro de diálogo Abrir formulario.
  2. Seleccione la interfaz (Analista, Cliente, Empleado o Predeterminado) o el tipo de archivo (Hoja de estilo CSS, JavaScript o HTML) y el grupo de formularios que contenga el formulario que desea editar.
  3. Seleccione el formulario que desea editar en la lista o escriba su nombre en el cuadro de texto.
    Cuando se introduce un nombre en el cuadro de texto, Web Screen Painter se desplaza automáticamente por la lista hasta el primer nombre que coincide con los caracteres introducidos. Puede utilizar la lista desplegable Archivos de estado para restringir la lista de archivos mostrados:
    • Sitio modificado con cambios no publicados (+)
      Limita la lista a los archivos modificados con Web Screen Painter que aún no se han publicado. Estos archivos están identificados por un signo más (+) tras el nombre de archivo.
    • Sitio modificado (*)
      Limita la lista a los formularios modificados en el departamento, tanto publicados como sin publicar. Los archivos sin publicar se identifican con el signo más (+) tras su nombre, mientras que las modificaciones de sitios publicados se identifican con un asterisco (*) tras el nombre del archivo.
    • Todos
      Muestra la lista sin restricciones. Los archivos sin publicar se identifican con el signo más (+) tras su nombre, mientras que las modificaciones de sitios publicados se identifican con un asterisco (*) tras el nombre del archivo.
  4. Haga clic en Open.
    Se mostrará el formulario y estará listo para su personalización.
Modificación de un formulario
Tras abrir el formulario que desea editar en Web Screen Painter, podrá utilizar la barra de herramientas, los comandos de menús y los accesos directos para personalizarlo. Se pueden realizar las siguientes personalizaciones:
  • Inserción de controles
  • Edición de propiedades de control
  • Modificación de barras de menús
  • Modificación de hojas de estilo
  • Modificación del formulario de vista previa al pasar el ratón
  • Modificación de la lista de cuadrícula de datos en formularios de lista
  • Modificación de blocs de notas en formularios de detalles
  • Modificación de archivos JavaScript y HTML
Inserción de controles
Agregue un control en el formulario. Por ejemplo, agregue un cuadro de texto en el formulario.
Los controles que se pueden insertar tanto en el formulario de lista y como en el de detalles son los siguientes:
Control
Icono
Descripción
Insertar fila
BSVC_r12.1--Inserting a Control
El control seleccionado pasará a ocupar la última posición en la fila actual (los controles siguientes se colocarán en la fila siguiente).
Eliminar fila
N/D
Elimina todos los controles situados en la misma fila que el seleccionado.
Cuadro de texto
BSVC_r12.1--Inserting a Control (2)
Inserta un cuadro de texto de una o varias líneas para editar una cadena o un campo de texto.
Lista desplegable
BSVC_r12.1--Inserting a Control (3)
Inserta una lista desplegable para editar un campo que se valida de acuerdo a una tabla.
Búsqueda
BSVC_r12.1--Inserting a Control (4)
Inserta un control de búsqueda para editar un campo que se valida de acuerdo a una tabla. El control consta de un cuadro de texto con un hipervínculo en la etiqueta que abre un formulario de selección.
Botón
BSVC_r12.1--Inserting a Control (12)
Inserta un botón.
Búsqueda jerárquica
BSVC_r12.1--Inserting a Control (5)
Es similar a un control de búsqueda excepto por el hecho de que se utiliza para un campo con un selector jerárquico (como una categoría de solicitud).
Fecha
BSVC_r12.1--Inserting a Control (6)
Inserta un campo de fecha. El control consta de un cuadro de texto con un hipervínculo en la etiqueta que abre un selector de fecha.
Los siguientes controles solo están disponibles para los formularios de detalles:
Control
Icono
Descripción
Casilla de verificación
BSVC_r12.1--Inserting a Control (7)
Inserta una casilla de verificación.
Editor HTML
BSVC_r12.1--Inserting a Control (8)
Inserta un editor HTML para campos de texto que contienen HTML.
Cuadro de texto de solo lectura
BSVC_r12.1--Inserting a Control (9)
Inserta un campo de texto no editable.
Búsqueda de sólo lectura
BSVC_r12.1--Inserting a Control (10)
Inserta un campo de búsqueda no editable. El campo se muestra como un hipervínculo que abre el formulario de detalles que lo define.
Sólo lectura
BSVC_r12.1--Inserting a Control (11)
Inserta un campo de fecha no editable.
Bloc de notas
BSVC_r12.1--Inserting a Control (13)
Inserta un bloc de notas. Solo puede existir un bloc de notas en los formularios de detalles, así que este control solo se puede utilizar en los formularios que no disponen ya de un bloc de notas.
Los siguientes controles solo están disponibles para los formularios de lista:
Control
Icono
Descripción
Lista
BSVC_r12.1--Inserting a Control (14)
Inserta una lista. Solo puede existir una lista en los formularios de lista, así que este control solo se puede utilizar en los formularios de lista nuevos.
Siga estos pasos:
  1. Haga clic con el botón secundario del ratón en la ubicación del formulario en la que se desea agregar el control y seleccione Insertar control.
    Se muestra una lista desplegable.
  2. Seleccione las opciones del cuadro de diálogo inserción de controles.
    El control quedará colocado en el formulario.
  3. Seleccione Herramientas, Vista Previa para comprobar cómo se muestra el formulario al usuario final. A pesar de que su diseño es similar al de las ventanas estándar de CA SDM y de que la mayoría de los botones y menús funcionan, no se trata de sesiones estándar, por lo que no se debe intentar utilizarlas de esa manera.
  4. Haga clic en Archivo, Guardar.
    Se agregarán los controles en un formulario.
Opciones del cuadro de diálogo Insertar control
Abra el cuadro de diálogo Insertar control del menú Archivo. El cuadro de diálogo muestra una lista de todos los controles de la interfaz de usuario adecuados para la sección del formulario que se ha seleccionado para editar.
El cuadro de diálogo contiene las siguientes opciones:
  • Insertar antes de
    Inserta el control seleccionado de la lista antes del control actualmente seleccionado en el formulario base y lo convierte en el control actualmente seleccionado.
  • Insertar después de
    Inserta el control seleccionado de la lista después del control actualmente seleccionado en el formulario base y lo convierte en el control actualmente seleccionado.
  • Anterior
    Mueve el control actualmente seleccionado al control que lo precede en el formulario.
  • Siguiente
    Mueve el control actualmente seleccionado al control que lo sigue en el formulario.
  • Propiedades
    Abre el cuadro de diálogo Propiedades correspondiente al control seleccionado.
  • Cerrar
    Cierra el formulario Insertar control.
  • Cerrar formulario después de la inserción
    (Activado) Inserta el control seleccionado y cierra el cuadro de diálogo Insertar control cuando se hace clic en Insertar antes de o Insertar después de.
    (Desactivado) Inserta el control seleccionado cuando se hace clic en Insertar antes de o Insertar después de. El cuadro de diálogo Insertar control permanece abierto para insertar controles o propiedades de la solicitud adicionales para el control seleccionado. Después de desactivar la casilla de verificación, la casilla de verificación Cerrar formulario después de la inserción permanece sin seleccionar hasta que el usuario la vuelve a seleccionar o finaliza la sesión con Web Screen Painter.
    Valor predeterminado:
    activado
Edición de las propiedades de controles
Edite las propiedades de un control.
Siga los pasos siguientes:
  1. Seleccione el control y pulse F4.
    Se abrirá el cuadro de diálogo Propiedades.
  2. Modifique las propiedades como considere oportuno. Por ejemplo, la propiedad Título especifica la etiqueta de encabezado que se muestra sobre los controles. Para especificar esta propiedad, escriba el valor deseado en la celda situada a la derecha de la misma.
  3. Cierre el cuadro de diálogo de Propiedades.
  4. Seleccione Herramientas, Vista Previa para comprobar cómo se muestra el formulario al usuario final. A pesar de que su diseño es similar al de las ventanas estándar de CA SDM y de que la mayoría de los botones y menús funcionan, no se trata de sesiones estándar, por lo que no se debe intentar utilizarlas de esa manera.
  5. Haga clic en Archivo, Guardar.
    Las propiedades del control se modifican y el formulario se guarda.
Modificación de barras de menús
Los formularios cuyos nombres comienzan con
menubar_
definen barras de menús. La vista de diseño de las barras de menús muestra el menú en la parte superior. Es posible hacer clic en cualquiera de los elementos de menú para bajar los menús, pero no está permitido editar las barras de menús de ninguna otra forma directamente en la vista de diseño. Para editar las barras de menús, haga doble clic en el elemento del menú para mostrar el Creador de menús.
Los menús (y los formularios de barras de menús) solo se utilizan en la interfaz de analista. Las interfaces de clientes y empleados usan una "barra de inicio" que contiene vínculos propiamente dichos, no listas desplegables. Para poder modificar la barra de inicio para clientes o empleados, se debe editar el formulario std_body_site.htmpl mediante la interfaz correspondiente.
Siga los pasos siguientes:
  1. Seleccione Herramientas, Diseñador de menús o haga doble clic en el menú que se muestra en la ficha Diseño de un formulario de barras de menús.
    Se mostrará el cuadro de diálogo Diseñador de menús.
  2. Complete los campos en el cuadro de diálogo Diseñador de menús para agregar o editar elementos del menú. Para obtener más información acerca de la adición de elementos del menú, consulte el tema Funciones útiles en los elementos de menú.
  3. Haga clic en Aceptar para cerrar el cuadro de diálogo.
  4. Seleccione Herramientas, Vista Previa para comprobar cómo se muestra el formulario al usuario final. A pesar de que su diseño es similar al de las ventanas estándares de CA SDM y de que la mayoría de los botones y menús funcionan, no se trata de una sesión estándar, por lo que no se debe intentar utilizarla de esa manera.
  5. Haga clic en Archivo, Guardar.
    Se modificará la barra de menús en el formulario.
Cuadro de diálogo Diseñador de menús
El cuadro de diálogo Creador de menús aparece al elegir Creador de menús en el menú Herramientas o al hacer doble clic en el menú incluido en la ficha Diseño de los formularios en la barra de menús. Utilice el cuadro de diálogo Creador de menús para agregar barras de menús, menús, submenús y comandos de menús en los formularios abiertos.
: Solo se puede acceder al Diseñador de menús al editar formularios HTMPL, cuyo nombre empiece por "menubar_", como menubar_admin.htmpl.
El cuadro de diálogo Editor de menús contiene los controles siguientes:
  • Lista de menús
    Seleccione el elemento de menú que desea cambiar de la lista. Por ejemplo, para cambiar la etiqueta del menú, seleccione una etiqueta de la lista, escriba un nombre nuevo en el cuadro de texto Rótulo y, finalmente, haga clic en Aplicar. Se pueden agregar, insertar, suprimir y mover los elementos del menú mediante los controles del Diseñador de menús.
    Solo se admite un nivel de sangría.
  • Rótulo
    Permite nombrar el elemento de menú seleccionado. Para obtener más información, consulte la propiedad.
  • Función
    Introduzca la función de JavaScript para que se ejecute cuando el usuario hace clic en el menú. Para obtener más detalles, incluidas algunas funciones predefinidas que pueden resultar de utilidad en los menús, consulte la descripción de la propiedad Función.
  • ID
    Especifica el ID de HTML o JavaScript que se asignará al elemento de menú.
  • Tecla de acceso rápido
    Presenta una lista de caracteres que componen la selección de CA SDM correspondiente a la tecla de acceso directo para el elemento de menú. Esta tecla aparece subrayada en el rótulo del menú. Por lo general, CA SDM selecciona la primera tecla del título del menú que aún no está en uso como tecla de acceso directo. Se puede, o bien especificar uno o más caracteres para restringir la selección a esos caracteres, o bien especificar uno o más caracteres precedidos por un punto de explicación para evitar la selección de los mismos.
  • Imagen
    Especifica la ubicación de la imagen que debe aparecer junto al elemento de menú.
  • Interna
    Especifica que el JavaScript invocado por la función debe ejecutarse en el contexto de la ventana actual (que podría ser una ventana de detalles emergente). Si deja esta opción desactivada, la función se ejecutará en el contexto del formulario principal.
  • Variable
    Introduzca la variable de JavaScript que se asignará al elemento de menú.
  • Barra de herramientas
    Agrega un icono de barra de herramientas e información sobre herramientas correspondientes a un elemento de menú que no es de nivel superior.
  • Archivo de iconos
    Identifica la ubicación del icono de la barra de herramientas.
  • Propina
    Especifica el texto de la información sobre herramientas.
Funciones útiles en los elementos de menú
CA SDM proporciona una barra de menús en casi todos los formularios para poder controlar sus funciones. Un formulario HTMPL genera la barra de menús y le da un nombre con el formato menubar_
xx
.htmpl. Se recomienda utilizar Web Screen Painter para modificar las barras de menús existentes y definir barras nuevas.
Las siguientes funciones predefinidas pueden resultar de utilidad en el caso de secuencias de comandos invocadas por elementos de menú:
  • upd_frame(form)
    Carga un formulario nuevo en el marco del contenido de la ventana principal.
  • create_new(factory, use_template, width, height [,args])
    Abre un formulario para definir un registro nuevo.
    Popup_window(name, form[, width, height [,features [,args]] ])
    Abre una ventana nueva.
  • showDetailWithPersid(persid)
    Abre un registro de detalles.
A las anteriores funciones se les aplican las siguientes definiciones:
  • Formulario
    Es un nombre de archivo HTMPL con el formato xxx.htmpl o un código de operación (por ejemplo: CREATE_NEW).
  • fábrica
    Es el nombre de un objeto de base de datos.
  • use_template
    Puede ser verdadero o falso.
  • width
    Representa la anchura deseada del formulario; es cero de forma predeterminada.
  • height
    Representa la altura deseada del formulario; es cero de forma predeterminada.
  • funciones
    Es una lista de funciones de ventana, en el mismo formato que se utiliza con la función JavaScript estándar window.open.
  • args
    Constituye uno o más argumentos con el formato “keyword=value” para la operación especificada del formulario.
  • persid
    Es un ID persistente con el formato factory:ID.
Modificación de las hojas de estilo
Se puede utilizar Web Screen Painter para editar o crear archivos CSS (hojas de estilo en cascada).
Por motivos de rendimiento, las hojas de estilo de CA SDM se entregan de dos maneras: archivos individuales (como search_filter.css) y archivos de combinación que agrupan varios archivos individuales con comentarios y con el espacio en blanco excedente eliminado (como analyst_styles.css). Web Screen Painter siempre edita los archivos individuales; no es posible editar los archivos de combinación directamente. Cuando se publican cambios en las hojas de estilo, Web Screen Painter automáticamente crea el archivo de combinación asociado, si es necesario.
Siga los pasos siguientes:
  1. Cree o abra un archivo de hoja de estilo CSS.
    Web Screen Painter muestra la vista fuente correspondiente a la hoja de estilo.
  2. Se puede editar directamente en la vista fuente, o mostrar el Creador de estilos seleccionando Herramientas, Creador de estilos.
  3. Complete los campos del cuadro de diálogo Diseñador de estilos como resulte adecuado. Hay varios atributos de estilo, como el margen y el borde, que no se pueden ver ni editar en el Diseñador de estilos. Es necesario editarlos en la vista original.
  4. Haga clic en Aceptar en Diseñador de estilos.
    Web Screen Painter vuelve a dar formato a la hoja de estilo y actualiza la vista fuente.
  5. Haga clic en Archivo, Guardar.
    Se ha modificado la hoja de estilo.
Cuadro de diálogo Creador de estilos
El Creador de estilos permite modificar o personalizar hojas de estilo. De forma predeterminada, este cuadro de diálogo se abre en la ficha Fuente y color y contiene los controles siguientes:
  • Clases de estilos
    Seleccione en esta lista desplegable el elemento de estilos que desee modificar.
  • Agregar
    Permite agregar una nueva clase de estilo.
  • Cambiar nombre
    Haga clic para cambiar el nombre de la clase de estilo seleccionada en la lista desplegable Clases de estilos.
  • Suprimir
    Haga clic para suprimir la clase de estilo seleccionada en la lista desplegable Clases de estilos.
  • Fuentes instaladas
    Esta propiedad enumera las fuentes instaladas en el sistema. Haga clic en las flechas izquierda y derecha para mover las fuentes seleccionadas de la lista Fuentes instaladas a la lista Fuentes seleccionadas y viceversa.
  • Fuentes seleccionadas
    Esta propiedad muestra una lista jerárquica de fuentes preferidas que el explorador utilizará para trazar el elemento de clase de estilo. El explorador tomará la primera fuente de la lista instalada en el sistema en que se ejecuta.
    Haga clic en las flechas hacia arriba y hacia abajo para subir o bajar las fuentes seleccionadas en la jerarquía.
  • Tamaño de fuente
    Seleccione el tamaño de la fuente de la lista desplegable.
  • Negrita
    Seleccione el estilo de la fuente de la lista desplegable.
  • Cursiva
    Seleccione el estilo de la fuente de la lista desplegable.
  • Sin efectos
    Seleccione esta opción si no desea utilizar estilos ni efectos de fuente especiales.
  • Subrayar
    Seleccione esta opción si desea que el texto se muestre subrayado.
  • Tachar
    Seleccione esta opción si desea que el texto aparezca tachado.
  • Suprarrayar
    Seleccione esta opción si desea que se muestre una raya sobre el texto.
  • Color de primer plano
    Haga clic en el botón Examinar que hay a la derecha de esta propiedad para seleccionar el color de primer plano del elemento de texto. A continuación, seleccione el color que desea en la paleta de colores y haga clic en Aceptar.
  • Color de fondo
    Haga clic en el botón Examinar que hay a la derecha de esta propiedad para seleccionar el color de fondo del elemento de texto. A continuación, seleccione el color que desea en la paleta de colores y haga clic en Aceptar.
  • Transparente
    Seleccione esta opción si desea que el fondo del elemento de estilo sea transparente.
El área de vista previa en la parte inferior del cuadro de diálogo presenta una muestra del elemento de estilo.
Para definir la posición del elemento de estilo, haga clic en la ficha Posición. Esta ficha contiene los controles siguientes:
  • Posición
    Seleccione una posición para el elemento de la lista desplegable. Esta propiedad coloca los elementos en posición estática, absoluta o relativa. Si selecciona Estático, la posición del elemento se mostrará en consonancia con el flujo normal. Si selecciona Absoluto, el elemento se coloca en cualquier lugar de la página. Si selecciona Relativo, el elemento se moverá en relación a su posición normal.
  • Izquierda
    Permite especificar el margen izquierdo para el elemento en el cuadro de texto. Seleccione un tamaño de la lista desplegable. Esta propiedad queda desactivada al seleccionar una posición estática para el elemento.
  • Arriba
    Permite especificar el margen superior para el elemento en el cuadro de texto. Seleccione un tamaño de la lista desplegable. Esta propiedad queda desactivada al seleccionar una posición estática para el elemento.
  • Ancho
    Permite especificar la anchura para el elemento en el cuadro de texto. Seleccione un tamaño de la lista desplegable.
  • Altura
    Permite especificar la altura para el elemento en el cuadro de texto. Seleccione un tamaño de la lista desplegable.
  • Z-Index
    Permite especificar un valor para el orden de apilamiento del elemento en el cuadro de texto. Los elementos con un orden de apilamiento superior se presentan siempre delante de los elementos con un orden de apilamiento inferior. Esta propiedad solo se aplica a elementos que tienen una posición absoluta.
Los elementos pueden tener órdenes de apilamiento negativos.
Haga clic en la ficha Otros para establecer algunas propiedades específicas para el elemento. Esta ficha contiene los controles siguientes:
  • Visibilidad
    Seleccione el tipo de visibilidad para el elemento de la lista desplegable. Esta propiedad establece el modo de visualización del contenido de un elemento cuando desborda el área que tiene asignada.
  • Desbordamiento
    Seleccione el tipo de desbordamiento para el elemento de la lista desplegable. Esta propiedad determina lo que sucederá si el contenido de un elemento desborda el área que tiene asignada.
  • Visualización
    Seleccione el tipo de visualización para el elemento de la lista desplegable. Esta propiedad establece el modo de presentación de los elementos.
  • Cursor
    Seleccione el tipo de cursor para el elemento de la lista desplegable. Esta propiedad especifica el tipo de cursor que se mostrará al señalar un elemento específico.
  • Aceptar
    Haga clic para cerrar el cuadro de diálogo y guardar los cambios.
  • Cancelar
    Cierra el cuadro de diálogo Creador de estilos.
Modificación del formulario de vista previa al pasar el ratón
La vista previa al pasar el ratón permite consultar los detalles clave del formulario actual sin necesidad de hacer clic en un vínculo o abrir una nueva página web. La vista previa al pasar el ratón aparece cuando se coloca un cursor encima de un vínculo de objeto en una lista o formulario de detalles durante cierto tiempo. Si se retira el ratón fuera del vínculo antes de que caduque el tiempo de retraso, no aparece la vista previa. La vista previa al pasar el ratón aparece de forma predeterminada en todas las listas y en todos los formularios de detalles en el modo de solo lectura.
Se pueden crear vistas previas al pasar el ratón para formularios que no tienen el formulario preview_ como predeterminado. También se pueden crear vistas previas al pasar el ratón para los formularios personalizados que se hayan creado en el entorno de CA SDM.
Están disponibles los siguientes formularios de vista previa predeterminados al pasar el ratón:
  • preview_chg.htmpl (orden de cambio)
  • preview_cnt.htmpl (contacto)
  • preview_cr.htmpl (solicitud)
  • preview_in.htmpl (incidente)
  • preview_iss.htmpl (incidencia)
  • preview_KD.htmpl (documento del conocimiento)
  • preview_nr.htmpl (elemento de configuración)
  • preview_pr.htmpl (problema)
Siga los pasos siguientes:
  1. Abra uno de los siguientes formularios para la personalización:
    • Abra un formulario existente que tenga un formulario preview_ de forma predeterminada. Por ejemplo, detail_loc.htmpl.
    • Abra un formulario de vista previa al pasar el ratón existente. Por ejemplo, preview_chg.htmpl.
  2. Modifique el formulario. Por ejemplo, agregue o elimine controles personalizados del formulario.
  3. Haga clic en Archivo, Guardar como, especifique un nombre de archivo mediante el prefijo preview_, y haga clic en Guardar. Por ejemplo, introduzca preview_loc.htmpl.
    Se crea y modifica el formulario de vista previa al pasar el ratón.
Modificación de la lista de cuadrícula de datos en formularios de lista
Las listas de cuadrículas de datos permiten consultar el contenido de una página de producto en un formulario de lista sin abrir una página nueva. Este control enlazado de datos clasifica los elementos desde el origen de datos en una tabla para que se puedan seleccionar elementos, elementos de clasificación y buscar datos. Por ejemplo, las opciones de ampliación y contracción del formulario Lista de incidentes.
Siga los pasos siguientes:
  1. Abra un formulario de lista.
  2. Localice el área azul después de los campos etiquetados hacia el final del formulario en la vista de diseño. Si se prefiere, puede utilizarse la vista de fuente. Con esta vista, la cuadrícula de datos aparece entre las líneas siguientes del código:
    <PDM_MACRO name=lsStart> <PDM_MACRO name=lsEnd>
    El ejemplo siguiente muestra el área de la cuadrícula de datos en la vista de diseño:
2173363.PNG
El signo más en el área de la cuadrícula de datos representa el inicio de la sección de expansión de la fila (los campos que se muestran solamente cuando un usuario hace clic en el signo más de la fila en la cuadrícula del formulario de lista). El código siguiente genera el signo más en la vista de fuente:
<PDM_MACRO name=lsCol attr=open_date label="Open Date" sort="DESC" startrow=yes>
El parámetro
startrow=yes
especifica el inicio de una fila e inicia la sección de expansión de la fila.
  • Arrastre y suelte las columnas para moverlas en una lista. Se pueden mover las columnas entre la parte principal de la fila y la sección de expansión. No se puede mover un control existente después del área de cuadrícula.
  • Para insertar una columna de lista, haga clic con el botón secundario del ratón en un control o en cualquier otro sitio del fondo azul y seleccione Insertar columna o Insertar control.
    • Si selecciona Insertar columna, WSP inserta una columna a la izquierda del control seleccionado actualmente.
    • Si selecciona Insertar control, WSP muestra el cuadro de diálogo Insertar control, que permite agregar el control deseado al formulario.
  • Seleccione Herramientas, Vista Previa para verificar cómo se muestra el formulario al usuario final. A pesar de que su diseño es similar al de las ventanas estándar de CA SDM y de que la mayoría de los botones y menús funcionan, no se trata de sesiones estándar, por lo que no se debe intentar utilizarlas de esa manera.
  • Haga clic en Archivo, Guardar.
    Se modificará la lista de cuadrículas de datos en el formulario de lista.
Modificación de blocs de notas en formularios de detalles
El control de las fichas anidadas (bloc de notas) permite expandir o contraer los detalles clave del formulario actual. Por ejemplo, puede utilizarse el control para personalizar el modo organizativo de las fichas en el formulario de detalles del incidente. En la vista Diseño, se puede utilizar el control de Bloc de notas para agregar fichas anidadas a los formularios de detalles que aún no contengan ninguna. Haga doble clic en el control Bloc de notas para modificarlo. Utilice arrastrar y soltar para agregar, insertar y suprimir fichas de bloc de notas y cambiar sus títulos. Los botones de flecha arriba y abajo también se pueden utilizar para reorganizar las fichas mediante la modificación de la posición de la ficha seleccionada. La casilla de verificación Nueva fila especifica si la ficha seleccionada iniciará una fila nueva en el encabezado del bloc de notas.
Siga los pasos siguientes:
  1. Abra un formulario de detalles.
  2. Localice el área azul del formulario en la vista de diseño que contiene la primera etiqueta numerada.
    Si se prefiere, puede utilizarse la vista de fuente. Con esta vista, el área del bloc de notas aparece entre las líneas del código siguientes:
    <PDM_MACRO name=startNotebook hdr=cng_nb>
    <PDM_MACRO name=endNotebook>
    En CA SDM r12.6, un bloc de notas puede contener fichas anidadas. En Web Screen Painter, una ficha de alto nivel (una ficha que contiene otras fichas) se llama Grupo de fichas. Web Screen Painter muestra los grupos de fichas como barras separatorias de color azul oscuro que abarcan el área azul del bloc de notas, con una etiqueta numerada en su centro. Una ficha bajo de nivel (una ficha que no contiene otras fichas) se llama Ficha. Web Screen Painter muestra las fichas bajo de nivel como rectángulos con esquinas redondeadas.
  3. Haga clic en una ficha para seleccionarla. La selección de una ficha resalta y muestra un vínculo al contenido de la ficha en la parte inferior del bloc de notas.
    Se pueden mover fichas y grupos de fichas dentro de un bloc de notas mediante la función de arrastrar y soltar. El desplazamiento de un grupo de fichas conlleva el desplazamiento de las fichas que incluye el grupo.
  4. Para insertar una ficha o un grupo de fichas, haga clic con el botón secundario del ratón en un control o en cualquier sitio del fondo del bloc de notas y seleccione Insertar ficha, Insertar grupo de fichas o Insertar control.
    Si selecciona Insertar ficha o Insertar grupo de fichas, Web Screen Painter inserta una nueva ficha o grupo de fichas a la izquierda del control seleccionado. Si selecciona Insertar control, WSP muestra el cuadro de diálogo Insertar control, que permite agregar el control deseado al formulario.
  5. Seleccione Herramientas, Vista Previa para verificar cómo se muestra el formulario al usuario final. A pesar de que su diseño es similar al de las ventanas estándar de CA SDM y de que la mayoría de los botones y menús funcionan, no se trata de sesiones estándar, por lo que no se debe intentar utilizarlas de esa manera.
    Haga clic en Archivo, Guardar.
Modificación de archivos JavaScript y HTML
Se puede utilizar la vista original de WSP para editar formularios HTML y JavaScript. Abra un archivo HTML o JavaScript y realice los cambios necesarios.
Nota: Por razones de rendimiento, algunos archivos JavaScript de CA SDM se proporcionan de dos maneras: archivos individuales (como window_manager.js) y archivos de combinación que agrupan varios archivos individuales con comentarios y con el espacio en blanco excedente eliminado (como std_head.js). Web Screen Painter siempre edita los archivos individuales; no es posible editar los archivos de combinación directamente. Cuando se publican cambios en secuencias de comandos, Web Screen Painter crea de forma automática el archivo de combinación asociado si es necesario.
Migración del sistema de prueba al de producción
Uno de los objetivos al crear Web Screen Painter era garantizar que la creación y la comprobación de modificaciones de formularios resultaran seguras en una base de datos de producción. Este objetivo está sustentado por funciones como, por ejemplo, un árbol de directorios exclusivo de en el servidor, procesos de servidor de dedicados y sesiones de vista previa de solo lectura. No obstante, muchos usuarios prefieren desarrollar las modificaciones de formularios en un sistema de prueba independiente y, después, migrar los formularios a otro sistema de producción distinto una vez terminados de la siguiente manera:
  1. Copie los formularios HTMPL que se vayan a migrar desde el subdirectorio apropiado de site/mods/www/htmpl del sistema de prueba al mismo subdirectorio de site/mods/wsp/project del servidor principal en el sistema de producción.
  2. Copie los archivos CSS, JavaScript y HTML que se vayan a migrar desde el subdirectorio apropiado de site/mods/www/wwwroot del sistema de prueba al mismo subdirectorio de site/mods/www/wwwroot/wsp/project del servidor principal en el sistema de producción.
    Asegúrese de copiar los archivos y los formularios en los siguientes servidores del sistema de producción, según la configuración de CA SDM:
    • Convencional
      : servidor principal
    • Disponibilidad avanzada
      : servidor de fondo
Puede utilizar cualquier método de copia de archivos admitido por el sistema operativo para llevar a cabo el procedimiento descrito en los pasos 1 y 2 anteriormente. Los usuarios de Windows deberían sustituir las barras inversas (\) por barras (/) en las rutas de directorio mencionadas.
Publicación de los cambios del formulario
Una vez que el usuario está satisfecho con los cambios realizados, puede ponerlos a disposición de todos los usuarios de CA SDM mediante su publicación. La publicación actualiza todos los servidores de CA SDM con los formularios nuevos o revisados.
Siga los pasos siguientes:
  1. Seleccione Archivo, Publicar.
    Si hay cambios sin guardar, Web Screen Painter le instará a guardarlos y, a continuación, aparecerá un cuadro de diálogo de confirmación con todos los cambios pendientes de Web Screen Painter (incluidos los guardados en sesiones anteriores o por otros usuarios de Web Screen Painter). De forma predeterminada, se seleccionan todos los cambios para su publicación. Se puede cambiar la selección de cambios para su publicación si se hace clic en ellos.
  2. Cuando esté satisfecho con la selección, haga clic en Aceptar
    .
  3. (Solo para la configuración de disponibilidad avanzada) Si el motor web no se ejecuta en ninguno de los servidores de CA SDM, se muestra un mensaje de error con la lista de servidores de CA SDM en los que se ha producido un fallo de publicación por parte de Web Screen Painter. Lleve a cabo los pasos siguientes:
    1. Configure el servidor de CA SDM (el servidor especificado en el mensaje de error) para llevar a cabo las correcciones.
    2. Edite el archivo en WSP para agregar un espacio blanco en la macro de <PDM_IF 0> y guárdelo.
    3. Vuelva al paso 1 y vuelva a publicar el formulario web.
      Si no se desean realizar cambios de configuración, debe copiarse manualmente la carpeta nx_root/site/mods/www del servidor en segundo plano en todos los demás servidores.
  4. Si el servidor de fondo se bloquea durante el proceso de publicación, recupere los cambios de HTMPL (solo para la configuración de disponibilidad avanzada).
  5. Ejecute el siguiente comando después de publicar los cambios (en formularios de vista previa al pasar el ratón):
    pdm_webcache - H
    La memoria caché del Web se actualiza. WSP pone los cambios seleccionados a disposición de todos los usuarios en todos los servidores.
Solo se pueden eliminar los formularios modificados por el sitio. Las solicitudes para eliminar formularios previamente publicados surten efecto al publicarse los cambios. Para cancelar una solicitud de eliminación pendiente, seleccione Archivo, Recuperar formulario. Con esta acción, se deshacen los cambios realizados en un formulario tras su publicación.
Recuperación de cambios HTMPL
Se pueden recuperar los cambios HTMPL cuando el servidor de fondo produce un fallo durante la actividad de publicación.
Se recomienda no realizar los pasos de recuperación directamente en el entorno de producción. Asegúrese de que primero se validan en el entorno de desarrollo o de prueba.
Siga los pasos siguientes:
  1. Vaya al siguiente directorio del servidor de fondo bloqueado:
    $NX_ROOT$/site/mods/www/wwwroot/wsp/project/web
  2. Copie todo el contenido de la carpeta web.
  3. Inicie sesión en el nuevo servidor de fondo y pegue todo el contenido copiado en la carpeta $NX_ROOT$/site/mods/www/wwwroot/wsp/project/web.
  4. Reanude la publicación de los cambios en el nuevo servidor de fondo.