The XPages Blog

Follow The XPages Blog on Twitter

2010-03-10T00:04:49Z

The XPages Blog now has a Twitter account:

Please follow us to get the latest and greatest XPages goodness from the industries leading XPages experts.

Advanced HTML Element Select with Control and Shift Click

2010-03-09T22:48:20Z

In my last post I discussed how to use dojo and CSS classes to create a user-selectable set of HTML elements. The example provided a list-like single-selection interface that allowed the user to only select single elements.

Today, I am going to expand upon that example to create a multiple-select interface allowing the user to control-click or shift-click to select multiple elements.

We are going to start off right where we left off last time, by modifying the focusObject() function we previously definded. The function is going to be a bit more involved as we need to check for 4 mouse states (click, control click, shift click, and control shift click). Let's start the update by redefining the parameters to our function. If you remember, our previous function template was as follows

function focusObject(class,objId) { }

We're going to change this template to include a new parameter "e" which will be the first argument that the event handler in non-IE browsers receives, or for IE browsers, the event object. So, redefined, our function template now looks like this:

function focusObject(class,objId,e) { }

The e parameter holds the two boolean properties ctrlKey and shiftKey which tells us the state of the keys at the time the click ocurred. Quite simply, if they are true, the appropriate key was pressed. So, lets expand our function a litle bit, and create a statement that will check for each of the four conditions we need to check. Also, because we are going to refer to the HTML node the user selected quite frequently, lets go ahead and capture that node to a variable right from the start.

