Making Roll-Over Links in Web Client

Source: Bob Cusick, Servoy

OK - so I wanted to create links in Web Client that looked the default color, but then when hovered over, would change color and be linked to a method. Here's how it works in a nutshell - you need to have a CSS style that will undecorate the text when it's a link, and do underline it when it's rolled over. Then, you create some calculations to display the data and perform the method you want. Here's ONE WAY to do it:

1. Make a global (text) to hold your HTML style, and load it on the "onSolutionLoad" so that you only have to specify it in ONE place. Here's mine:

//set the global to contain the style information for the rollovers in lists in the web
globals.htmlHoverStyle = '<html><head><style type="text/css">a:link{color:#000000;text-decoration:none;}' +
'a:visited{color:#000000;text-decoration:none;} a:active{color:#000000;text-decoration:none;}' +
'a:hover{color:blue;text-decoration:underline;}smtext{font-size: 9pt;} xsmtext{font-size: 8pt;}</style></head><body>'

You can add whatever other styles you want.

2. Create a calc for the data you want to display. Let's take for example the name of a person that you can click - that will take the ID of the current person and run a global method called "GoPerson". This is a calc I called "display_personName" - and it returns TEXT:

if(name_full)
{
if(application.getApplicationType() == 5) //web client
{
return globals.htmlHoverStyle + '<a href="javascript:BtnGoPerson(\'' + ixpeople + '\');"><b>' + name_full + '</b></a></body></html>';
}
else
{
return '<html><body><span style="font-size:11pt;"><b>' + name_full + '</b></span></body></html>'
}
}
else
{
return null;
}

3. Next - you place the calculation column in a table view, set the displayType to "HTML AREA" - and importantly - set the scrollbars to "Never" and "Never".

In my solution, I made it so that when you're in the Smart Client you can't click on the link - but you can make it work in Smart Client as well - it's just that the text will always be underlined in blue.

NOTE: If you DO use it in the smart client - you MUST use that part - or the text will not match your existing type (change the 11pt to the point size you're using).