357 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
Deep Dive into Social Business Toolkit with XPages: The Box Integration (1)
Mon, Sep 15th 2014 102
XPages Tip: Realizing the Cost of a Value Binding...
Mon, Sep 8th 2014 174
Mini Patterns for XPages: Using Beans for Parent - Child Documents
Mon, Sep 1st 2014 229
Changing URL in File Download Control...
Wed, Jun 25th 2014 200
A Quick Question for Administrators...
Tue, Jun 10th 2014 263
RIP Tim Tripcony...
Mon, May 12th 2014 702
E-mail will be dead... For some people...
Sat, Feb 22nd 2014 350
Top 10
RIP Tim Tripcony...
Mon, May 12th 2014 702
IBM Connect 2014 slidedeck on the IBM Social Business Toolkit SDK
Thu, Feb 6th 2014 591
Mystery Solved: "Error loading USE or USELSX module"
Mon, Nov 21st 2011 476
A little story about an error with ID Vault...
Wed, Jan 12th 2011 435
Authenticating Notes users for Web apps automatically...
Wed, May 11th 2011 358
E-mail will be dead... For some people...
Sat, Feb 22nd 2014 350
Still part of it: IBM Champions
Fri, Dec 6th 2013 269
My previous blog post was ’Hot’!
Sat, Dec 7th 2013 266
A Quick Question for Administrators...
Tue, Jun 10th 2014 263
BP308 - The Journey to Becoming a Social Application Developer
Tue, Jan 21st 2014 259


Customizing Quickr for Domino 8.5.1 (part-2)
Serdar Basegmez    

My latest post was about Lotus Quickr for Domino customization. While designing Turkish Lotus User Group site, I have learned lot about this customization issue.

I said that it was poorly documented, whereas IBM released this handy presentation about the general concept of widget customization. I wish I had seen this before I have consumed hours to understand what's going on. Unlucky me :)

OK. I am posting my story about how I customized LUGTR Quickr site business card and footer (which I mentioned on my previous post) widgets.

About business card, don't raise your expectations, because I did not have time to do the essential part (getting additional data to the business card). I just try to explain how to place a photo on the business card and change the layout slightly. Remember, we don't have Lotus Connections Profiles. If we had, it would not be necessary to change anything, because it already provides enough customization.

First you should decide to change what. Is your change going to be available for whole Quickr implementation, or just for a customized theme. I did the business card issue for the whole site but the footer was just customized according to the custom theme...

Let's begin with the footer. Footer is a widget, named as "footer.js" placed under "qphtmlwidgetsmisc" directory (relative to "/data/domino/html" folder). You can see that widget names explains their path...

If you look at the widget script, you can see these lines in the postCreate function:

.... 
var xmldoc = this.getXmlDocFromString('<?xml version="1.0" encoding="utf-8" ?><entry></entry>');

this._xsl = (this.xslSource.length =0) ? this.getWidgetLocation() + "/footer.xsl" : this.xslSource;        

var _xslParams = new Array();
_xslParams['WIDGETID_PARAM'] = this.id;
_xslParams['TABLE_SUMMARY'] = window.q_LocaleUtils.getStringResource("FOOTER.SUMMARY");
_xslParams['IS_OFFLINE'] = window.q_BaseLoader.environment.isOffline;

var res = this.transformContent(xmldoc, this._xsl, _xslParams);
....


Don't look for functions like "this.getXmlDocFromString()" or "this.transformContent()" in this javascript file. They are inherited from "quickr.widgets._transformer" widget. What this script is doing is simple. It creates an XML DOM (empty one here), put some additional parameters and transform it to some HTML DOM object and place it inside the related div object.

<div dojoType="quickr.widgets.misc.footer"></div>


You can also see that the default XSL file (footer.xsl) is located under "htmlqphtmlwidgetsmisc" folder. It uses the default one if nothing defined under "xslSource" parameter. Here we see a problem. "xslSource" parameter is handy, because some widgets don't take any parameters from their declaration. In business card, we'll see how we will handle if it's the case.

Now, look at the XSL file. I will import some important parts here.

... 
<xsl:output method="html"  encoding="utf-8" />

<xsl:param name="WIDGETID_PARAM" select="'*DEFAULTWIDGETID*'" />
<xsl:param name="IS_OFFLINE" select="''" />
<xsl:param name="TABLE_SUMMARY" select="''" />
...
<div class="lotusFooter" id="lotusFooter">
        <table cellspacing="0" width="100%" summary="{$TABLE_SUMMARY}">
                <tr>
                        <th><div dojoType="quickr.widgets.misc.textlocalizer" key="FOOTER.LOTUSQUICKR"></div></th>
                        <th><div dojoType="quickr.widgets.misc.textlocalizer" key="BANNER.HELP"></div></th>
                        <xsl:choose>
                        <xsl:when test="$IS_OFFLINE = 'true'"></xsl:when>
                        <xsl:otherwise>
                        <th class="ConnectorSection"><div dojoType="quickr.widgets.misc.textlocalizer" key="FOOTER.CONNECTORS"></div></th>
                        </xsl:otherwise>
                        </xsl:choose>
