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.
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.
Andon board
Kanban board
Bulletin board
Packaging regulations
Up-to-date information about manufacturing steps at a machine
Dashboards
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 unnecessary 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.
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.
/**
* Reloads a table
* @method loadTable
*/
function loadTable()
{
getElement("<GUID of the table>").oUp.reload();
return true;
}
/**
* Reloads a free layout table
* @method loadShapedTable
*/
function loadShapedTable()
{
getElement("<GUID of the table>").oUp.reload();
return true;
}
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.
/**
* Reloads a chart
* @method loadChart
*/
function loadChart()
{
getElement("<GUID of the chart>").oUp.reload();
return true;
}
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.
/*
* Reloads the gauge when it obtains the data via the control itself
*/
function gauge() {
var gauge = getElement("<GUID of the gauge>").oUp;
gauge.reloadData(getElement("<GUID of the gauge>"), {animated:true});
return;
}
/*
* Reloads the speedometer if it gets the data via a JavaScript function
*/
function gaugeJs() {
var gauge = getElement("<GUID of the gauge>").oUp;
var data = [{
"animated": true,
"gaugeValue": 20,
"gaugeDisplayValue": 20,
"gaugeDescr": "Lorem ipsum",
"gaugeMinVal": 0,
"gaugeMaxVal": 100,
"gaugeValDescr": "%",
"bands": gauge.options.axes[0].bands
}];
gauge.reloadDataJS(data);
return;
}
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 grouping is defined as the HTML type "div" on the Options tab.
The value "myContainer" is defined in the expert attribute "name" for the grouping.
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 into a grouping
* @method loadContainer
*/
function loadContainer()
{
ix.loader.container({
vm: "internal/application/resource/52C9EFA84564B161D33A89B3947CC707516368EF/container.vm",
html: ix.util.getHtml("11B8A1C611174F48F114C61864BCCF6A09B2667A"),
ixApp: {
guid: "52C9EFA84564B161D33A89B3947CC707516368EF",
pageGuid: "812FE404BA1E0C302B2A7F7970BDE9DAB99E55B8"
},
onBeforeUnload: () => {
// your code here
},
data: {
rq_xhrReload: "1",
}
});
}
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:
The grouping is defined as the HTML type "div" on the Options tab.
The value "myTooltip" is defined in the expert attribute "name" for the grouping.
/**
* Reloads a gauge
* @method loadTooltip
*/
function loadTooltip()
{
ix.loader.tooltip({
ixApp: {
guid: '<GUID of the application>',
pageGuid: '<GUID of the target page>',
recId: '-1'
},
data: { rq_myParameter: "1234"},
windowSettings: {
position: 'embedded',
htmlTarget: $('div[id=ID_myTooltip]')[0],
title:'',
closeByButton:false,
closeByEsc:false,
key:'openTTP' },
});
}
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. For this function the GUID of the portlet which has to be refreshed is required. The GUID can be identified using the F4 key when the page which is defined as portlet is selected in the application structure. This opens the XML view of the page. The GUID of the portlet can be found after key="portletGuid".
Portlets can also be refreshed using JavaScript. Please note that the value "<GUID of the portlet>" must be replaced by the corresponding GUID of the desired element.
/**
* Reloads a single portlet
* @method loadPortlet
*/
function loadPortlet()
{
UpPortal.reloadPortlet("<GUID of the portlet>")
return;
}
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.
Email us