Advanced Techniques - Automatic forwarding dependent on the end device
If newsletters or tasks with a link to an Intrexx page are sent via email,
then it is not possible to control whether the recipient opens the link on a
mobile device or a desktop PC. If the link leads to a page created for desktop
PCs, then this cannot be opened on a mobile device. In this case, you have the
ability to identify which type of device is accessing the target page and then
to respond accordingly. This workshop will show you how. Background knowledge
in Velocity and JavaScript are an advantage.
Layout
For this method to work correctly, a desktop as well as a mobile layout
needs to have been configured.
Page setup
Different to the usual approach, a page that serves as a switching point
needs to be created first. This page needs to be viewable on all device
types. Therefore, a mobile view page is created via the
page wizard.
Two
buttons
are added to this page. The
destination
of the first button should be the page for desktops, and the destination
of the second should be the page for mobile devices. Both buttons are
moved to the
hidden area.
In addtion, a clear notification is required that informs the user that
they are being forwarded automatically.
Differentiation via JavaScript
With this option, the following JavaScript call is stored in the onload event
of the switching point page that was just created:
window.setTimeout('MobileDesktopRedirect()',5000);
The stated method needs to be defined in both the JavaScript for desktop and
for mobile devices
(
Edit menu / Edit script
/ Edit JavaScript for desktop / Edit JavaScript for mobile, respectively).
The method for the desktop triggers a click of the first button and the
method for mobile devices triggers a click of the second button.
Intrexx decides for itself which of the two scripts is triggered.
/* JavaScript for desktop devices */
function MobileDesktopRedirect(){
getElement("B48F.....AFBF").click() /*Desktop buttoncontrol*/
return true;
}
/* JavaScript for mobile devices */
function MobileDesktopRedirect(){
getElement("0A03.....D462").click() /*Mobile buttoncontrol*/
return true;
}
Differentiation via Velocity
Because the JavaScript option means that two scripts need to be maintained,
here is an option with Velocity. The differentiation and forwarding
takes place in one central place. A Velocity file is referenced to be intialized
in the properties of the switching point page.
This file is constructed as follows:
#set($guid = "")
#if($LayoutManager.getLayout($layout).isMobile())
#set($guid = "0A03.....D462") ##GUID of the button for the mobile page
#else
#set($guid = "B48F.....AFBF") ##GUID of the button for the desktop page
#end
<script type="text/javascript" class="evalcode">
function MobileDesktopRedirect(){
getElement("$guid").click();
}
window.setTimeout("MobileDesktopRedirect()",5000);
</script>
To begin with, the code checks whether the current layout is a mobile layout
and generates a JavaScript based on this that clicks on the correspdonding
button. The class attribute "evalcode" is required because otherwise
the JavaScript will not be performed on mobile devices.
|
The query used here, can be used to show the button via a
conditional display,
which is then triggered later. This means you can provide the
user with the ability to click on the button if the forwarding does not
work correctly or takes too long. In this case, the two buttons are not moved
to the hidden area but left on the workspace.
|