[en] Button
[en] The Button component indicates an action (for example, showing a screen or submitting a form) and allows the app user to perform such action by clicking or tapping the component. To insert a Button component in the screen, go to the Left Panel in the screens editor. Go through the list of components to find the Button component or click the search bar and type its name. Then, drag and drop the component into the canvas and configure its attributes in the right panel. Refer to the sections below to learn more.Construcción de pestañas y panel izquierdo
Importante
[en] The Button component can be used in web and mobile apps (both for Android and iOS devices).
Atributos
En el panel derecho, puedes configurar diferentes atributos para personalizar el componente. Consulta las secciones a continuación para obtener más información.Panel derecho
[en] Design
En la pestaña Design, puedes configurar la información básica del componente seleccionado y los atributos que determinan el aspecto que tendrá el componente en la app. Consulta las secciones a continuación para obtener más información.Design
En esta sección, rellena los detalles básicos del componente seleccionado y los atributos de alineación y tamaño. Esta sección está disponible para cada componente arrastrado al lienzo. Para saber más, lee Design.Design
En esta sección, puedes definir los ajustes del fondo del componente. Consulta la tabla a continuación para obtener más información.
Flat | Haz clic en el botón de opción Flat para establecer un único color para el fondo del componente. Para establecer el color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado de bordes redondeados para abrir el selector de color. Luego, selecciona un color o introduce el código de color hexadecimal. También puedes establecer el porcentaje de opacidad fuera del selector de color en el campo Opacity. Si previamente seleccionaste un color en el selector de color, la opacidad se establece en 100 por defecto. Si no seleccionaste ningún color, este campo estará vacío. Para modificarlo, haz clic en el campo e introduce el porcentaje deseado. |
Gradient | Haz clic en el botón de opción Gradient para establecer un degradado de color para el fondo del componente. Haz clic en cada uno de los íconos cuadrados de bordes redondeados para abrir el selector de color. En el selector de color, introduce el código de color hexadecimal en el campo correspondiente. Haz clic en |
Background Image | Haz clic en la casilla de verificación Image para añadir una imagen al fondo del componente. Puedes utilizar una imagen de fondo con las opciones de fondo Flat y Gradient. Haz clic en el campo Background Image y escribe el nombre de la imagen de fondo, o haz clic en el ícono de carga para abrir el selector de imágenes. Selecciona una de las imágenes de la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. |
Nota
Si seleccionas el fondo Flat, no podrás elegir el fondo Gradient y viceversa. La opción Background Image está disponible en ambos casos.
En esta sección, puedes definir el estilo de uno o varios bordes de tu componente.
Para fijar todos los bordes del componente, haz clic en el ícono de eslabón de cadena situado en el centro del cuadrado. La cadena aparece intacta y todos los bordes del cuadrado se vuelven azules.
Para configurar los atributos de los bordes individualmente, haz clic en el borde deseado del ícono cuadrado; el borde seleccionado se vuelve azul y el ícono de eslabón de cadena aparece roto. Recuerda configurar los atributos para cada borde que desees personalizar.
A continuación, debes establecer el color y la anchura del borde o bordes que desees configurar. Consulta la tabla siguiente para obtener más información.
Color | Border color. Para establecer el color del borde, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado de bordes redondeados para abrir el selector de color. En el selector de color, introduce el código de color hexadecimal. |
[en] Opacity | [en] You can also set the opacity percentage outside the color picker. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the Opacity field and enter the desired percentage. |
Width | Border width. Escribe un número para establecer el ancho del borde. Para cambiar la unidad de medida, haz clic en la elipsis (tres puntos) y selecciona una opción en el menú desplegable. |
En esta sección, puedes configurar el radio para definir la redondez de las esquinas del componente.
Por defecto, todas las esquinas del componente aparecen seleccionadas. La cadena aparece intacta y los puntos que representan cada esquina del cuadrado se vuelven azules. Si utilizas esta opción, se aplicarán los mismos atributos a todas las esquinas.
Para configurar los atributos de las esquinas individualmente, haz clic en la esquina deseada del ícono cuadrado; el punto de la esquina seleccionada se vuelve azul. Recuerda configurar atributos para cada esquina que desees personalizar.
Para aumentar o disminuir el tamaño del radio de los bordes o de un borde específico, escribe el valor en el campo Radius. Para cambiar la unidad de medida, haz clic en la unidad de medida seleccionada (texto de color azul) y elige una opción del menú desplegable.
[en] To increase or decrease the radius size of the borders or a specific border, type the value in the Radius field. To change the unit of measurement, click the unit of measurement selected (blue-colored text) or the ellipsis (three dots)—if no unit was previously selected—and choose an option from the drop-down menu.
En esta sección puedes configurar los atributos básicos del componente. Consulta la tabla a continuación para obtener más información.
[en] CSS Class | CSS o estilo invocado desde Style > Themes y aplicado al componente. Haz clic en el campo y selecciona un estilo en el menú desplegable. SugerenciaPuedes añadir más de un estilo. |
Profile Option | Código aplicado en referencia al perfil de usuario de la app. Haz clic en el campo e introduce el código. |
[en] Icon | [en] To set an icon, click the field and type the name of the image, or click the magnifying glass icon to open the image picker. Then, select one of the images available in the list, or use the search bar to find an image by name. |
[en] Icon Color | [en] To set a color for the icon, click the field and type a hex color code or click the square icon to open the color picker. click the Shadow field and type a hex code or click the rounded-edges square icon to open the color picker. In the color picker, select a color or enter the hexa color code and modify the opacity (if necessary) in the respective fields. [en] You can also set the opacity percentage outside the color picker in the Opacity field. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the field and enter the desired percentage. |
[en] Value | [en] Text displayed in the component that informs the app user about the use or action of the button. You can add plain text or a reference to a parameter or register. You may also be able to add the value to the translations dictionary or select an existing translation if there are languages selected in app settings.TranslationsConfiguración de la app SugerenciaSi no rellenas este campo, también puedes introducir el texto haciendo doble clic en el componente y escribiendo el texto deseado. Una vez que rellenes el campo Value, no podrás utilizar esta opción. |
[en] Submit | [en] Id of the form to be processed. When processing a form, all the fields associated to that form id are validated. Click the field and enter a form id. |
[en] Enabled | Atributo que define si el componente se puede editar o no. Haz clic en la flecha y elige uno de los dos valores del menú desplegable. Selecciona true si se puede hacer clic en el componente o false si no se puede hacer clic. Los botones desactivados aparecerán en gris en la app. El valor por defecto es true. ImportanteEste atributo sólo está disponible para aplicaciones web. |
[en] Visible | Atributo que define si el componente es visible en la app. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que el componente sea visible en la app o false para que no lo sea. |
Important For Accessibility | Atributo que define si el lector de pantalla lee o ignora el valor definido en el atributo Accessibility Text del componente. Haz clic en la flecha y selecciona una opción del menú desplegable. Elige true para que el lector de pantalla lea el componente o false para que el lector de pantalla no lea el componente. El valor por defecto es false. |
[en] Accessibility Text | Alternative text. Añade un texto breve para describir el componente a los usuarios que no puedan verlo. El texto será leído por iOS Voice Over o Android Talk Back. También puedes añadir el texto de accesibilidad al diccionario de traducciones o seleccionar una traducción existente si hay idiomas seleccionados en los ajustes de tu rama.Settings |
[en] Accessibility Order | Atributo que indica al lector de pantalla el orden en que debe leer los componentes. Para configurarlo, haz clic en el campo e introduce un número para definir el orden. Por ejemplo, si este componente debe leerse en tercer lugar, introduce el valor 3. Si no configuras un orden personalizado, los componentes se leen de arriba hacia abajo y de izquierda a derecha de la pantalla. |
En esta sección puedes configurar los atributos de tamaño y posición del componente. Consulta la tabla a continuación para obtener más información.
Tab Index | Orden en el que el cursor se desplaza de un componente a otro y se centra en cada componente pulsando la tecla TAB de un teclado (aplicaciones web) o tocando Next (aplicaciones móviles en dispositivos Android). Haz clic en el campo e introduce un valor. | ||||||
Position Type | Haz clic en la flecha y selecciona un tipo de posición en el menú desplegable. Consulta la tabla a continuación para saber más sobre las opciones disponibles.
|
En esta sección se configuran los atributos para alinear el texto dentro del componente y se establecen las propiedades de margen y relleno. Consulta la tabla a continuación para obtener más información.
Alineación del texto | Haz clic en la opción de alineación deseada. Haz clic en la opción de alineación deseada: (de izquierda a derecha) justificada, izquierda, centrada o derecha , dependiendo de si desea que el texto se alinee con los bordes izquierdo y derecho, con el borde izquierdo, centrado entre los dos bordes del componente o alineado con el borde derecho. También puedes hacer clic en </> y escribir el código para establecer la alineación del texto manualmente. |
Propiedades de relleno | Espacio entre el borde del componente y el contenido del componente (valor). Introduce un valor para cada una de las propiedades de relleno: Padding Top, Padding Left, Padding Bottom and Padding Right. Puedes hacer clic en la flecha situada a la derecha de cada campo de relleno y seleccionar la unidad de medida deseada en el menú desplegable. |
Propiedades de los márgenes | Espacio alrededor del borde de un componente. Introduzca un valor para cada una de las propiedades de margen: Margen superior, margen izquierdo, margen inferior y margen derecho. Para definir la unidad de medida, haz clic en la flecha del campo de la derecha y selecciona una opción del menú desplegable. |
En esta sección se configura el estilo del componente. Consulta la tabla a continuación para obtener más información.
[en] Resource Origin | Método a través del cual se carga el recurso referenciado por el componente. Rellena este campo si el componente seleccionado hace referencia a un recurso, como una imagen o un video. Haz clic en la flecha y selecciona una de las opciones disponibles en el menú desplegable: elige L (Local) para recuperar el contenido codificado de los recursos locales o elige H (HTTP) para recuperar el contenido de los recursos del Communication Server. |
En esta sección, puedes definir el orden de los componentes dentro de la pantalla. Consulta la tabla a continuación para obtener más información.
Z-Index | Propiedad que define el orden de posición de los componentes. Si varios componentes se solapan, los componentes con un índice Z más alto se colocarán sobre los que tengan un índice más bajo. Este campo se rellena automáticamente. |
En esta sección se configuran los parámetros aplicables a las sombras del componente.
Shadow offset-x | Introduce un valor para la sombra con respecto al eje X (horizontal), que considera el centro del componente como punto de partida. Si el valor es un número negativo, la sombra apuntará hacia la izquierda. Puedes hacer clic en la flecha situada a la derecha del campo de sombra y seleccionar una unidad de medida en el menú desplegable. |
Shadow Color | Para establecer el color de sombra, haga clic en el campo Color de sombra y escriba un código de color hexagonal o haga clic en el icono cuadrado de bordes redondeados para abrir el selector de color ubicado a la izquierda (icono cuadrado de bordes redondeados). En el selector de color, seleccione un color o introduzca el código de color hexa o rgba. [en] You can also set the opacity percentage outside the color picker in the Opacity field. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the field and enter the desired percentage. |
Shadow offset-y | Introduce un valor para la sombra con respecto al eje Y (vertical), que considera el centro del componente como punto de partida. Puedes hacer clic en la flecha situada a la derecha del campo de sombra y seleccionar una unidad de medida en el menú desplegable. |
Shadow Blur Radius | Introduce un valor para la anchura del radio de la sombra. Puedes hacer clic en la flecha situada a la derecha del campo de sombra y seleccionar una unidad de medida en el menú desplegable. |
[en] In this section, you can set advanced attributes related to the design of the component. Refer to the table below to learn more.
[en] Back Button | [en] Attribute that indicates whether the event defined in the onClick attribute must be executed when the app user clicks or taps the back button. Click the arrow and choose one of the options available in the drop-down menu. Select true so that the event is activated or false so that the event is not activated. The default value is false. Importante[en] In the case of mobile apps, this attribute can only be configured for Android devices. |
[en] Force Show | [en] Attribute that tells the device to show a back button, even if it does not apply. Click the arrow and choose one of the options available in the drop-down menu. Select true so that the back button is shown or false so that it is not shown. If this attribute is not configured, the default value is false. |
En esta sección, puedes establecer los atributos aplicables al contenido de texto del componente que será visible en la app. Consulta la tabla a continuación para obtener más información.
Color | Color del texto. Para establecer el color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado de bordes redondeados para abrir el selector de color. En el selector de color, seleccione un color o introduzca el código de color hexa o rgba. [en] You can also set the opacity percentage outside the color picker in the Opacity field. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the field and enter the desired percentage. | ||||||||||
Font Size | Tamaño del texto. Para establecer el tamaño, haz clic en el campo y escribe el valor deseado. Consulte la tabla a continuación para obtener más información sobre los tipos de tamaños de texto y los valores disponibles.
| ||||||||||
Font Family | Familia de fuentes o tipo de letra del texto. Para establecer una familia de fuentes, haz clic en la flecha y selecciona una opción del menú desplegable. También puedes hacer clic en </> y escribir el código para establecer manualmente la familia de fuentes del texto. | ||||||||||
Font Style | Estilo de fuente del texto. Para definir el estilo de letra, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la cursiva. | ||||||||||
Font Weight | Peso de la fuente del texto. Para establecer el peso de la fuente, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la negrita. | ||||||||||
Text Decoration | Decoración añadida al texto. Para fijar la decoración, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es el subrayado. |
[en] Actions
En la pestaña Actions, puedes establecer animaciones para los componentes de la pantalla de tu app y determinar cómo el usuario invoca efectos y desencadena acciones mientras interactúa con la app. Consulta las secciones a continuación para obtener más información.Actions
En esta sección, puedes establecer eventos o acciones en el componente que serán activados por otras acciones determinadas. Por ejemplo, si la acción configurada es «On Click», se activará un evento o acción cuando el usuario de la app haga clic en el componente. Consulta la tabla a continuación para obtener más información sobre cada acción.
[en] On Click | Acción que consiste en hacer clic o tocar el componente. |
[en] On Tracking Event | [en] Action involving tracking On Click actions. To learn more about how to create a tracking event and add it to a component in your app, refer to the Tracking section.GA4 Tracking |
[en] On Double Click | Acción que consiste en hacer clic o tocar dos veces el componente. |
[en] On Hold | [en] Action involving clicking the component and maintaining it clicked for more than one second. |
[en] On Focus | [en] Action involving focusing on the component. For example, tapping on the component's text field to begin typing. |
[en] On Blur | [en] Action involving losing focus on that same component. |
En todos los casos, para establecer el evento o la acción que debe activarse, escribe la acción en el campo correspondiente o haz clic en los tres puntos verticales. Se abre la ventana Create new link. Haz clic en la flecha hacia abajo y selecciona uno de los tipos de enlace disponibles en el menú desplegable: View, SW States, Process, Lambda, Pop Up, Toggle, Event, Link, Mail, Module Screen o Interface Message. Aparece un nuevo menú desplegable. Haz clic en la flecha hacia abajo y selecciona la acción o evento dentro del tipo seleccionado. A continuación, completa los parámetros aplicables a la opción seleccionada. Una vez configurados los parámetros necesarios, haz clic en Accept.Instanciar un módulo de tipo pantalla
En esta sección, puedes establecer diferentes efectos sobre los atributos del componente y las animaciones a través de las cuales se producen los efectos. En primer lugar, debes seleccionar los atributos para los que deseas establecer efectos. Consulta la tabla a continuación para obtener más información.
Alpha | Transparencia u opacidad del componente. Introduce el valor para establecer la opacidad inicial del componente antes de que se ejecute la animación. El valor puede oscilar entre 0 y 1, considerando 1 como el valor que otorga el mayor nivel de transparencia. |
Scale | Dimensión del componente. Introduce el valor para establecer la escala inicial del componente antes de que se ejecute la animación. Por defecto, el valor de escala es 1, que equivale al tamaño original del componente. El valor puede ser cualquier número empezando por 1. |
A continuación, se configura la animación a través de la cual se ejecutarán los efectos previamente definidos. Consulta la tabla siguiente para obtener más información sobre las animaciones disponibles.
On Load Effect | Animación ejecutada inmediatamente después de cargar la pantalla. |
On Call Effect | Animación ejecutada al invocarla a través de un mensaje. |
En todos los casos, puedes establecer el código de la animación o configurarla con el Editor de animaciones. Para configurar la animación, haz clic en </> y, a continuación, haz clic en el campo de texto para empezar a escribir el código o haz clic en los tres puntos verticales para abrir el Editor de animación. Consulta Actions para aprender a utilizar el editor.Actions
[en] Advanced
En la pestaña Advanced, puedes configurar atributos avanzados para el componente. Consulta las secciones a continuación para obtener más información.Advanced
En esta sección, puedes establecer los diferentes atributos disponibles para configurar la información sobre el tooltip del componente. Consulta la tabla a continuación para obtener más información.
[en] Tooltip Enabled | Determina si el tooltip está activado en la app para el componente seleccionado. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para activar el tooltip o false para desactivarlo. |
[en] Message | Mensaje mostrado por el tooltip. Introduce un mensaje que se mostrará en pantalla. |
[en] Background Color | Color de fondo del tooltip. Para establecer un color, haz clic en el campo y escribe el código hexadecimal del color o haz clic en el ícono cuadrado de bordes redondeados para abrir el selector de color. En el selector de color, seleccione un color o introduzca el código de color hexa o rgba, respectivamente. [en] You can also set the opacity percentage outside the color picker in the Opacity field. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the field and enter the desired percentage. |
[en] Position | Haz clic en la flecha y selecciona una opción del menú desplegable para fijar la posición del tooltip con respecto al componente: Bottom, Left, Right o Top. |
En esta sección, puedes configurar diferentes atributos que afectan a lo que ves en el constructor visual. Consulta la tabla a continuación para obtener más información.
Importante
Los cambios realizados en esta sección no aparecerán en la app publicada.
Value | Atributo que simula el comportamiento del atributo Value de la sección Basic de la pestaña Design. Haz clic en el campo y escribe un valor para que se aplique automáticamente al componente. |
Background Image | Imagen aplicada al fondo del componente. [en] Image applied to the component's background for simulation purposes. Click the Background image field and type the name of the background image, or click the magnifying glass icon to open the image picker. Select one of the images from the list or use the search bar to find an image by name. |