Advanced Techniques - Refresh page content with JavaScript
1. Allgemeines
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.
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 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 grouping is defined as the HTML type "div"
on the
Options tab.
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:
The grouping is defined as the HTML type "div"
on the
Options tab.
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 th 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.