function focusObject(class,objId,e) { // Capture the selected node... var selNode = dojo.byId(objId); // JUST CLICK if ((!e.ctrlKey) && (!e.shiftKey)) { // CONTROL SHIFT CLICK } else if ((e.ctrlKey) && (e.shiftKey)) { // CONTROL CLICK } else if (e.ctrlKey) { // SHIFT CLICK } else if (e.shiftKey) { } }

Ok, let's tackle the obvious first, just plain ol' click, which we defined yesterday. The same code we created then will work now, so lets go ahead and insert that. At the same time, we need to start to not only track which items have been selected (with the CSS 'focused' class), but also which item was the last item the user clicked before the current one. This way we have a starting point, and an ending point for the range of elements the user wants to select when they shift click. To do this, we are going to introduce a new CSS class called 'lastSelected'. On every click we need to clear any item with the lastSelected class, and set the currently clicked item as 'lastSelected'. We want to do this after we have done all our processing so we know during shift-select what the last item was. So, at the end of the function, we are going to add two lines almost identical to the focusObject function from the last post, but in addition to using the passed in class name, we are going to add the new .lastSelected class as well.

function focusObject(class,objId,e) {

   // Capture the selected node...
   var selNode = dojo.byId(objId);

   // JUST CLICK
   if ((!e.ctrlKey) && (!e.shiftKey)) {
      dojo.query(class+'.focused').removeClass('focused');
      dojo.addClass(selNode, 'focused');
   // CONTROL SHIFT CLICK
   } else if ((e.ctrlKey) && (e.shiftKey)) {

   // CONTROL CLICK
   } else if (e.ctrlKey) {

   // SHIFT CLICK
   } else if (e.shiftKey) {

   }

   // Update the last click item to the item the user clicked this time
   dojo.query(class + '.lastSelected').removeClass('lastSelected');
   dojo.addClass(selNode, 'lastSelected')
}

Notice also how I have removed the calls to dojo.byId() and replaced them with selNode, since we have previously acquired it.

Now lets tackle the next easiest click, the control click. On a control-click the user is simply adding, or removing a previously selected item to the list. There is no need to clear the focused items. So we just need to check to see if selNode already has the focused CSS class, and if so remove it, otherwise, we need to add it. Let's plug in that code now.

function focusObject(class,objId,e) {

   // Capture the selected node...
   var selNode = dojo.byId(objId);

   // JUST CLICK
   if ((!e.ctrlKey) && (!e.shiftKey)) {
      dojo.query(class+'.focused').removeClass('focused');
      dojo.addClass(selNode, 'focused');
   // CONTROL SHIFT CLICK
   } else if ((e.ctrlKey) && (e.shiftKey)) {

   // CONTROL CLICK
   } else if (e.ctrlKey) {
      if (dojo.hasClass(selNode, 'focused'))
        dojo.removeClass(selNode, 'focused')
      else
        dojo.addClass(selNode, 'focused');
   // SHIFT CLICK
   } else if (e.shiftKey) {

   }

   // Update the last click item to the item the user clicked this time
   dojo.query(class + '.lastSelected').removeClass('lastSelected');
   dojo.addClass(selNode, 'lastSelected')
}

Ok, now we start to get to the tricky parts. The Shifty clicks. Two expected behaviors are expected here. First, if I Shift-Click, I would expect the only items selected to be the items between the last item I selected and the one I select this time, inclusive, or if Control-Shift-Click, I would expect my selections to be logically AND'ed with my previous selections, using again the last item I clicked, and the item clicked this time. Let's start with the Control-Shift-Click.

To accomplish the selection of items within a list of elements, we'll need to introduce a couple of new functions. Here's a run down of them real quick.

dojo.indexOf() - Basically this takes an array in the first argument, and a single item in the second argument, and returns the index of the array in argument 1 where argument 2 appears. If no match is found, it returns a -1.

HTMLNode.parentNode, HTMLNode.childNodes, HTMLNode.previousSibling, and HTML.nextSibling are all functions related to the relative traversal of HTML elements located in the DOM. parentNode returns an element's parent, childNodes returns an array of an element's immediate children, previousSibling and nextSibling return the previous/next immediate html node that is a sibling to itself. This includes whitespace nodes, text, etc, so we have to do a bit of type checking when using these functions.

I chose to start the shifty clicks with the Control Shift Click because we don't have to worry about what has been selected before. We just need to find, and select then inclusive items between our two elements. To do this, we first find the index of our two bounding nodes within our parent node. We do this with a combination of the parentNode, childNodes and dojo.indexOf functions. Here is the code:

var idx = dojo.indexOf(selNode.parentNode.childNodes, selNode); var lastIdx = dojo.indexOf(selNode.parentNode.childNodes, dojo.query(class+'.lastSelected')[0]);

idx locates the index of the currently selected node in it's parent, and lastIdx locates the index of the last selected item within the currently selected node's parent. We check for the last selected node in the current selected node's parent because this will allow us to have multiple lists on a single page, and would prevent us from selecting from one item in one list to another item in another list. If the last selection is not in the same parent as the current, lastIdx will be -1 and we know we need to reset the selected items, and start a new selection.

Assuming we are in the same list, we compare idx and lastIdx to determine which direction we need to traverse from the currently selected node. If idx > lastIdx, we use nextSibling, and if idx < lastIdx, we use previousSibling. In either case we just traverse from selNode to the last selected nodes, turning on focus for each node along the path that has the passed in class. This is where we need to check the nodeType of each sibling node we retrieve to make sure it is an element that we want to select. You can read about nodeTypes here, but suffice it to say, we are looking for the Element node type, which is type 1. Here is the code to determine if the last two selected nodes are in the same parent, and if so determine the direction to traverse, and then actually performs the selection.

if (lastIdx == -1) { // the last selected was not in the same parent, so we can't shift click, so just reset the focused nodes and select the single node ...
dojo.query(class + '.focused').removeClass('focused');
dojo.addClass(selNode, 'focused');
} else {
if (idx < lastIdx) {
    var el = selNode;
    for ( ; lastIdx >= idx; idx++) {
      if ((el.nodeType == 1) && (dojo.hasClass(el, class.split('.').join(''))))
        dojo.addClass(el, 'focused');
      el = el.nextSibling;
    }
} else if (idx > lastIdx) {
    var el = selNode;
    for ( ; lastIdx <= idx; idx--) {
      if ((el.nodeType == 1) && (dojo.hasClass(el, class.split('.').join(''))))
        dojo.addClass(el, 'focused');
      el = el.previousSibling;
    }
}
}

Now we can worry about the straight shift click. It operates just like control shift click except we need to clear any previously selected items first. Since that is the case, we can simplify our code by removing the seperate check for the control shift click, and integrate the check for a non-control shift click into the same code as above. So, lets start by tweaking our original expanded function template a bit, and add in some code during our shift click code to check for the control key. We'll make a check during the control shift click code we did above, and if they aren't holding down control, we'll clear out all the current selections, re-select the last selected element, and perform the same selection operations as control-shift-click, and wallah, we have shift-click covered too.

function focusObject(class,objId,e) {

// Capture the selected node...
var selNode = dojo.byId(objId);

// JUST CLICK
if ((!e.ctrlKey) && (!e.shiftKey)) {

// JUST CONTROL CLICK
} else if ((e.ctrlKey) && (!e.shiftKey)) {

// SHIFTY CLICKS
} else if (e.shiftKey) {

    if (!e.ctrlKey) {
      // clear all previous selections first, re-add lastSelected, then process on
      dojo.query(class + '.focused').removeClass('focused');
      dojo.query(class + '.lastSelected').addClass('focused');
      dojo.addClass(selection, 'focused');

    }

}

}

Now we can put it all together, and make one last simple adjustment. If the user shift clicks the same element twice, we need to just dump out of our routine since we shouldn't deselect anything, and the last item is already selected. We'll do that right after we get idx and lastIdx, and if they equal each other, we'll just drop out.

So here it is, our final assembled function

function focusObject(class,objId,e) {
var selNode = dojo.byId(objId);
if ((!e.ctrlKey) && (!e.shiftKey)) {
    dojo.query(class + '.focused').removeClass('focused');
    dojo.addClass(selNode, 'focused');
} else if ((e.ctrlKey) && (!e.shiftKey))
    if (dojo.hasClass(selNode, 'focused'))
      dojo.removeClass(selNode, 'focused')
    else
      dojo.addClass(selNode, 'focused');
else if (e.shiftKey) {
    var idx = dojo.indexOf(selNode.parentNode.childNodes, selNode);
    var lastIdx = dojo.indexOf(selNode.parentNode.childNodes, dojo.query(class + '.lastSelected')[0])
    if (idx == lastIdx) {
       return true; // user just shift clicked the same node again, don't do anything
    }

    if (!e.ctrlKey) {
      // clear all previous selections first, re-add lastSelected, then process on
      dojo.query(class + '.focused').removeClass('focused');
      dojo.query(class + '.lastSelected').addClass('focused');
      dojo.addClass(selection, 'focused');
    }

    if (lastIdx == -1) { // the last selected was not in the same parent, so we can't shift click, so just reset the focused nodes and select the single node ...
      dojo.query(class + '.focused').removeClass('focused');
      dojo.addClass(selNode, 'focused');
    } else {
      if (idx < lastIdx) {
        var el = selNode;
        for ( ; lastIdx >= idx; idx++) {
          if ((el.nodeType == 1) && (dojo.hasClass(el, class.split('.').join(''))))
            dojo.addClass(el, 'focused');
          el = el.nextSibling;
        }
      } else if (idx > lastIdx) {
        var el = selNode;
        for ( ; lastIdx <= idx; idx--) {
          if ((el.nodeType == 1) && (dojo.hasClass(el, class.split('.').join(''))))
            dojo.addClass(el, 'focused');
          el = el.previousSibling;
        }
      }
    }
}

dojo.query(class + '.lastSelected').removeClass('lastSelected');
dojo.addClass(selNode, 'lastSelected')
}

Now, we are almost there, there are a few more things we need to take care of. First, as in the last post, we need to call focusObject() when our item gets clicked, but now, we have to get the event object and pass it in as well. So our event handler code from the last post for the element changes from this:

focusObject('.userSelectable', '#{id:REPLACEWITHOBJECTID}');
]]>

