Crear botón Ajax

El action button de tipo ajax crea un evento ajax de tipo onClick, permitiendo la ejecución de rutinas sin necesidad de recargar la aplicación.

Ejemplo del botón de acción en la aplicación

Vea a continuación cómo crear y configurar este tipo de botón.

Creando un botón

En la pantalla de lista de botones haga clic en Crear nuevo botón.

Datos del botón

Luego, seleccione el Tipo e informe el nombre del botón.

El campo nombre solo permite números, letras sin acento y guiones bajos.

Mirada de botón

En esta pantalla se definirá la apariencia del botón de visualización de la aplicación.

Tipo de visualización

Este atributo define el formato de visualización del enlace.

Algunas opciones de visualización se muestran según el tipo de visualización utilizado.

Las opciones son:

FontAwesome

Valor predeterminado del atributo, permite usar Font Awesome para la definición de iconos.

Ejemplo de FontAwesome

Botón

Muestra el elemento en la barra de acción como un botón. Al utilizar este atributo se desplegará una nueva configuración, Formato de Botón, que definirá el formato de visualización del botón, donde debemos definir la visualización del botón con:

• FontAwesome - Muestra solo FontAwesome
• Text - Muestra solo texto
• Font Awesome y texto: muestra FontAwesome y texto, colocando el icono a la izquierda.
• texto y Font Awesome: muestra FontAwesome y texto, colocando el icono a la derecha.

Ejemplo de Botón

Imagen

Le permite seleccionar una imagen del administrador de imágenes para definir el icono.

Ejemplo de Imagen

Texto

Muestra texto en formato de enlace.

Ejemplo de Texto

ID

Define el nombre del estado del botón.

Este texto no acepta idiomas ni variables para su definición

Fontawesome

Define el icono que se mostrará en la aplicación al seleccionar el Tipo de visualización como FontAwesome

Imagen

Define la imagen que se mostrará en la aplicación al seleccionar Tipo de visualización como imagen.

Haga clic en el ícono para abrir el [gestor de imágenes][link_gerenciador_img]{:target=”_blank”} y seleccione la imagen deseada.

Texto

Define el texto del enlace que se mostrará en la aplicación al seleccionar el Tipo de visualización como Texto

La definición de texto no tiene restricción de caracteres y se puede hacer con un fixed text o usando un lang, para crear sistemas con múltiples idiomas.

Ver más detalles sobre idiomas y sobre nuestro Diccionario de datos.

Color

Establece el color del icono de Font Awesome. Si no se informa ningún valor, el ícono asume el color definido en la configuración general de la [action bar visual][link_editar_visual]{:target=”_blank”}.

Se muestra solo cuando se usa Type of display como FontAwesome

Color (Hover)

Establece el color del ícono de Font Awesome en estado de desplazamiento, al pasar el mouse sobre el ícono.

Disponible al seleccionar Tipo de pantalla como FontAwesome.

Color (active)

Establece el color del icono de Font Awesome en el estado activo.

Disponible al seleccionar Tipo de pantalla como FontAwesome.

Visual del botón

Este atributo define el color del botón. Puede seleccionar un color de la lista o utilizar la opción Tema para heredar el diseño de botones utilizado en su aplicación.

Solo disponible al seleccionar Tipo de pantalla como Botón.

Visual del botón (hover)

Este atributo establece el color del botón al pasar el mouse sobre el botón. Puede seleccionar un color de la lista o utilizar la opción Tema para heredar el diseño de botones utilizado en su aplicación.

Solo disponible al seleccionar Tipo de pantalla como Botón.

Hint

Define el texto de ayuda para el botón.

La definición de texto no tiene restricción de caracteres y se puede hacer con un fixed text o usando un lang, para crear sistemas con múltiples idiomas.

Ver más detalles sobre idiomas y sobre nuestro Diccionario de datos.

Mensaje de Confirmacion

Texto de confirmación activado al hacer clic en el icono de la barra de acción.

Ejemplo de mensaje de confirmación

La definición de texto no tiene restricción de caracteres y se puede hacer con un fixed text o usando un lang, para crear sistemas con múltiples idiomas.

Ver más detalles sobre idiomas y sobre nuestro Diccionario de datos.

Borrar

Elimina un estado de botón.

Botão Adicionar Estado

Agrega una línea para configurar un nuevo estado para el botón ajax.

Estos estados se pueden manipular usando la macrosc_actionbar_state en el evento ajax.

Después de agregar los estados deseados y configurar la apariencia de los botones, haga clic en el botón Guardar y configure ajax para crear el botón y el evento.

Evento Ajax

Se creará el evento ajax, que se ejecutará en el onClick del botón.

En este evento debemos codificar los trámites que queremos realizar. Se agregaron algunas macros para manejar los botones de acción:

• sc_actionbar_clicked_state - Devuelve el estado actual del botón ajax creado en la barra de acciones.
• sc_actionbar_state - Cambia el estado actual del botón a un nuevo estado.
• sc_actionbar_disable - Deshabilita los botones de la barra de acciones.
• sc_actionbar_enable - Habilita los botones de la barra de acciones, deshabilitados por la macro sc_actionbar_disable.
• sc_actionbar_hide - Oculta un botón de la barra de acciones.
• sc_actionbar_show - Muestra los botones de la barra de acciones, ocultos por la macro sc_actionbar_disable.