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.