Page Image
- ejaramillo
- Matias
- Sergio Rodriguez
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.