Sometimes it is required to add some CSJS code at the beginning of the XPage before the Dojo libaries are loaded and are executed. This can be easily achieved by using the resource aggregation feature and including a CSJS library with the <xp:headTag>.
First you have to create a CSJS library which contains the code you want to execute:
Then you have to add the <xp:headTag> which loads the CSJS library:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.properties>
<xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value="Before.js" />
</xp:this.attributes>
</xp:headTag>
</xp:this.resources>
</xp:view>[The xp:parameter can ignored if resource aggregation is enabled for the whole application]
The generated HTML source code will look like this, with the CSJS library at the top of the page:
It works ONLY if resource aggregation is enabled. If it is disabled, the CSJS library is added after the Dojo libraries and style sheets:
Very interesting. Great tip.
Might be helpful some time, so thanks for sharing! Though it might be better to load your own stuff at the end of the page – when dealing with frameworks e.g. that execute the code in „afterPageLoad“, „on Ready“ or „ready“ methods. Someone told me that this increases performance in loading the page. Didn’t figure that out for myself.
It increases the loading performance because the browser is blocked only at the end of the page load. But it is better if you are load your scripts asynchronously (like Dojo’s AMD mechanism does). This stops the blocking of the UI during page load completly.
Pingback: XPages: Dojo 1.8.1 & jQuery Mobile 1.3.1 | blog@hasselba.ch
Hi,
this fixed an issue with justgage.js for me. Thanks for the post!
Thanks very much for this tip Sven. It saved us today 🙂
Great tip.
This only works for Xpages, it won’t work in a CustomControl.
The xsp.resources.aggregate has to be in the main XPage for general activation. So, it might be a good idea to add it to every XPage or to put it to the general application settings.
Pingback: Displaying Markdown in an XPage - FoCul
Thank you for the tip Sven. Saved me today with the import of an external application.
Pingback: Eonasdan datetimepicker for bootstrap 3 in xPages – inneka.com
Pingback: Displaying Markdown in an XPage using the showdown.js library | wp2020.focul.net
Pingback: Displaying Markdown in an XPage using the showdown.js library - wp2020.focul.net