...
<li><a href="http://lotusnotus.com/lotusnotus_en.nsf/dx/javascript:;" onclick="dijit.byId('{$WIDGETID_PARAM}').openQuickrInfoPage('0337C2FE18A2F9EB05257291006F0D04');"><div dojoType="quickr.widgets.misc.textlocalizer" key="FOOTER.ABOUT"></div></a></li>
...


The first part defines internal parameters to be used in transformation. We remember these from the js code which sets these parameters before transformation. You can see that "{$TABLE_SUMMARY}" notation provides us to use it at the HTML output. You place multilingual text with "textlocalizer" widget. The most important part, you can use selective output here. The link to download Quickr Connector plugin will not be printed if the user sees the page offline.

I copied this XSL file under my theme folder and changed as I wanted. Finally I changed widget declaration as the following:

<div dojoType="quickr.widgets.misc.footer" xslSource="/qphtml/skins/lugtheme/widgets/cFooter.xsl"></div>


I will not get into details here. It's just HTML. I changed the table to 3 column-layout and put sponsor links to the wider part (don't use styling on the XSL. The browser caches this file.) One thing you shoud be careful is to use XML notation in XSL file. Close all your tags (many designers don't close "< br >" tag, for instance)...

Let's get to the business card issue, which is a bit more complicated. This is the standard business card on QuickrD:

@@[CPEOPLE.MOREINFO]@@

Let's begin with the simple one: Changing the photo. Photo source is set automatically, by qpconfig.xml configuration. Here, I will open a discussion (which I am not the first) to question why Quickr has a different business card system than Sametime? Yep, it seems idiotic (and mysterious) that Quickr cannot take advantage of Sametime business cards. As you know, most general technique in Sametime is to store business card photos inside LDAP. I tried several alternative technique but they are not efficient.

Photos are coming from a URL request. There is a suggestion by Vincent Cailly on the wiki that designing a servlet to get photos directly from LDAP. I prefer not to do that because Java Servlet is a very resource-consuming task. I had my check-in application (thanks to Julian from YouAtNotes) which contains all avatars. I simply created an agent and modified qpconfig.xml:

... 
email = LCase(getURLParam(session.documentContext.query_string(0), "e="))
... /*** Get avatar url with some lookups ***/
if result(0)="" Then
        Print "["+default_avatar+"]"
Else
        Print "["+result(0)+"]"
End If


... 
<user_photo_source>
  <directory>
    <url>
      <![CDATA[ /registration.nsf/getavatar?OpenAgent&e={email} ]]>
    </url>
  </directory>
</user_photo_source>
...


That was the easy part :) Rough part is to modify the layout and include more details... Let's examine the business card widget (/qphtml/widgets/people/personcard.js):

... 
var xsl = this.getWidgetLocation() + "/personcard.xsl";        

// default: search for member name (in Contacts db)
this.generateXmlString = this.generateXmlString_Member;
var xmldoc = this.getXmlObject();
var xmlParams = new Array();
xmlParams['WIDGETID_PARAM'] = this.id;
xmlParams["GROUP_ROLE"] this.role;
var content = this.transformContent(xmldoc, xsl, xmlParams);

var bFound = (typeof content == "string" ? content.length > 0 : content.firstChild != null);
if (!bFound) {
        // Name not found (empty response), so force new search for name in directory.
        // We must supply the role in this case!
        this._xmlString = "";
        this.generateXmlString = this.generateXmlString_LDAP;
        xmldoc = this.getXmlObject(true);
        content = this.transformContent(xmldoc, xsl, xmlParams);
        this._xmlString = "";
}
...


There is a small trick here. In quickr, persons may be internal or external. The script first tries to get the internal member, if failed, it gets the external one.

We have two important problems in customization. The first problem is that it does not get a declarative parameter for XSL. So If we want to implement an alternative XSL to change its layout, we have two options. The first is to modify "personcard.xsl" file. You don't want to do this :) Because after each upgrade (even minor ones), you have to monitor these changes. What I did here is funny... I inherited this widget and created a new widget in my theme folder (/qphtml/skins/lugtheme/widgets/personcard.js). I also inherited the only function that calls XSL file:

dojo.provide("quickr.widgets.people.personcard"); 

dojo.provide("lugwidgets.personcard");
dojo.require("quickr.widgets.people._personcard");

