Cómo Crear un Diseño Personalizado App Builder página de Inicio de Sesión¶

Si está buscando modificar el App Builder página de inicio de sesión. Este artículo describe las mejores prácticas recomendadas. Se recomienda seguir este método en lugar de otros métodos alternativos, ya que este enfoque conservará los cambios al actualizar. App Builder en el futuro. Métodos alternativos como la ejecución de scripts contra la base de datos o la desclasificación App Builder no se recomiendan y no se conservarán en la actualización.

Las imágenes pueden codificarse en Base64 con la sintaxis adecuada o puede cargar la imagen directamente en App Builder(método preferido) para utilizar una imagen en el App Builder página de inicio de sesión. Consulte la sección titulada Para usar an App Builder imagen alojada para conocer los pasos para esa configuración. Aquí hay un enlace a un sitio de codificación de imágenes Base64 : https://www.base64-image.de/ A continuación se proporcionan instrucciones sobre cómo generar una imagen codificada en Base64.

Si vas a subir la imagen a App Builder, ir a la App Builder IDE > Look and Feel > Imágenes > seleccione la Colección que usa su aplicación > haga clic en +Imagen y cargue la imagen. Una vez que se haya cargado, puede hacer clic en el ícono emergente para expandir la información de detalles de la imagen y hacer clic derecho sobre la imagen tal como aparece en la sección Foto. Consulte la sección a continuación sobre Cómo crear un tema de inicio de sesión personalizado para obtener instrucciones paso a paso.

Al hacer referencia a rutas de imágenes en temas, la sintaxis exacta puede diferir ligeramente según cómo se muestren las imágenes. App Builder se ha configurado la URL de alojamiento. La forma recomendada de hacer referencia a una ruta de imagen es comenzar el valor de la ruta con ./, Por ejemplo ./service/image/153f5b0b-c367-4409-a428-23813b6a5ab2.

Para enviar un nuevo tema de inicio de sesión desde Desarrollo > Control de calidad > Producción, guarde su tema personalizado en su Colección de temas que está realizando el recorrido Desarrollo > Control de calidad > Producción.

Para Crear un Tema de Inicio de Sesión Personalizado¶

1. Vaya a Apariencia
2. Confirma que tienes una Colección seleccionada que puedas modificar
3. Haga clic en + Tema
4. Proporcione un Nombre de tema identificable para el nuevo tema personalizado. Por ejemplo: Tema de inicio de sesión del cliente
5. Seleccione "Tema base de inicio de sesión" como Tema base
6. Haga clic en el botón Guardar
7. Seleccione Formulario de inicio de sesión en el panel Componentes
8. Haga clic en el botón + Estilo debajo del panel Estilos
9. Seleccione Logotipo de inicio de sesión como Área
10. Seleccione Imagen de fondo como Tipo de estilo

11. Introduzca la sintaxis con el formato adecuado para una imagen codificada en Base64. Por ejemplo:

    `datos:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7`
    

12. Ingrese la descripción de Ayuda técnica y haga clic en Guardar

13. Cierre sesión App Builder y actualice su navegador. Ahora debería poder ver la imagen personalizada aparecer en la App Builder pantalla de inicio de sesión.

Para Crear una Imagen de Fondo Codificada en Base64¶

1. Para generar la codificación Base64 adecuada para su imagen, le recomendamos utilizar el sitio en línea: https://www.base64-image.de/

   

2. Arrastre y suelte o haga clic en el botón "O haga clic aquí" para cargar su archivo de imagen JPG, PNG o GIF

3. Una vez que se haya terminado de procesar su archivo, haga clic en el botón Mostrar código resultante

4. Haga clic en el botón Seleccionar todo en Para usar en <img> Sección de elementos

   

5. Haga clic en el botón Copiar al portapapeles

6. Esta es la sintaxis del código de imagen con el formato correcto que pegará en el valor de la imagen de fondo en App Builder en su tema de inicio de sesión personalizado

Para Utilizar an App Builder imagen Alojada¶

