Hover Smartlinks
There are numerous functions for Smartlinks with a hovering capability. However, perhaps the greatest use would be drilling down to detail information on one particular record. With the Hover Smartlink capability, your user can now drill down to detail information without navigating away from the header information. Thanks to AJAX capabilities, your users will have a more streamlined browsing experience, allowing them to access more data on one screen. Before we go through the procedure of creating this, here is what the final product will look like:
On Page Load, the screen will resemble this:
When I hover over my link, the screen will look like this:
Note the dashed line under the hyperlink denotes that this link is a Hover Smartlink.
The process for creating hover Smartlinks is very straightforward. In fact, the process is quite similar to creating standard Smartlinks. However, Hover Smartlinks require a small amount of setup work (Data Dictionaries created after 9/13/2007 can ignore this setup section).
Note: The section below only needs to be performed once per data dictionary.
Step 1
Click the Data Dictionary Tab.
Click Paint Data Dictionary Files.
Click Servlet Style Sheet.
At the bottom of the file, copy one of the following codes:
m-Power users, please use this code:
A.hover:link { color : #700207; background : transparent; text-decoration : none; border-bottom:1px dotted #700207; }
A.hover:visited { color : #700207; background : transparent; text-decoration : none; border-bottom:1px dotted #700207; }
A.hover:hover { color : #700207; background : transparent; text-decoration : none; border-bottom:1px dotted #700207; }
A.hover:active { color : #700207; background : transparent; text-decoration : none; border-bottom:1px dotted #700207; }
div.ajaxboxclass { border-bottom: 3px outset #aaaaaa; border-right: 5px outset #cccccc; border-top: 1px outset #bbbbbb; border-left: 1px outset #cccccc;
background-color: #ffffff; padding: 10px 10px; overflow: hidden; z-index:1; }
div.ajaxboxinner { border: 1px solid #700207;}
mrc-Productivity Series users, please use this code:
A.hover:link { color : #006478; background : transparent; text-decoration : none; border-bottom:1px dotted #006478; }
A.hover:visited { color : #006478; background : transparent; text-decoration : none; border-bottom:1px dotted #006478; }
A.hover:hover { color : #006478; background : transparent; text-decoration : none; border-bottom:1px dotted #006478; }
A.hover:active { color : #006478; background : transparent; text-decoration : none; border-bottom:1px dotted #006478; }
div.ajaxboxclass { border-bottom: 3px outset #aaaaaa; border-right: 5px outset #cccccc; border-top: 1px outset #bbbbbb; border-left: 1px outset #cccccc;
background-color: #ffffff; padding: 10px 10px; overflow: hidden; z-index:1; }
div.ajaxboxinner { border: 1px solid #006478;}
Click the “Save” icon & close the window (the above code controls the look and feel of your new Hover Smartlinks).
Step 2
Under the General Tab, click the “Header File”.
On the first line, paste in the following code:
<script language="javascript" src="/mrcjava/mrcclasses/prototype.js"></script>
<script type="text/javascript" src="/mrcjava/mrcclasses/mrcjsajax.js"></script>
Click the “Save” icon & close the window (this code above calls external Javascript that controls the functionality of your Hover Smartlinks).
How to Create Hover Smartlinks
Create your Web 2.0 application and be sure to specify at least one Smartlink.
Once your application is compiled, open it within m-Painter (this document will assume you want your Smartlink created over existing data, rather than as an additional column).
Right-click where the existing link is and select “Delete Column”.
Click the field you wish to contain the Hover Smartlink and click the “Insert/Edit Hyperlink” button within the Toolbar.
Under the Smartlink URL drop-down list, select the Smartlink you wish to use.
Next, click the “Target” tab.
Specify “<hover popup window>” from the “Type/Target” drop-down window.
You can also control the size of the pop-up window here.
Note: You do not have to specify a height, as the screen will automatically shrink and grow based on the number of records you wish to return. The width, however, is mandatory.
Click “OK”. Click the “Save and Deploy” button.
Congratulations — you have created a Hover Smartlink.
Note: In this example, we created one hover Smartlink. However, you can create multiple levels of Hover Smartlinks.