Advanced Techniques - Refresh page content with JavaScript

1. General

If you have some programming experience, this workshop will show you how you can refresh specific page content with minimal effort. We will look at the different control types in Intrexx. All of the examples from this document are in the example application, which can be downloaded here and imported into your portal as usual.

2. Introduction

It is often a requirement that parts of page - e.g. one or more tables - should be refresh. This is especially the case when content is concerned that needs to be refreshed automatically, because a change to the data is performed by a process and the user should be informed about this as soon as possible. and many other use cases. This function is required when the portal is not directly operated by employees but when a highly visible screen should be updated automatically. Developers often approach these situations by refreshing the entire page and all of its content/elements. However, this creates unneccesary workload for the server because you do not always need to refresh all of the content. Many of these procedures can lead to long loading times.

3. View tables and free layout tables

Intrexx provides a simple option for refreshing view tables and free layout tables. This method not only relaods the data but also retains all settings of the table such as filters, dependency filters, paging and sorting. Please note that the value "<Table GUID>" needs to be replaced by the corresponding GUID of the desired element.
/**
* Refresh a table
* @method loadTable
*/
function loadTable()
{
    getElement("<Table GUID>").oUp.reload();

    return true;
}

/**
* Refresh a free layout table
* @method loadShapedTable
*/
function loadShapedTable()
{
     getElement("<Table GUID>").oUp.reload();

     return true;
}

4. Charts

As is the case with tables, this method for refreshing charts not only relaods the data but also retains all settings of the diagram such as filters, dependency filters and sorting. Please note that the value "<Chart GUID>" needs to be replaced by the corresponding GUID of the desired element.
/**
* Refreshes a chart
* @method loadChart
*/
function loadChart()
{
    getElement("<Chart GUID>").oUp.reload();

    return true;
}

5. Gauges

The values of gauge controls can also be refreshed using JavaScript. This function is available as of Online Update 11 for Intrexx 8. Please note that the value "<Gauge GUID>" needs to be replaced by the corresponding GUID of the desired element.
/**
* Refresh a gauge control
* @method loadGauge
*/
function loadGauge()
{
   var gauge = new upGaugeControl();
   var html  = getElement("<Gauge GUID>");
   gauge.reloadData(html, {animated: true});


   return;
}

6. Refresh content of individual containers from a Velocity template

This example is a little more complicated - but it provides a very good method to embed content into a page and refresh only this content. In the example application, an individual database query is performed on the data pool. The object "upSimpleAjaxContainer" is always available in Intrexx for displaying a specific file in a grouping. Please note: The following values are important here:
$('div[id=ID_myContainer]')[0]
In this example, the HTML attribute "id" of the grouping, where the content should be loaded, is used. You can of course use the standard function "getElement("<Grouping GUID>")" achieve the same result.
oRqParams:{}
Here, you can transfer specific values to your Velocity template. These values are transferred in a JSON structure (e.g. oRqParams:{myParam1:"value1", myParam2:"value2"}).

The following parameters are relevant for the function "loadAppSnippetVm":

Path to the file: In the example, a Velocity template from the application package is used. The path is entered accordingly with the scheme "internal/application/resource/<Application GUID>/<File name>".

{} : Request parameter, e.g. {rq_myParam1:"value1", rq_myParam2:"value2"}
{} : Form parameter to, e.g. {myParam1:"value1", myParam2:"value2"}
/**
* Loads a Velocity template in a grouping
* @method loadContainer
*/
function loadContainer()
{
	
var l_oSC  = new upSimpleAjaxContainer($('div[id=ID_myContainer]')[0], {oRqParams:{}});
l_oSC.oFup = ContainerAgent.getFuncPart($('div[id=ID_myContainer]')[0]);

	l_oSC.loadAppSnippetVm("internal/application/resource/1141ED6364F3A52C111D803D7EFC2B490153BCF9/container.vm", {}, {}, {rq_xhrReload:"1"});

return;

}

7. Refresh an application page in a grouping

So-called embedded tooltips have been supported as of Intrexx 8. This function allows you to load a page from an Intrexx application in a grouping on a page. In some cases, it can be useful to refresh this page dynamically. It can also be useful to display different pages at the same point in the application depending on user behavior. In the example application, a page with a view table is loaded in a grouping. Please note:
/**
* Refreshes a tooltip
* @method loadTooltip
*/
function loadTooltip()
{
    ix.loader.tooltip({
                    ixApp: {
                         guid: '<Application GUID>',
                         pageGuid: '<Target page GUID>',
                         recId: '-1'                        
                            },
                    data: { rq_meinParameter: "1234"},
                    windowSettings: {
                         position: 'embedded',
                         htmlTarget: $('div[id=ID_myTooltip]')[0],
                         title:'',
                         closeByButton:false,
                         closeByEsc:false,
                         key:'openTTP'
                        },
                   });
}

8. Refresh a single portlet on a portal page

If a single portlet should be refreshed, Intrexx provides a standard function. However, you should note that you need to add the portlet on the portal page in the example application. If you would like to use this function, you need the GUID of the portlet that you want to refresh. The GUID can be identified using the F4 key when the portal control is selected. This opens the XML view of the control which contains the portlet GUID.



Portlets can also be refreshed using JavaScript. Please note that the value "<Portlet GUID>" needs to be replaced by the corresponding GUID of the desired element.
/**
* Refresh a single portlet
* @method loadPortlet
*/
function loadPortlet()
{
   g_Portal.getPortlet("<Portlet GUID>").reload()
   
   return;
}

9. Closing comments

The GUIDs of elements are required in many situations. Intrexx script editor always provides the ability to access the entire application structure and insert the GUID at the corresponding point. Please note that every step has already been implemented in the example application. Therefore, you do not need to type in each word by hand. We hope you have fun with this workshop and that it helps you.