to this:

focusObject('.userSelectable', '#{id:REPLACEWITHOBJECTID}', ((navigator.appName=="Netscape") ? arguments[0] : event));
]]>

And one last thing, the default browser behavior when you shift click within the body of the HTML page is to high-light the text of the page, of which the end result of all our work would rather hacky, like this:

To prevent this, we'll use some javascript to disable the selection of text on the page. This disables selection of text on the entire document, which for my current use case, is fine, but I am fairly certain this can be adapted to specific elements as well, it is just untested at the moment.

To prevent the selection of text, at the beginning of your client-side javascript library, add the following code:

function disableselect(e){ return false; }
function reEnable(){ return true; }

document.onselectstart=new Function ("return false");

if (window.sidebar){
document.onmousedown=disableselect;
document.onclick=reEnable;
}

And you'll get a nice, clean shift-select:

Well, thats the book (quite literally it appears) on single and multple html element selection. In an upcoming post, I'll show you how to implement this as a practical application add-in along with identifying and working with the selected elements.

Happy Coding!

QuickTip: HTML Element Selection Using Dojo

2010-03-07T14:29:13Z

You can quickly create a user selectable list of objects using CSS and a couple of quick dojo functions. First create a series of elements that you want the user to be able to select, and assign them all the same CSS class to describe their appearance. For example we'll create three 's.