dojo.declare("lugwidgets.personcard",  [quickr.widgets.people._personcard],
{
postCreate: function() {
try{

......... (the same stuff)...........

        //Customized here*****************
        var xsl = "/qphtml/skins/lugtheme/widgets/cpersoncard.xsl";        

......... (the same stuff)...........

  }catch(ee){
  }
}
})


I created the new XSL file in the custom widgets folder. In the customized XSL, I added the following part just after "Send Mail" button:

<li> 
<a href="http://lotusnotus.com/lotusnotus_en.nsf/dx/javascript:openProfile('{@ca:email}')">
  <img title="@@[CPEOPLE.MOREINFO]@@" alt="@@[CPEOPLE.MOREINFO]@@" src="http://lotusnotus.com/lotusnotus_en.nsf/dx//qphtml/skins/lugtheme/images/iconInfo16.png" />
                <span class="qkrPaddingLeft2px" dojoType="quickr.widgets.misc.textlocalizer" key="CPEOPLE.MOREINFO"></span>
</a>
</li>


Now we have to configure widget registry to replace the ordinary widget with our new widget. QuickrD has a declaration file named "/qphtml/widgets/resources/widgetRegistryConfig_ext.js". This can be used for widget additions and modifications. The documentation above explains it with great examples. My extensions are like that:

//*** Customized for LUGTheme 

{
    registerWidgets:
    [
                {
                        type: 'registerstrings',
                        id: 'lugtr',
                        path: '/qphtml/skins/lugtheme',
                        fileName: 'quickrstrings.js'
                },

                {
                        type: 'REGISTERMODULEPATH',
                        name: 'lugwidgets',
                        path: '/qphtml/skins/lugtheme/widgets'
        },
       
                {
                        type: 'globalreplace',
                        source: "quickr.widgets.people.personcard",
                        use: "lugwidgets.personcard"
                }
               
        ]
}


We also register our multinational strings at this point. Finally, here is what we get:

Image:Customizing Quickr for Domino 8.5.1 (part-2)

We mentioned about two problems. The second problem is that the xml data containing user information ("{@ca:email}") is coming from the atom engine of Quickr servlet. I could not find a way to change this. Here is the result of atom call:

<content type="application/xml"> 
        <ca:member
                ca:id="(some url)"
                ca:DN="CN=some name,O=some org"
                ca:type="user"
                ca:email="some email"
                ca:display-name="some name"
                ca:first-name="some firstname"
                ca:last-name="some surname"
                ca:phone-number="some phone"
                ca:description="some description"
                ca:role="some role - owner, reader, etc.">
        </ca:member>
</content>


What you can do is (and what I will) to extend the widget to get additional information (in JSON or XML format) from a domino agent and put this into XML object that will be transformed. When I do it, I'll blog. Meanwhile, I'd like to hear you if you have smarter solution.

What we learned...


Customizing Quickr is not a great issue for me anymore. The crucial part of customization is to be immune against version changes. Up to now, we would not lose anything we customized. Remember, extensions will be preserved during upgrades. We should only be careful if lab guys redesign the person card widget entirely, which seems more possible in major upgrades.

In addition, we keep all customized files together in the theme directory. That would help you to move your changes server to server. Only the widget extension file left out.

