XPages: Inject CSJS code at page top

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:

Dieser Beitrag wurde unter Dojo Toolkit, HTML, Java Script, Web abgelegt und mit , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

13 Antworten zu XPages: Inject CSJS code at page top

  1. Very interesting. Great tip.

  2. Oliver Busse sagt:

    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.

  3. Pingback: XPages: Dojo 1.8.1 & jQuery Mobile 1.3.1 | blog@hasselba.ch

  4. jjtb somhorst sagt:

    Hi,

    this fixed an issue with justgage.js for me. Thanks for the post!

  5. John Jardin sagt:

    Thanks very much for this tip Sven. It saved us today 🙂

  6. Kev sagt:

    Great tip.
    This only works for Xpages, it won’t work in a CustomControl.

    • Thomas sagt:

      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.

  7. Pingback: Displaying Markdown in an XPage - FoCul

  8. Andreas Imnitzer sagt:

    Thank you for the tip Sven. Saved me today with the import of an external application.

  9. Pingback: Eonasdan datetimepicker for bootstrap 3 in xPages – inneka.com

  10. Pingback: Displaying Markdown in an XPage using the showdown.js library | wp2020.focul.net

  11. Pingback: Displaying Markdown in an XPage using the showdown.js library - wp2020.focul.net

Schreibe einen Kommentar zu jjtb somhorst Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.