In my previous post “Another draw (unite gallery) in the waste-basket” I wrote the complication I had with getting the Unite Gallery to work properly within XPages.
It turns out that this is related to Asynchronous module definition complications within XPages., although you do not get error messages in your web browser console.
Fixing the XPages R9 dojo define.amd problem once and for all
Marky Roden wrote a post about a solution a while ago which was inspired by a x-code snippet Ferry Kranenburg posted.
The principle is quiet simple but saves you a lot of headaches:
- duplicates define.amd to define._amd
- deletes define.amd
- loads the AMD enabled jquery plugin (successfully)
- duplicates define._amd back to define.amd
- deletes define._amd
Using a Theme
In stead of setting the fix for individual pages I am using a Theme to fix it (since I am using a Select2 combobox in my navbar header).
Step 1 – Adding two JS libraries to your WebContent
These files contain the same code as in the XSnippet.
Step 2 – Load your resources via a Theme design element
As a result the buttons on the XPage containing the Unite Gallery work fine again !
Happy development =)
For an application I want to provide an image slider, in stead of the default Bootstrap carousel. I remembered a blog post of Johnny Oldenburger about Unite Gallery a while ago so I gave that a try.
Repeat and xp:image
Where Johnny demonstrated some static images I want to populate the image collection so I set up a repeat control with an xp:image control inside and calculate it’s properties.
Here is what the code looks like:
The code of the XPage you can download here.
After loading the JS resources I have a script block that build the gallery when the document is ready. The div gallery functions as container for the gallery.
Then I have a repeat control. An album object is just a Notes document that contains references to other Notes documents containing the picture files. So my Album.getPictures method returns a vector of references for which I have to make a lookup (via a Picture object) and collect some values (which size picture to use (thumbnail or original).
I separate the design from the data, so I also have to collect the location of the data db.
In the example I have two ways to define the image, one is via a xp:text control and the other is via the xp:image control. I rather prefer this last option.
Below you can see a snippet of how the result. At first it looks nice, does’t it?
Complications with XPages
So after I got the gallery on my XPage with dynamic content I started to notice undesired behaviour. My Bootstrap navbar links (xp:link) didn’t work anymore. Buttons on the same page stopped behaving and more.
A quick search after “Unite Gallery and XPages” lead me to some stackoverflow questions where people described similar problems.
Untill now I have not found a solution to get it working.
Before implementing a plugin in XPages, do some research on possible complications.