...
...
...
...
...
...
...
...
...
...
...
...
...
Este control permite incorporar una imagen dentro del formulario.
Navegación
Pre condiciones
Guía paso a paso
Paso 1.
En la pantalla actual seleccionar el tipo de control Page Image y presionar el botón New.
...
Paso 2.
En la ventana Pop Up se deben ingresar los datos que crearan el control
...
General
Field. Nombre interno que se le asigna al control.
Image: En este campo se debe seleccionar la imagen que se desea aparezca en el formulario. Estas imágenes son las del repositorio de WayFast.
Tooltip. Es la etiqueta que se mostrara al pasar el puntero del mouse sobre el control
Link to Project: Este campo es necesario cuando se desea que al dar clic a la imagen mande llamar a una página de un proyecto. Se debe seleccionar el proyecto deseado.
Link to Page. Se debe seleccionar la página a la cual se desea se dirija una vez que se da clic sobre la imagen.
Parameters: Se definen que parámetros se enviaran a la página destino.
Name: Nombre de la ventana que se abrirá con la página destino.
Type: En este campo se define la forma en que se abrirá la página destino.
Position X. Es la coordenada X en la que se ubicara la nueva ventana
Position Y. Es la coordenada Y en la que se ubicara la nueva ventana.
High. La altura que tendrá la nueva ventana.
Width. Es el ancho que tendrá la nueva ventana
Comment.
...
Layout
Place Holder. Son los contenedores del Layout
Order. Es el orden en el cual se debe mostrar el control en la página.
Alignment: Alineación del campo en el formulario.
Container Style Class. Son las clases que permite modificar la posición del control, hacerlo más ancho, centrarlo, etc.
Item Class Style: En caso de querer cambiar el % del ancho del control.
...
Conditional
Conditional. Atributo puede ser condicionada la visibilidad de la imagen y únicamente será mostrada al cumplir con la condición.
Paso 3.
Después de capturar las características necesarias para el Page Image se presiona el botón Accept para guardar los cambios.
...
Overview
This document will focus on the “Page Image” control to define an image not only as visual element in the page, you can establish it as hyperlink to drill through other places in your project or external sites that you want to redirect depending on the parameters that you can include in Wayfast.
How to create a “Page Image” control?
Under the page details form, select “Page Image” control and click “New” button
...
A popup is displayed with the “General” tab as default to fill in the required fields. Let’s take a deeper analysis over the fields required for page image’s creation.
General
Field | Description |
|---|---|
Field | Control’s ID for the control inside the project |
Image | Search lookup field which retrieve all the Wayfast image’s repository. Only can pick one and this one will be used to be displayed on the page. |
Tooltip | You can include a tooltip text when doing mouseover the page image |
Link to Project | In case that the image will be used to redirect through another page in the project, first we need to define which project primary are going to link. |
Link to Page | This is related to “Link to Project” above field and we can select specifically the page redirection when we click on the “Page Image” control. |
Parameters | Define which parameters will be sent to the destination page. |
Name | Popup or tab window’s header name that will redirect as soon as the “Page Image” control is set. |
Type | Define the way that the destination page will be opened. |
Position X | X axis represent the horizontal position in which the new window will be located. |
Position Y | Y axis represent the vertical position in which the new window will be located. |
High. | Height size of the new window. |
Width | Width size of the new window. |
Comment | Text field to comment the purpose of the control. |
...
For example, we can select the “Help” icon to redirects specifically to the “Hello World” screen that we can set as main screen if you are new in the project.
In this case, we set the Project under the Solution that we are working on and subsequently, the “Link to Page” lookup field will retrieve all the pages available under this Project selection.
We can set parameters to display the image, in this case, we are going to leave in blank this option.
Selecting “Popup Mode” as Type, when the application’s user click on the “Page Image” control, it will prompt a different window. Other option “Self Window Mode” will open a new tab in the same browser.
Once all the general setup is completed, turn to “Layout” tab
...
Layout
Field | Description |
|---|---|
Place Holder |
|
Order | Indicate the order for each of the controls in the page. Commonly “0” order is used for main titles and subsequently can be ordered by hierarchy depending on the # of controls to display on page. |
Alignment | Display the alignment from the beginning of the row (Normal) or to the right of the previous control created on page. |
Container Style | Display the different styles to place the control in an specific area on the screen using Bootstrap. |
Item Style | Display the different font styles and sizes to show the control on the screen using Bootstrap. |
Conditional
If this new “Page Image” only needs to displayed on screen depending on certain conditions, we can go to “Conditional” tab and setup the variables to make this possible. Selecting “Yes”, the image will be visible every time that we enter to the page.
...
Click “Accept” button and save the changes for the new control
...
Let’s verify how the “Page Image” control is displayed on the screen. Click “Preview” button
“Help” icon is placed in the top left corner on the page. Clicking the image, the popup is prompted and redirecting to the page previously setup.
...
Recap
“Page Image” control definitely is one of the most used under Wayfast development, it allows to the developers to generate new options to redirect screens in a different way than text hyperlinks and also establishing connections to external pages. Improve the navigation and offer transitions in the project’s application.