Using HTML Entities in XPages

Introduction

Often when you’re designing a web page or application you want to use HTML entities or special characters. This happens quiet often when you are using Bootstrap in your design.

Problem

For example the header in the Bootstrap modal has a close button which is defined as followed:

<div class=“modal-header”>
<button type=“button” class=“close” data-dismiss=“modal”>&times;</button>
<h4 style=“color:red;”><span class=“glyphicon glyphicon-lock”></span> Login</h4>
</div>

When you past this code in your XPage you get the following error:

The entity “times” was referenced, but not declared.

So you cannot use this in your XPage source because it is not valid XML.

Answer

The short and quick answer is to use the numerical equivalents. In our case for &times; you will want to use & #215; (mind the space since WordPress is formatting it otherwise).

In the table on this linked page you will find on overview and description of (all) HTML Entities  and their corresponding Unicode decimals.

Below is a summary of HTML Entities I use often:

&nbsp; … & #160;

&times; … & #215;

&amp; … & #38;

&euro; … & #8364;

&quot; … & #34;

&reg; … & #174;

A simple tip, but useful none the less. Happy development =)

SNTT – Usemap & XPages

Introduction

I thought I write this one down. A developer asked me how to make a form more user-friendly. Basically a user reports via the form a problem somewhere in the building to the central desk and they send a mechanic. To have a more precise allocation of the problem, a room number is required to fill in.

I suggested to use an image map. There are sites around that help you define the correct coordinates.

XPages

In DDE add an image as a resource. Drag that same image into your XPage. In the Properties panel find under All Properties \ Basics the usemap property. Include here the name of your image map. This is the one you have set on your map object.

In the map object you can include in the HREF attribute an URL or JavaScript. With Dojo you can establish some nice interaction with input fields on your XPage.

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221; dojoParseOnLoad=”true”
>
<xp:image url=”/bambi.jpg” id=”image1″ usemap=”imap_bambi”></xp:image>

<map id=”imap_bambi” name=”imap_bambi”>
<area shape=”rect” coords=”11,1,160,132″ alt=”daddy”
title=”daddy” href=”http://www.father.com&#8221; />
<area shape=”rect” coords=”171,20,279,108″ alt=”mommy”
title=”mommy” href=”http://www.mommy.com&#8221; />
<area shape=”rect” coords=”131,145,239,233″ alt=”bambi”
title=”bambi” href=”javascript:alert(‘hi there’)” />
<area shape=”rect” coords=”279,12,387,100″ alt=”butterfly”
title=”butterfly”
href=”javascript:dojo.byId(‘#{id:inputText1}’).value = ‘found it'” />
</map>
<xp:inputText id=”inputText1″></xp:inputText>
</xp:view>

ismap property

What I do not understand is what the ismap property is capable of. Documentation is hard to find. Maybe you know an example?

Transforming RSS feeds into HTML, run an agent or use a JS Library?

A customer asked me if it would be easy to make (snippets of) RSS feeds from Notes blog applications visible on html pages (generated by Domino)?

Sure I said, but a search on Google brought me however no direct copy and paste result.

I played before with XML and transformation but I am just wondering what would most effective and more important easy for an Editor who maintains a page?

Just adding a little JavaScript on your page and providing the url of the feed, possibly the url of a stylesheet and a parameter how many items you want to have displayed maximum sounds the easiest for me. I am already using JQuery, could I take advantage of this?

How to tackle possible domain issues? Using an agent and do the transfarmation here? What about performance?

Right now I am still searching, but if you have some guidance your help is appreciated!

PS. I looked at services as RSS Include, would be great if there would be a generic solution in Notes for such a service.