357 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
Changing URL in File Download Control...
Wed, Jun 25th 2014 132
A Quick Question for Administrators...
Tue, Jun 10th 2014 195
RIP Tim Tripcony...
Mon, May 12th 2014 629
E-mail will be dead... For some people...
Sat, Feb 22nd 2014 467
IBM Connect 2014 slidedeck on the IBM Social Business Toolkit SDK
Thu, Feb 6th 2014 586
BP308 - The Journey to Becoming a Social Application Developer
Tue, Jan 21st 2014 228
My previous blog post was ’Hot’!
Sat, Dec 7th 2013 248
Top 10
RIP Tim Tripcony...
Mon, May 12th 2014 629
IBM Connect 2014 slidedeck on the IBM Social Business Toolkit SDK
Thu, Feb 6th 2014 586
Mystery Solved: "Error loading USE or USELSX module"
Mon, Nov 21st 2011 506
E-mail will be dead... For some people...
Sat, Feb 22nd 2014 467
A little story about an error with ID Vault...
Wed, Jan 12th 2011 457
Authenticating Notes users for Web apps automatically...
Wed, May 11th 2011 372
Still part of it: IBM Champions
Fri, Dec 6th 2013 278
Domino is Curious: A Potential DAOS Problem...
Wed, Aug 14th 2013 256
My previous blog post was ’Hot’!
Sat, Dec 7th 2013 248
BP308 - The Journey to Becoming a Social Application Developer
Tue, Jan 21st 2014 228


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



Recent Blog Posts
132


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
195


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
629


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:
467


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
586


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
228


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




248


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
278


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
183


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
219


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




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