Subscribe via Feed

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

Lance Spellman, Feb 3, 2010 10:56:56 PM

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.

 

 



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

Lance Spellman, February 4, 2010 2:37 AM

@Jeremy, Peter:

Why not that way? Because I'm an idiot and had totally missed that capability within a custom control. Don't know how I'd missed it, and am thrilled to have it pointed out as there are so many other things that makes possible. Thank you! I may redo this example and update this entry to show before and after.

Thanks!


Peter Presnell, February 4, 2010 2:22 AM

Further to Jeremy's suggestion you could even pass the entire definition of the chart requirements using XML or JSON


Jeremy Hodge, February 4, 2010 12:54 AM

Good points on the use of a scope, in this case, to hold data, but for a custom control, I am curious why you don't create parameters for the custom control to hold the data you want. In the property window for the Custom Control, you can go to the Property Definition tab and define custom properties for the control and their type, and variable name editor type, default values, etc etc. Then the data for each control. can be specified on the control itself using the properties at design time, that can compute to whatever data you wish to pass ot the control at run time.

For example, if you created a string type property with a variable name of "pieData" for instance, you can then, when you place the control into your xPage, specify the value of the pieData through the properties of the placed custom control, or in the XML syntax like this: (Below is a custom control with two custom properties documentUNID and displayID)

<xc:CategoryEditor
documentUNID="VALUEGOESHERE">
<xc:this.displayID><![CDATA[#{VALUE.GOESHERE}]]></xc:this.displayID>
</xc:CategoryEditor>

In the custom control, you can then access that data by referencing the compositeData object .... to get the value of the documentUNID property above, you would simply use

compositeData.documentUNID

or for displayID you would use

compositeData.displayID

This way you are lessening the amount and duration the data takes up memory, and ultimately, performance.