Cómo crear una página de inicio de sesión personalizada en Jitterbit App Builder

Si desea modificar la página de inicio de sesión de App Builder, este artículo describe las prácticas recomendadas. Es preferible seguir este método a otros, ya que conservará los cambios al actualizar App Builder en el futuro. No se recomiendan métodos alternativos como ejecutar scripts en la base de datos o desbloquear App Builder, ya que no se conservarán al actualizar.

Las imágenes pueden codificarse en Base64 con la sintaxis correcta o subirlas directamente a App Builder (método recomendado) para usarlas en la página de inicio de sesión de App Builder. Consulta la sección «Para usar una imagen alojada en App Builder » para ver los pasos de configuración. Aquí tienes un enlace a un sitio web de codificación de imágenes en Base64 : https://www.base64-image.de/ A continuación se proporcionan instrucciones sobre cómo generar una imagen codificada en Base64.

Si va a subir la imagen a App Builder, vaya a App Builder IDE > Apariencia > Imágenes > seleccione la Colección que usa su aplicación > haga clic en +Imagen y suba la imagen. Una vez subida, puede hacer clic en el icono emergente para ampliar la información detallada de la imagen y hacer clic derecho sobre ella, tal como aparece en la sección Foto. Consulte la sección Para 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 variar ligeramente según la configuración de la URL de alojamiento de App Builder. La forma recomendada de hacer referencia a una ruta de imagen es iniciar 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, guarda tu tema personalizado en la Colección de temas que realiza el recorrido Desarrollo > Control de calidad > Producción.

¡¡¡!!! important "Importante" App Builder solo admite un tema de inicio de sesión personalizado por sitio. Al guardar el tema de inicio de sesión personalizado que implementa el tema base de inicio de sesión de App Builder, App Builder lo usará inmediatamente en lugar del tema base de inicio de sesión, si ya existe.

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 del 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 correcto 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. Cierra sesión en App Builder y actualiza tu navegador. Ahora deberías poder ver la imagen personalizada en la pantalla de inicio de sesión de App Builder.

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 procesado el archivo, haga clic en el botón Mostrar código.

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 una imagen alojada en App Builder

1. Vaya a IDE > Apariencia
2. Agrega la imagen que quieres 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, introduzca la sintaxis de copia al portapapeles para su imagen alojada. Se verá así: /service/image/ImageID, donde ImageID representa el valor único copiado al portapapeles. Por ejemplo: /service/image/2bc0d8a0-2cd7-4e8d-b074-eebfb1b9b6d2
7. Revise el valor de la ruta de la imagen y si no comienza con ./ Ajuste manualmente según sea necesario.
8. Acceda a Ayuda Técnica y Guardar.

Ejemplos de personalización adicionales

Muchas áreas del formulario de inicio de sesión se pueden personalizar, además del logotipo descrito anteriormente. Para personalizar otras áreas del formulario de inicio de sesión, puede aprovechar los diferentes estilos de componente y subcomponente disponibles en Apariencia > Temas del 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 que solo se muestren los botones del formulario de inicio de sesión, pero no todos, podría crear una interfaz personalizada que solo se muestre uno.

Apunta al encabezado del formulario de inicio de sesión

1. Vaya al 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 del área.

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

   1. Si su tema tiene definidos colores primarios, secundarios y complementarios, 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 probar los resultados.

Apunta 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 a la personalización. Por ejemplo: "Color de fondo" si desea cambiar el color del área.

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

   1. Si su tema tiene definidos colores primarios, secundarios y complementarios, 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 probar 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 del área.

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

   1. Si su tema tiene definidos colores primarios, secundarios y complementarios, 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 probar los resultados.