Example One
Example Two
Example Three

Now, lets define the userSelectable CSS class

.userSelectable {
   margin:4px;
   height:20px;
   border:1px solid #DDD;
   background-color:#F3F3F3;
   width:auto;
   padding-left:24px;
   background-image:url(AppIcon_mini.gif);
   background-position:2px 2px;
   background-repeat:no-repeat;
   line-height:20px;
   cursor:pointer;
   cursor:hand;
}

That should create an list that looks like this:

Now, let's add two more definitions to our CSS. the first adds the :hover psuedo class, describing how the blocks should appear when the mouse is hovering over each item. We'll just override the background and border colors:

.userSelectable:hover {
background-color:#EFEFEF;
border-color:#CCC;
}

The final CSS markup we'll add is to define an additional class called focused that should alter the display of the item when the user has selected the item. To do this, we are going to specify ".userSelectable.focused" as the CSS selector. The lack of white space between the two class names means that both classes must be applied to the element for this markup to be applied.

.userSelectable.focused {
background-color:#CCE6EE;
border-color:#92CADA;
}

Now let's add a bit of javascript in the mix. You can place this in a client-side javascript library and include it in your XPage.

function focusObject(class,objId) {
dojo.query(class+'.focused').removeClass('focused');
dojo.addClass(dojo.byId(objId), 'focused');
}

The first line of the function finds any currently focused object and removes the focus from it, and the second line applies the focus to the object with the ID passed in as objId.

Now, let's modify our divs from above to include a bit of code to handle the click. On each div, place the following event handler code:

focusObject('.userSelectable', '#{id:REPLACEWITHOBJECTID}');
]]>

Make sure to replace the "REPLACEWITHOBJECTID" in the code above with the server side ID of the object. In our case, it would be div1, div2, or div3

Now, you have a user selectable list of elements. To retreive which element is selected at anytime, you can use

dojo.query('.userSelectable.focused')[0]

to get the node.

Here is what the code produces, the first div is in its normal state, the second is currently being hovered over (very subtle effect), and the third has been selected.

SSJS @Adjust on Javascript Dates - Be Backwarned!

2010-03-05T21:46:08Z

The following code will generate results that you may not expect:

var myDate = new Date(2010,2,15); //this is MARCH 15th, months for JSDate is zero based
myDate = @Adjust(myDate,0,-1,0,0,0,0);

