354 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
E-mail will be dead... For some people...
Sat, Feb 22nd 2014 279
IBM Connect 2014 slidedeck on the IBM Social Business Toolkit SDK
Thu, Feb 6th 2014 197
BP308 - The Journey to Becoming a Social Application Developer
Tue, Jan 21st 2014 171
My previous blog post was ’Hot’!
Sat, Dec 7th 2013 125
Still part of it: IBM Champions
Fri, Dec 6th 2013 158
Change is good...
Mon, Nov 18th 2013 95
Thank you Mr. Bruce Elgort...
Wed, Oct 2nd 2013 90
Top 10
E-mail will be dead... For some people...
Sat, Feb 22nd 2014 279
Mystery Solved: "Error loading USE or USELSX module"
Mon, Nov 21st 2011 274
A little story about an error with ID Vault...
Wed, Jan 12th 2011 242
Authenticating Notes users for Web apps automatically...
Wed, May 11th 2011 210
IBM Connect 2014 slidedeck on the IBM Social Business Toolkit SDK
Thu, Feb 6th 2014 197
BP308 - The Journey to Becoming a Social Application Developer
Tue, Jan 21st 2014 171
Still part of it: IBM Champions
Fri, Dec 6th 2013 158
Domino is Curious: A Potential DAOS Problem...
Wed, Aug 14th 2013 134
XPages Tip: A simple CC for prompting SSJS messages to UI...
Mon, May 2nd 2011 126
My previous blog post was ’Hot’!
Sat, Dec 7th 2013 125


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
30 hits



Recent Blog Posts
279


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
197


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
171


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
125


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
158


Still part of it: IBM Champions
Fri, Dec 6th 2013 6:11a   Serdar Basegmez
Yesterday, Oliver Heinz and Joyce Davis announced IBM Champions of 2014. I have been recognized as IBM Champion for the third time but it's still exciting like the first time :) Congratulations to everyone, especially new champions. 2014 IBM Champions So proud to be listed here, with these fantastic people... But remember, there are many great people outside of this list. They might not have the title for this time but they are helping others and improving the value of the te [read] Keywords: connections foundations ibm community
95


Change is good...
Mon, Nov 18th 2013 5:22a   Serdar Basegmez
Yes! Change is good... For a couple of weeks, I've been working on Bootstrap and as I learn it, my blog became a great playground for me! It's still using Domino Blog template at the back-end but skin is completely renewed. I have not optimized for performance yet but I can tell you, our blog template is so powerful that I have not changed anything in the application design! Please share your thoughts and tell me if you see any problems! BTW, I can share my templates in case you [read] Keywords: domino application




90


Thank you Mr. Bruce Elgort...
Wed, Oct 2nd 2013 10:12a   Serdar Basegmez
Before writing this post I tried to remember when I have met Bruce for the first time. It was just 2.5 years ago when I received a twitter DM from him. I was at an airport in Germany waiting the boarding time. I remember had a short discussion over Skype. 2.5 years? Really? I feel like I know Bruce for decades. Bruce Elgort is one of the founders of OpenNTF, which is a very important initiative which bands passionate developers together, improves communication and collaboration within [read] Keywords: collaboration ibm lotus lotusphere notes blogger community openntf podcast skype taking notes twitter
114


ICONUK 2013 Slidedeck, Demo Application and a Surprize...
Wed, Sep 11th 2013 6:22a   Serdar Basegmez
ICONUK 2013 is over. I had so much fun again and hope it wasn't the last one... Me and Frank van der Linden had a joint session this year: "An XPager's Guide to Process Server-Side Jobs on IBM® Domino®" The first half, we mostly talked about DOTS. The second part was about asynchronous task development for XPages. Slides are below the post: Demo Database: You can find the demo database I have used to present the idea of asynchronous processing is on Github now: https://git [read] Keywords: domino ibm xpages application database development server
115


ICON UK: Speaking for Fun, Speaking for XPages...
Fri, Aug 30th 2013 1:57a   Serdar Basegmez
I'm flying to London and will be attending a great user group conference. As a first-time speaker, I'll have two sessions this year. "Occupy Gezi Movement: An Apolitical Generation Rising with Art, Humor and Twitter" May, 2013: Nobody expected such a mess after the police intervention on a small group of protesters in Istanbul. Almost 4.5 million people participated in protests during the first month of Occupy Gezi movement and changed everything in Turkey. Meanwhile, old-school act [read] Keywords: domino ibm notes xpages application applications community eclipse java server twitter
134


Domino is Curious: A Potential DAOS Problem...
Wed, Aug 14th 2013 9:13a   Serdar Basegmez
After 5 months, here is a new blog post :) Yesterday, I was upgrading a customer server and I have noticed that DAOS folder was larger than it should be. Since my customer is heavily using attachments in messages, a large DAOS folder is expected but 150 GB attachments for less than 100 users? Something's wrong here. Of course, DAOS wasn't in SYNCHRONIZED state which prevents PRUNE operations. However, it's more important to find out why DAOS loosing synchronization? At this point [read] Keywords: domino ibm ldd lotus ntf archiving archive bleedyellow bleedyellow.com database server wiki




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