Documentum TaskSpace image sur lien hypertexte

Objectif

Dans le cadre d'une mission, il a été demandé de mettre une image qui redirige l'utilisateur vers une page d'aide en cliquant dessus. A première vue rien de plus simple, puisqu' il est possible d'insérer un lien avec FormBuilder. Or, il est bien question de lien et c'est du texte qui est alors affiché sur la page.

Heureusement, une astuce basée sur les CSS va permettre de résoudre cette problématique.

Votre avis

Nobody voted on this yet  You need to enable JavaScript to vote

Tweet

Mise en place

Configuration formulaire

Dans un premier temps, il faut mettre en place un lien dans le formulaire. Dans le cadre de cet article, la configuration indiquera les valeurs suivantes.

Paramètre	Valeur	Utilisation
Name	lnkHelp	Cette valeur paticulière sera utilisée pour identifier les liens impactés par la modification CSS.
Link Text	hlp	Un text est mis par défaut pour identifier le lien sous formBuilder. Il pourrait être vide.
Link To	http://www.google.fr	Adresse cible pour le lien.

Le nom (technique) du lien est configuré dans l'onglet Display.

Les deux autres paramétrages sont spécifiés sous Special.

CSS

La mise en place de la configuration CSS nécessite une petite analyse HTML du code généré. Les navigateurs offres des outils d'introspection permet de sélectionner un élément et d'en afficher le code source.

Dans le cadre de cet article, le code source cible est le suivant.

<table style="text-align: left;" id="docview_contents_xform1_lnkHelpSplit_0" class="widget widget-in-VBox" border="0" cellSpacing="0" cellPadding="0">
<tbody>
<tr>
	<td style="text-align: right; vertical-align: top; display: none;" class="widget-label widget-label-in-VBox">&nbsp;</td>
	<td style="white-space: normal;" class="widget-control">
		<a href="http://www.google.fr" target="_new" xforms:ref="instance('strings')/lnkHelpSplit.link" alt="hlp">
		<span style="width: 25px; font-size: 12px; display: block; white-space: normal;" title="hlp">hlp</span>
		</a>
	</td>
	<td vAlign="top">
		<img style="display: none;" id="lnkHelpSplit___E_ICON" onmouseover="XFormsErrorTip.show('lnkHelpSplit');" onmouseout="XFormsErrorTip.hide();"
		vspace="2" src="/taskspace/wdk/theme/documentum/images/xforms/exclamation_mark.gif">
		<div style="display: none;" id="lnkHelpSplit___E">Ce champ est incorrect.</div>
	</td>
</tr>
</tbody>
</table>

Le nom du contrôle est repris au niveau de l'identifiant de la table HTML. Mais celui-ci est encadré retravaillé à l'aide de valeur rappelant le formulaire, la position du contrôle, etc. Il serait donc hasardeux de se fier sur la valeur exacte de cet identifiant.

A contrario, le lien n'est pas facilement identifiable par ses attributs. Il est inclus dans une cellule de la table, qui possède une classe widget-control.

L'objectif de la CSS est alors d' :

• incruster une image de fond au lien.
• faire disparaitre le texte.

La sélection du contrôle va s'effectuer en recherchant "le lien dans une cellule avec la classe widget-control, du tableau dont l'id contient lnkHelpSplit", ce qui se traduit par la recherche suivante : table[id*=lnkHelpSplit] .widget-control a.

Ensuite, l'injection de l'image s'effectue avec les paramètres background-image et background-repeat. La spécification de la taille va permettre reproduire la taille de l'image utilisée et éviter tout débordement.

Enfin le texte est masqué en le décalant dans sa zone d’affichage à l'aide du paramètre text-indent.

Le code CSS complet est le suivant.

/* CSS tricks to display image in background for a link. */
/* Remove the text. The area is still display and make the image as clickable. */
/* CSS tricks to display image in background for a link. */
/* Remove the text. The area is still display and make the image as clickable. */
/* The link is inside a table, after html rendering, for which the id is the one set in formbuilder. */
table[id*=lnkHelpSplit] .widget-control a {
    background-image: url("../images/navigation/help.png") !important;
    background-repeat: no-repeat;
    display: block;
    height: 33px;
    text-indent: -9999px;
    width: 45px;
}

Ainsi, l'utilisateur voit une image à la place du lien, sur laquelle il a l'impression de pouvoir cliquer. En fait, il clique bien sur la zone réservée au lien, dont le texte masqué laisse apparaître l'image de fond.

Conclusion

Comme bien souvent, il existe toujours une petite astuce élégante pour palier les manques des applications clientes Documentum, Webtop, TaskSpace etc, sans recourir à des développements lourds.

Cela met en évidence qu'un bon développeur Documentum doit avoir une culture informatique générale suffisante. Mais l'inverse n'est pas vraie, un bon développeur Web / Java, ne sera jamais un bon développeur Documentum sans formation.