...
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 lesson will be focused on the “Page Image” control. It can be used as visual element in the page and also can be established as hyperlink to drill through other places in our project or external sites that we want to redirect depending on the parameters included in Wayfast.
How to create a “Page Image” control?
Under the page details form, select “Page Image” control and click on “New” button
...
A popup is displayed with the “General” tab as default to fill in the required fields. Let’s analyze the fields required for page image’s creation.
General
Field | Description |
|---|---|
Object Name | 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 |
Comment | Text field to comment the purpose of the control. |
Data Link
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. |
Let’s create a new control where we can insert a “Help” icon to redirects specifically to the “Hello World” screen that we can set as main screen in our new 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 example, we are going to leave this option empty.
Selecting “Popup Mode” as Type, when we 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 be 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 on “Accept” button and save the changes for the new control
...
Let’s verify how the “Page Image” control is displayed on the screen. Click on “Preview” button
“Help” icon is placed at the top left corner on the page. 0
...
Clicking the image, the popup is prompted and redirecting to the page previously setup.
Recap
“Page Image” control will be one of the most used under development since we can redirect to new screens in different ways than text hyperlinks and also we can establish connections to external pages. During this lesson, we learnt how to Improve our navigation and offer transitions in the project’s application.