One last thing. Our business card customization will be valid for entire QuickrD installation. If you want to modify a widget for only specific theme, as told in wiki article, you can use selective modifications in the widget registry (in fact I didn't test it with 'globalreplace'):

{ 
        type: 'some type',
        condition: "some javascript condition",
        source: "some widget",
        use: "some widget"
}






---------------------
http://lotusnotus.com/lotusnotus_en.nsf/dx/customizing-quickr-for-domino-8.5.1-part-2.htm
Feb 23, 2011
36 hits



Recent Blog Posts
102


Deep Dive into Social Business Toolkit with XPages: The Box Integration (1)
Mon, Sep 15th 2014 7:12a   Serdar Basegmez
I have been working on IBM Social Business Toolkit SDK for a long time. Last year we have introduced a couple of cool demos on IBM Connect with my friend Graham Acres. One example was the XPages integration with Basecamp. It has been on my to-do list for months to blog more details on this topic. Finally, here I am... This is going to be a series of blog post. What I'm planning is to blog about a basic example that integrates XPages applications with one or more cloud-based services for [read] Keywords: connections domino ibm xpages application applications database development integration interface java javascript openntf password properties security server twitter widget widgets xml
174


XPages Tip: Realizing the Cost of a Value Binding...
Mon, Sep 8th 2014 2:06a   Serdar Basegmez
A little tip on XPages development... We are binding values everywhere on our pages. Are you optimizing the way you use them? Basic value binding is straight forward. If you use a data source, scope variable or any other property/map/list object from your bean, etc, you are good. However if you 'compute' something to get a value, that computation has a processor and a memory cost. Let's see an example here. Consider the following code, where we want to get some input via a combobo [read] Keywords: dblookup domino xpages application development java javascript openntf
229


Mini Patterns for XPages: Using Beans for Parent - Child Documents
Mon, Sep 1st 2014 6:11a   Serdar Basegmez
After a looong time, I'm blogging XPages again :) Last time, I was blogging about mini patterns (this and that). These are partly reusable design patterns for common cases. Today I'd like to introduce a simple pattern which I have been using in a couple of applications. This is also an example how you get benefits from Managed Beans for specific purposes. Let's start. Data Model for Parent-Child Documents This is a very common case for Domino applications. There is a main docu [read] Keywords: domino notes xpages application applications blogging database development interface java mobile network openntf profile
200


Changing URL in File Download Control...
Wed, Jun 25th 2014 7:11a   Serdar Basegmez
After a very long period of silence, here I am with a tiny little trick about File Download Control in XPages. I saw that there are lots of questions about this component, related to showing attachments instead of downloading them. Stephen Wissel explained how to build a download url with the XPages syntax. The old style notation (which DOES NOT work in XPiNC): http(s)://[yourserver]/[application.nsf]/[viewname|0]/[UNID| ViewKey]/$File/[Attachm [read] Keywords: domino ibm ldd lotus notes xpages application database development javascript server
263


A Quick Question for Administrators...
Tue, Jun 10th 2014 6:14a   Serdar Basegmez
Just a quick question. Especially large domains have lots of users with the same full name. In modern directory systems, we can decrease the possibility of conflict by using hierarchical naming, however that will become an issue eventually, when you need to specify an e-mail address. I have seen that adding a number to the first or last name (John Smith , John 1 Smith, etc.) is highly popular. How do you handle people with the same name in your environment (e.g. Domino, AD, Connections, et [read] Keywords: connections domino lotus
702


RIP Tim Tripcony...
Mon, May 12th 2014 1:55p   Serdar Basegmez
As many friends around, we are shocked and deeply saddened by unexpected loss of our own Tim Tripcony. Tim Tripcony was one of the most talented developers I have met... He inspired all of us by challenging all kinds of limits in our platform and finding really elegant patterns in various problems. He was always polite, helpful and positive with people. RIP, my friend. You'll be missed a lot. [read] Keywords:




350


E-mail will be dead... For some people...
Sat, Feb 22nd 2014 5:14a   Serdar Basegmez
Just an off-topic post, but can't help blogging about that. We are having bad times in our country. Summaries in English can be found here, here and here. Last two incidents are strongly related to very social context of our information and technology domain... Welcome to the remake of Orwell's 1984... The first is the change in the "Internet Bill", legal changes around monitoring and censorship. According to the bill, a government official, head of Turkey's telecommunication autho [read] Keywords: ibm blogging network
591


IBM Connect 2014 slidedeck on the IBM Social Business Toolkit SDK
Thu, Feb 6th 2014 10:14a   Serdar Basegmez
It's been a week after my session with Graham Acres. Sorry about the delay but we needed some time to prepare demo databases... Here is the slidedeck: And demo databases: https://github.com/sbasegmez/ic14demos [read] Keywords: ibm development
259


BP308 - The Journey to Becoming a Social Application Developer
Tue, Jan 21st 2014 5:09a   Serdar Basegmez
This is going to be my third IBM Connect and second session. Excited! Last year, my session co-presenter was my dear friend Bruce Elgort. I feel privileged this year again, because I am sharing the stage with a great speaker, Graham Acres... The session is all about the IBM Social Business Toolkit SDK, which has been first announced at Lotusphere 2011. After three years, we will see much more content about it this year. Since first hearing about the toolkit, I had trouble under [read] Keywords: connections domino ibm lotusphere notes xpages application applications integration java javascript openntf twitter
266


My previous blog post was ’Hot’!
Sat, Dec 7th 2013 2:47a   Serdar Basegmez
Yesterday, I have blogged about the renewal of my IBM Champion title. This morning I woke up with lots of notifications on my mobile. Apparently, my dear friend Bruce liked my blog post very much and he has posted it everywhere (Twitter, Facebook, Linkedin Google Plus). The real surprise was on PlanetLotus waiting for me :) Wow! I must be really famous and people want to know about my happiness. Thank you all! :) OK I'm joking. Many of you know it but for those who are not aware of [read] Keywords: ibm database facebook google linkedin mobile planetlotus twitter




Created and Maintained by Yancy Lent - About - Blog Submission - Suggestions - Change Log - Blog Widget - Advertising - Mobile Edition