Customizing OpenIDM self-service UI

par | Sep 2, 2016 | Communauté, Gestion des Identités, Provisioning

We recently had to change OpenIDM self-service UI in order to add the user photo in his account profile. For one of our customer we wanted to show this picture instead of the impersonal icon used previously:

openidm self-service ui

openidm self-service ui

The process to integrate the icture is not obvious so that we will share with you how we achieve it.

1) Edit managed.json in order to add photo

The most important is to have this picture available in our internal user model, so we added this to our managed.json:

« thumbnailPhotoUrl » : {
« description » : «  »,
« title » : « photoUrl »,
« viewable » : true,
« searchable » : false,
« userEditable » : true,
« policies » : [ ],
« returnByDefault » : true,
« minLength » : «  »,
« pattern » : «  »,
« type » : « string »
}

(We fill this information from the GoogleApps connector based on thumbnailPhotoUrl present in the properties coming from the connector)

2) Change JS files in order to retrieve the data

We need to retrieve the photo data in the Navigation panel so we edit org/forgerock/commons/ui/common/component/Navigation.js

l205:

this.data.user = {
username: getUserName(),
thumbnailPhotoUrl: Configuration.loggedUser.has(‘thumbnailPhotoUrl’),
label: _.get(obj.configuration, « username.label »),
secondaryLabel: _.get(obj.configuration, « username.secondaryLabel »),
href: _.get(obj.configuration, « username.href »)
};

Now the ugly part. We are working with OpenIDM 4.0 and the build is provided to us with already compiled javascript (in openidm/ui/selfservice/extension/main.js) so you need to get the uncompiled version in the OpenIDM repo and replace the previous main.js with this file. => the main.js on repo

3) Change templace to show the thumbnail

Let’s open now templates/common/NavigationTemplate.html

l105:

{{#if user.photoUrl }}
<img class= »user-avatar bg-primary img-circle » src= »{{ user.photoUrl}} » style= »height: 50px;border: 3px solid #519387; »>
{{else}}
<i class= »user-avatar fa fa-user bg-primary »></i>
{{/if}}

And that’s it! When you user has a thumbnail filed he will see the picture.

Christophe Desclaux
Les derniers articles par Christophe Desclaux (tout voir)