Monthly Archives: January 2014

On Opening modal Tooltips in Intrexx

Sooner or later when running an intranet portal with numerous applications you will want to provide the users with links. Not simply links to the portal’s home page, probably not even to the starting page of some application: You will need links that direct the user to a specific data record/entry. These links could be needed within an application – maybe as part of some table or list. Most commonly though, they appear in email notifications where the specific data is linked directly for the user’s convenience.

Generally, linking to data records is not much of a problem in Intrexx. All you need is a few request paremters and you’re good to go. However, if your applications get fancier, chances are that you do not have a simple viewpage to open in the main window. We do have a fair number of applications that consist of a starting page where all the entries are listed and the individual data records are viewed only in a modal tooltip window on top of that starting page. So how can you provide links to specific data records when your application is built like this?

The URL and Request Parameters

In order to create a link that goes somewhere specific and that even transports additional information you need to set some request parameters. The minimum to create a meaningful url that goes beyond the portal start page is to speficy the application guid (rq_AppGuid), the guid of the page to display (rq_TargetPageGuid) and – if needed – the record id (rq_RecId). In Velocity you can create these links with the $UrlBuilder context object (see API here).

To make the application behave in some special way I find it the easiest to provide a custom request parameter and then deal with that in the applications onload event.

Suppose your url looks something like this:


http://<baseurl>?rq_AppGuid=D8D...E6E&rq_TargetPageGuid=ED1...EFD&rq_OpenRecId=31

Note that instead of the standard rq_RecId I introduce my own custom rq_OpenRecId. The rq_AppGuid and rq_TargetPageGuid parameters are enough to open the application’s starting page, which usually does not need a specific record id because it is a viewpage on the top level and not an editpage below a data group.

On the starting page place a static text field set to “Programming”. This allows you to define some JavaScript functionality which depends on the custom request parameter. It could look something like this:

<script>
function onLoad_openTooltip(){
  #if($Request.containsKey("rq_OpenRecId"))
    #set($strTTRecId = $Request.get("rq_OpenRecId") )
    var strTTRecId = "$!strTTRecId";
    // JavaScript code to open tooltip:
    // ...
  #end
}
</script>

If the function onLoad_openTooltip() is called in the page’s onload event it will use rq_OpenRecId to execute the JavaScript code that opens the modal tooltip.
Note that the conditional Velocity #if ... #end must not wrap the function definition itself as that would cause an error whenever rq_OpenRecId is missing.

In the above example line 7 is still missing the actual JavaScript code to open the modal tooltip. Let’s look at how this can be achieved.

Open Tooltips with JavaScript

Using the Anchor tag

It is very easy to create the HTML markup for modal tooltips in Intrexx. It is also well documented, too. All you need is the URL with the neccessary request parameters – rq_AppGuid, rq_TargetPageGuid and rq_RecId (in hex format) – and a few data attributes in the anchor tag.

<a href="?rq_AppGuid=D8D...E6E&rq_TargetPageGuid=ED1...EFD&rq_RecId=31" 
  data-hijax="tooltip" 
  data-hijax-tooltip="modal" 
  data-hijax-tooltip-props="strTitle:false"
  id="ID_mylink">
    click me</a>

To trigger this link, a simple jQuery call will suffice:

$('#ID_mylink').click();

Hide the anchor away, put the jQuery call in line 7 mentioned above and you’re ready!

But…

Creating markup when it is not really needed is never the best idea. You basically pollute your HTML with hidden elements, so this is really a – ugh! – workaround. We can do better than that! Let’s look at an alternative JavaScript-only solution.

Using the showTTP() function

The standard method for opening an Intrexx application using JavaScript is calling the makeAppRequest() function. Given the values for rq_AppGuid, rq_TargetPageGuid and rq_RecId you can open a page in either the main window (stage) or as a popup window.

var strAppGuid = 'D8D...E6E';
var strPageGuid = 'ED1...EFD';
var strRecId = '1';
makeAppRequest(strAppGuid, strPageGuid, strRecId, true, true, false);

What you cannot do with this function is open a tooltip. For this, there is showTTP().

In order to open a tooltip window, use the showTTP() function. This function is listed in the official JavaScript reference for Intrexx but it is not well documented. It is also not that easy to use because of the many parameters that need to be passed. Let’s take a look at a sample call of this function:

var strAppGuid = 'D8D...E6E';
var strTTPageGuid = 'ED1...EFD';
var strTTRecId = '1';
var strTTName = 'MyTooltip';
var oRQParams = {
	rq_AppGuid: strAppGuid,
	rq_TargetPageGuid: strTTPageGuid,
	rq_RecId:strTTRecId
};
var oTTSettings = {
	bModal:true,
	strTitle:false,
	bCloseButton:true,
	bCloseByKey:true
};
Helper.showTTP(false,false,strTTName,oRQParams,false,oTTSettings);

No unneccessary markup, just a bit of JavaScript. Again, merge the above snippet into the example onload function and you’re done.

Using Intrexx buttons

I mentioned above that uneccessary elements should be avoided where possible. Unfortunately, they are super convenient to use. So just for reference, let’s look at what is probably the dirtiest albeit most intuitive of all solutions:

On the starting page, instead of creating an anchor tag as described above, place a button that opens the desired page and define the modal settings. If the target page is an edit page you can simply choose it in the dialog. If it is a viewpage, choose an editpage instead – we’ll correct that next.

The JavaScript code to adjust the tooltip’s page and record id and to trigger the button looks like this:

var strTTPageGuid = 'ED1...EFD';
var oButton = getElement("158...8A8");
oButton.oUp.oTarget.rq_TargetPageGuid = strTTPageGuid;
oButton.oUp.oTarget.rq_RecId = strTTRecId ; // from the request parameter
oButton.click();

In closing, opening data in modal viewpages is an increasingly common design pattern in our portal, so I hope that the Intrexx API will be extended with a more convenient version of showTTP(), one that is similar to makeAppRequest(). In the meantime, you can always wrap showTTP() in a utility function and make that available across all applications using custom.js.