You might expect myDate to now be 2/15/2010 ... its what the classic @Adjust @Formula would output. But there is a little more than meets the eye going on here.

new Date(2010,2,15) creates a new Date in the local time zone... In SSJS @Adjust() by default treats the date as a UTC timezone, so the results you will actually get is:

2/14/2010

Why you ask? Because we didnt specify a time in the date object, it's set to 12 Midnight, and going from March back to February crosses the line for Daylight savings, and the adjusted time changes from 12:00:00 midnight to 11:00:00 PM the previous day as you cross back.

The key is to specify the "[InLocalTime]" keyword to the @Adjust function, so the correct call would be:

@Adjust(myDate,0,-1,0,0,0,0,"[InLocalTime]")

Thanks to Dave Connelly and the IBM Team for chasing this one down!

Embedding Contextual Data for Client-Side Logic in XPages

2010-02-21T22:07:11Z

One of the difficulties I have faced when writing user-friendly UI's using XPages is the limited amount of "data" I can embed in a generated XPage for consumption by client side scripts. Quite often I find myself wanting to do an dojo.xhrPost() to a domino agent to update the state of a document in the background, or programmatically post a partial refresh back to the server with programmatically contrived data, based on the user's actions, or the state of a dataset client-side. Quite often that action, or the target of that action is dependant upon one or more pieces of data that is not normally located in the DOM.

The typical way to embed this data in the document is through the use of the hidden input ( in XPages terms.) When dealing with small amounts of data, this is fine, but what about more complex data sets, or large data sets. For example a list generated by an repeat control () can generate a large amount of hidden inputs, and you are still faced with the dilemma of how to programmatically determine which hidden input belongs to which UI element.

The solution is rather simple. We can embed our own contextual data tags directly into the HTML! Since browsers grew up and lived through the browser wars, when standards were something to be scoffed at, and the way to win user base was to have more cool tags than your competitor ( anyone??) browsers have been taught to IGNORE tags they don't understand. We can use this to our advantage to embded data contextually within our HTML, then programmatically retrieve it.

To do this, you go to the code of your XPage, and just type in the new contextual data tag. For example, lets say we are dealing with a repeat control, and we want to get the UNID of each document that is rendered by the repeat. To do this we can code the following:

[ ... other Xpages controls go here ... ]

Now, when a user interacts with your "myPanel" for example, in a client-side onClick() event, you can easily retrieve the UNID for this document with the following code:

var unid = dojo.attr(dojo.query('UNID', this.node)[0], 'value');