1. Vaya a IDE > Apariencia
2. Agrega la imagen que deseas usar a una Colección a la que tu aplicación tenga acceso
3. Después de haber agregado la imagen, haga clic en el ícono Abrir registro correspondiente
4. Desplácese hasta el campo URL relativa y haga clic en el botón Copiar
5. Siga las instrucciones anteriores para "Crear un tema de inicio de sesión personalizado".
6. En el paso 12, ingrese la sintaxis copiada al portapapeles para la imagen alojada. Se verá algo así /service/image/ImageID, donde ImageID representa el valor único copiado en el portapapeles. Por ejemplo: /service/image/2bc0d8a0-2cd7-4e8d-b074-eebfb1b9b6d2
7. Revise la ruta de la imagen Valor y si no comienza con ./ Ajuste manualmente según sea necesario
8. Ingrese a Ayuda técnica y Guardar

Ejemplos de Personalización Adicionales¶

Se pueden personalizar muchas áreas del formulario de inicio de sesión, más allá del logotipo descrito anteriormente. Para personalizar otras áreas del formulario de inicio de sesión, puede aprovechar los diferentes estilos de componentes y subcomponentes disponibles en el área Apariencia > Temas de App Builder a continuación se describen algunos ejemplos.

Los aspectos avanzados de personalización pueden requerir que trabajes con interfaces de temas personalizados. Por ejemplo, si desea orientar un botón pero no todos los que aparecen en el formulario de inicio de sesión, puede escribir una interfaz personalizada para orientar solo uno de los botones.

Apunta al Encabezado del Formulario de Inicio de Sesión¶

1. Navegue hasta el tema de inicio de sesión personalizado definido para su formulario de inicio de sesión
2. Seleccione Formulario de inicio de sesión en el panel Componentes
3. Haga clic en + Estilo en el panel Estilos
4. Seleccione Encabezado del formulario de inicio de sesión como Área
5. Seleccione el Tipo de estilo adecuado para la personalización. Por ejemplo: "Color de fondo" si desea cambiar el color de la región

6. Proporcione la información de Valor adecuada. Por ejemplo: darkviolet

   1. Si su tema tiene colores primarios, secundarios y complementarios definidos, es posible que deba agregar !important al Valor. Por ejemplo: darkviolet!important

7. Haga clic en Guardar

8. Salga de App Builder y actualice su navegador web para comprobar los resultados

Apunte al Botón de Inicio de Sesión¶

1. Navegue hasta el tema de inicio de sesión personalizado definido para su formulario de inicio de sesión
2. Seleccione el formulario Controles en el panel Componentes
3. Haga clic en + Estilo en el panel Estilos
4. Seleccione Botón como Área
5. Seleccione el Tipo de estilo según corresponda para la personalización. Por ejemplo: "Color de fondo" si desea cambiar el color de la región

6. Proporcione la información de Valor adecuada. Por ejemplo: #ffa500

   1. Si su tema tiene colores primarios, secundarios y complementarios definidos, es posible que deba agregar !important al Valor. Por ejemplo: #ffa500!important

7. Haga clic en Guardar

8. Salga de App Builder y actualice su navegador web para comprobar los resultados

Apunta a los Controles del Formulario¶

1. Navegue hasta el tema de inicio de sesión personalizado definido para su formulario de inicio de sesión
2. Seleccione Controles en el panel Componentes
3. Haga clic en + Estilo en el panel Estilos
4. Seleccione Control de formulario como Área
5. Seleccione el Tipo de estilo según corresponda para la personalización. Por ejemplo: "Color de fondo" si desea cambiar el color de la región

6. Proporcione la información de Valor adecuada. Por ejemplo: #ffff60

   1. Si su tema tiene colores primarios, secundarios y complementarios definidos, es posible que deba agregar !important al Valor. Por ejemplo: #ffff60!important

7. Haga clic en Guardar

8. Salga de App Builder y actualice su navegador web para comprobar los resultados