This code has two important dojo functions. First the query function, which allows you to use almost all CSS3 selectors to return a nodelist (an array of HTML nodes). The first argument to this function is the CSS selector used to located your nodes. In this case, we are asking for all UNID tags. This is a VERY powerful function. I would recommend that you study and learn its power. The second argument is the "root node" at which you want to start your search. If you omit this argument, the entire DOM is searched. If you include a Node, only descendant nodes of that Node will be searched. (Again this is very powerful. For example, XPages developers can use this to locate nodes based on the element's programmed ID, instead of the full client side-id by using the CSS3 selector [id$="myPanel"])

The second function is dojo.attr which returns the value of the attribute specified in argument 2, from the node specified in argument 1.

While this example is over-simplified, you can imagine the powerful things you could put this to use in. For example, off the top of my head, i can think of using contextual data tags to:

pass information that may be required for display in tooltips, popups, or other display-only interfaces, without having to pass all the markup associated with it (especially when it can be generated client-side, then discarded
passing identifying data, such as UNIDs, to use in ajax calls back to the server to simulate RESTful API/CRUD calls.
And, since you can nest the tags, you can give the data relational meaning (think embedded XML)

Happy Coding!

XPages101 Online offers affordable XPages training

2010-02-15T08:12:06Z

On Friday I announced over on my blog about XPages101 Online. It's an online version of my one day introduction to XPages course with full videos and supporting content to guide you through building an XPages application from start to finish.

But to add extra value, and help you as you progress in your XPages development, I'll be uploading a new video based lesson every week which will walk you through some aspect of XPages development, whether it be using Java classes in your Server Side Javascript, making the most of the Dojo framework which ships with Domino or extending the standard controls which you can use in your XPages and Custom Controls.

Until 26th February, there is a special offer running which offers a 33% discount on the subscription fee if you enter the coupon code "earlybird" at checkout.

Complete Turnkey NSF to Transform DXL into XPage Syntax

2010-02-11T14:33:14Z

I posted an entry earlier this week on an update to the stylesheet I created and demonstrated at Lotusphere on how to transform Domino Form, Sub-Form and Shared Fields DXL into XPage syntax that could be copied and pasted directly into the XPages source tab in the Domino Designer client.

I had updated it to include the processing of Sub-Forms and Shared Fields. The problem was that it placed the fields from the sub-forms and shared fields at the bottom of the XPage instead of in-line where the sub-forms and shared fields appeared in the original Domino Form design. Well I'm happy to announce two things.

I have updated the Stylesheet so that it processes Sub-Forms and Shared Fields In-Line.
I created a compete turnkey Notes based application that allows developers to complete the transformations and save the results.

In updating the style sheet I was not pleased with the procedure for having to select the design elements from the dialog box in the designer client. You couldn't tell from one selection to the next what you had selected and the results were not saved, but displayed in the browser.

In the turnkey Notes application I have made available on my download site today I have created a Form that allows developers to choose an application from their local system or a server, select the Forms, Sub-Forms and Shared Fields to be transformed and simply click an action in the action bar to perform the transformation and save the results in a document in the application.

Everything is included in the application. Nothing else needs to be downloaded.

The individual stylesheet is available for download as well if you don't want to download the complete application.

Here is a summary of the new steps.

You will need an 8.5 or 8.5.1 system.

Download the application from my website to your local data directory and sign it with your ID

Open the application and click on the "Create New Exporter" action in the action bar.

This will load the following form where you can select the design elements to be included in the transformation. The ConvertForm stylesheet is currently the only one included but this design allows for any number of stylesheets to be added and used. Once all the elements are selected click on the "Run DXL Transformation" action in the action bar.

This will transfrom the selected elements and save them in a docment in the "Transformed XPage Results View"

This document can be opened and the XPage syntax copied to the clipboard using the button in the form.

Then open an XPage in the Designer client and replace the existing XPage code on the source tab with the code from the clipboard.

And thats it !!

I have implemented this solution so if there are additional stylesheets I (or you) create in the future they can simply be added as an additional stylesheet to choose from in the stylesheets view.

As always I appreciate any feedback ya'll might have on additions and improvements.

Again the complete turnkey application can be downloaded from here.

Thanks !!!

UPDATED: Transforming Domino Forms into XPages via XSLT

2010-02-08T05:02:51Z

First I want to thank everyone who came to the XML and Web Services Jumpstart as well as the speedgeeking at Lotusphere 10. I got a lot of great feedback. Thanks !!!

One such feedback was about my process of transforming Domino Form Designs into XPages via XSLT. When I developed the tool I took what I believed to be a logical approach and added all of the different field types to a Domino Form Design and then processed it with the XSLT stylesheet I created.

Everything came across, all of the fields were processed I was very proud. Then someone at lotusphere asked me "Paul this process works great when the fields are defined on the form itself, but most of my forms have sub-forms and shared fields that don't seem to be transformed via your process. How come?"

Then I had a real "well duh !!!" moment. A Domino form that contains a sub-form or shared field does not include the field definitions for those elements, simply a reference to the sub-form or shared field.

Suddenly I was not so proud as I don't think I have ever developed a Domino form that did not contain a sub-form or shared field.

So I have set out rectify this issue by adding the processing of sub-forms and shared fields to the transformation process.

If you are not familiar with the process see this article for detailed instructions.

So what is different about the new process is that when selecting design elements to be transformed, you can choose multiple elements. Whatever you select will be included in the DXL to be transformed.

In the Domino Designer client open the application that contains the elements to be transformed.

Choose Tools | DXL Utilities | Transformer...

In the dialog box that opens select the primary form to be transformed

Next select any sub-forms to be included in the transformation

Last select any shared fields to be included in the transformation.

Lastly choose the stylesheet from the list of available stylesheets to perform the transformation and click the OK button.

The fields from the selected sub-forms and selected shared fields will be at the bottom of the transformed XPage.

I'm working on a way to get them "in-line" but wanted to get this solution out there as soon as possible.

The new XSLT stylesheet is called "DominoDBDXLToXPageWithSubForm.xsl" and is available from my web sitein the downloads link.

Once again thanks for all of the feedback and I will continue to try and improve this process.

UPDATE: Self Awareness of Custom Controls in XPages: "Am I alone out there"

2010-02-04T22:56:44Z

UPDATE: Jeremy Hodge points out the built-in method XPages has for allowing you to do this in the comment below. Based on that, I've updated the demo and re-recorded it. So, if you've watched the first one, watch the new one. The premise, or needs, are the same as what's described below. The solution is better.

The better approach:

---

What the heck does that mean??? Well, here's a scenario. I've taken the time to build a PieChart custom control. I'd like to be able to drop that PieChart on an XPage multiple times for multiple different charts. But how can I make that happen without hard-coding the configuration into the control itself? I would need to be able to PASS that data into the PieChart control from the containing page.

So if I use something like viewScope.put('PieChartConfig', config) into the XPage, that solves getting data TO the control, but only for 1 instance of the control. For example, the control would receive that data with viewScope.get('PieChartConfig', config). But now I can only have 1 control on the page because each instance of the control would be getting the same config.

Somehow each INSTANCE of the control has to be able to get its own data configuration. Here's how.

When we put each instance of the PieChart custom control on the XPage, we're allowed to name that instance, just like we name any other control. So, PieChart1, PieChart2, etc...

Now from the XPage, we can modify our earlier code and do something like this:

viewScope.put('PieChartConfig', {'PieChart1':config1, 'PieChart2':config2});

Inside the PieChart control, we can get the config that's intended for that instance by having a control on the page like a computed field with the name of 'sId' which has the value of:

var idArray = getClientId('sId').split(':');
idArray[idArray.length-2]

This will be the name assigned to the custom control instance inside the containing XPage.

To get the config that's specific to this instance of the control, we'd use:

var ConfigAll = viewScope.get('PieChartConfig');
var ConfigMe = d[getComponent('sId').value]

I've recorded a quick (2 min) video example of this, and an .nsf with that code. Hope this helps.

XPiNC Hello World - XPages in the Sidebar on a Composite App.

2010-02-03T21:07:19Z

Here is a quick post on how you can add a XPage to the Sidebar in the Notes Client. Currently this is the only way you can put a XPage in the Sidebar, the other way may be in the future.

So lets start. Take any Composite Application and from the main menu select Actions - Edit Application.

This will open the application in the Composite App Editor. And here we're going to add a XPage Component that has been configured for wiring events (for more on this try this Wiki post). On the Component Palette select to add a new NSF Component.

Name and select the XPage Component from any application, and select OK.

With the component now created, drag and drop this component from the Palette to the Sidebar.

You can save your changes as they are and your XPage will now appear in the Sidebar, but we're going a step further and wire up the publish and receive events.

With the desired page of the Composite App open, right mouse click on the XPage component in the Sidebar and choose the option Edit Wiring.

Using the wiring page...

...wire up the publish and receive events.

Save and close the application in the Composite App Editor.

Launching the Composite App the XPage component will now display in the side bar.

And the wiring will work from here too.