Xpage: programmatically set custom control from session variable? - xpages

I am starting to get the dynamic nature of Xpages and am trying to make my coding more streamlined.
I am using the switchFacet cc in my xpages to control which custom control to load, depending on the value in a sessionScope variable.
To keep things simple I made the name of the cc match the sessionScope variable. So I ended up with the following code.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlnsstrong text:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:ccAppLayout>
<xp:this.facets>
<xc:ccAppNav xp:key="LeftColumn" />
<xe:switchFacet id="switchFacet1" xp:key="facet_1"
selectedFacet="#{javascript:return sessionScope.pageSelected}">
<xp:this.facets>
<xc:cpApp2Title1Page1 xp:key="cpApp2Title1Page1" />
<xc:cpApp2Title2Page1 xp:key="cpApp2Title2Page1" />
<xc:cpApp2Title2Page2 xp:key="cpApp2Title2Page2" />
<xc:cpApp2Title3Page1 xp:key="cpApp2Title3Page1" />
</xp:this.facets>
</xe:switchFacet>
</xp:this.facets>
</xc:ccAppLayout>
</xp:view>
Not to bad, but it seems to me things would be even cleaner if I could just directly set the cc to be the sessionScope variable. That way the code for this Xpage wouldn't have to change between different Xpages. I could get by with just one Xpage.
Is there a way to do this, and is it even a good idea?
Bryan
===============================================
What I am looking for is something like this:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlnsstrong text:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:ccAppLayout>
<xp:this.facets>
<xc:ccAppNav xp:key="LeftColumn" />
<xc:#{javascript:return sessionScope.pageSelected} xp:key="facet_1"></xc:#{javascript:return sessionScope.pageSelected}>
</xp:this.facets>
</xc:ccAppLayout>
</xp:view>
==============================================================
Knut,
That is a good suggestion, but as you indicated it only loads on page creation.
Is there a different way to do what I want, or is it just easier to leave the code as I originally had it?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:ccAppLayout>
<xp:this.facets>
<xc:ccAppNav xp:key="LeftColumn" />
<xp:include id="include1" xp:key="facet_1">
<xp:this.pageName><![CDATA[${javascript:sessionScope.pageSelected + ".xsp"}]]></xp:this.pageName>
</xp:include></xp:this.facets>
</xc:ccAppLayout>
</xp:view>

You can use <xp:include... and "calculate" custom control's name:
<xp:include pageName="${sessionScope.yourCC}" />
The sessionScope variable has to contain the name of your custom control like "cpApp2Title1Page1.xsp". Don't forget ".xsp" at the end.
Be aware that pageName gets calculated only once at first page load.
I know from your previous question that you'd like to keep the possible pages flexible in a sessionScope variable. Assuming you have a sessionScope variable pages which contains all custom control names as an array then you'd use a repeat and put the xp:include in it:
<xp:repeat
id="repeat1"
rows="30"
var="key"
repeatControls="true"
value="${sessionScope.pages}">
<xp:panel
rendered="#{javascript:sessionScope.pageSelected == key}">
<xp:include
pageName="${javascript:key + '.xsp'}" />
</xp:panel>
</xp:repeat>
It will include all pages defined in sessionScope variable pages but render only the one page with the name contained in sessionScope variable pageSelected.
You'd include the code above instead your switchFacet.

Could you create one custom control to rule them all? A CC that takes the name of the desired CC as a custom property, then renders only the one you want. So shove the switchFacet into a new custom control, e.g. ccAll.xsp:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:switchFacet id="switchFacet1" selectedFacet="#{javascript:return compositeData.ccName}">
<xp:this.facets>
<xc:cc1 xp:key="cc1" />
<xc:cc2 xp:key="cc2" />
<xc:cc3 xp:key="cc3" />
</xp:this.facets>
</xe:switchFacet>
</xp:view>
Add a custom property of ccName to the custom control using the "property definition" tab in the CC's properties.
Then add that to your XPage and pass in the sessionScope variable.
<xc:ccAll ccName="#{javascript:return sessionScope.pageSelected}"></xc:ccAll>

A while ago I have created a component to switch custom controls on-the-fly. The code is available at github:
https://github.com/hasselbach/domino-ccinjector
The component can inject custom components whenever you want: during a partial refresh or depending on a variable.

Related

How to define empty DataSource depending on param in URL in Xpage?

Design pattern in my Xpages application looks like below. When I in list view, I want to call dominoDocument1 for print and expect return null, because dominoDocument do not have key(documentId in url), but return UNID.I want this behavior for global custom control what can delete how in view mode and how in form mode. In form_toolbar component I what do something with dominoDocument and that`s why my dominoDocument define above another components.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.data>
<xp:dominoDocument var="dominoDocument1" formName="sample"
concurrencyMode="force" action="openDocument">
<xp:this.databaseName><![CDATA[#{javascript:var object1 = new SamplesDB();
object1.getDBPath();}]]></xp:this.databaseName>
</xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/dbClass.jss" clientSide="false"></xp:script>
</xp:this.resources>
<xc:resources></xc:resources>
<xc:global_left_sidebar></xc:global_left_sidebar>
<xc:layout_content>
<xp:this.facets>
<xc:form_toolbar xp:key="sample_form"></xc:form_toolbar>
<xc:view_toolbar xp:key="sample_view"></xc:view_toolbar>
<xc:form_toolbar xp:key="sample_to_researches_table"></xc:form_toolbar>
</xp:this.facets>
</xc:layout_content>
<div class="container-fluid">
<div class="row">
<xc:layout_content>
<xp:this.facets>
<xc:sample_form xp:key="sample_form"></xc:sample_form>
<xc:sample_view xp:key="sample_view"></xc:sample_view>
<xc:cc_sample_to_researches_table
xp:key="sample_to_researches_table">
</xc:cc_sample_to_researches_table>
</xp:this.facets>
</xc:layout_content>
</div>
</div>
</xp:view>
w>
First, create the XPages application as a stand alone NSF for only one purpose, a web UI, and leave all the legacy Notes and new NSF data as data repositories for the UI.
-XPages UI NSF-
I think its best to create a 'Managed Bean' in faces-config, such as App.java and name it 'app'. Then create a DominoService.java that gets and sets data to the database NSF.
Design Java model objects, plain old Java objects that are in between the NSF and XPages UI. Reuse in other XPages projects.
On start, the server instantiates the Java objects in faces-config.
You also can can add Action Listeners to events that will do some work like get all documents from a view and return a ArrayList and that 'persons' is what is the in the 'value' property of a <xp:repeat /> or <xp:table /> component.
You will will want your XPages UI components to bind to Plain Java objects and lists for data.
The benefit you can always switch out the backend, for example, instead of writing and reading from a Key/Value pair NSF data store you can create a NoSQLHelper.java or SQLHelper.java and implement the same methods from the DominoService.java and the UI does not change.

how to generate the name of a custom control in it's design definition property

I would like to generate the name of the custom control in it's design definition property. how should i do that?
i tried:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel>
<%=this.pageName %>
</xp:panel>
</xp:view>
because this.getPageName() gives you the name of custom control name on custom control's main level.
but that does not work there.
After few tests it seems you can read only custom properties.
Because you write design definition to some specific custom control, you can use:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel>
My control name
</xp:panel>
</xp:view>
I am aware of harder maintainability with copypasta coding style.

How can I add a 'name' field in a custom control?

In forms, there is a 'name' field which upon clicking opens address book names through which I can select the list of users. I want to do the same thing through custom control but not getting how to achieve it as there is no option of 'name' field in Custom controls.
Use the Name Picker <xe:namePicker ...> from Extension Library with data provider "dominoNABNamePicker". It is part of Notes 9.
This is a simple example how to use it:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:inputText
id="inputText1"
value="#{sessionScope.name}">
</xp:inputText>
<xe:namePicker
id="namePicker1"
for="inputText1">
<xe:this.dataProvider>
<xe:dominoNABNamePicker></xe:dominoNABNamePicker>
</xe:this.dataProvider>
</xe:namePicker>
</xp:view>
You can find more examples including multiselection or typeahead in XPages Extension Library Demo database in Domino_Pickers.xsp. You can find the demo database in download package on OpenNTF.

Unable to set elements in an Application Layout control (XPages)

Ok, I have two custom controls:
MainLayout: Contains an Application Layout control (from the Domino extension library)
Section1: Contains a section with a header and a few items
Now I create a new XPage, and drag the MainLayout control on it.
Now I want to drag Section1 to the page, and connect it to LeftColumn area of the MainLayout... which seems like something trivial, but I can't get it to work for some reason.
When I drag the section1 control to the leftColumn area, the component is always getting inserted at the top of the page. The little pencil-icon next to "LeftColumn" seems decoration-only to me, because no matter if you left-click or right-click on it, nothing happens...
How is this supposed to work?
Update:
This how my xpage looks like after adding the MainLayout control:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/custom.css"></xp:styleSheet>
</xp:this.resources>
<xc:MainLayout></xc:MainLayout>
</xp:view>
XML of the MainLayout custom component:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xe:applicationLayout id="applicationLayout1">
<xe:this.configuration>
<xe:oneuiApplication titleBarName="Test"
placeBarName="Server1" legalText="YadaYada">
<xe:this.footerLinks>
<xe:userTreeNode label="User 1"></xe:userTreeNode>
</xe:this.footerLinks>
<xe:this.bannerUtilityLinks>
<xe:loginTreeNode label="Login 1"></xe:loginTreeNode>
</xe:this.bannerUtilityLinks>
<xe:this.placeBarActions>
<xe:basicContainerNode label="Select server">
<xe:this.children>
<xe:basicLeafNode label="Server1"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.placeBarActions>
</xe:oneuiApplication>
</xe:this.configuration>
</xe:applicationLayout>
</xp:view>
I also have a custom where i use the application layout.
in my custom control I have above the configuration tag the following code
And in my XPage which use my custom layout I referer to my LeftColumn editable area by the following code

Using xe:applicationLayout any way to do a partial update of of main content area and LeftColumn facet?

Short of placing my xe:applicationLayout inside a panel called panelAll or doing a Full Update, is there any way to do a partial update for my panelMainContent panel and my LeftColumn facet?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:DL2_AppLayout>
<xp:panel id="panelMainContent">
<xc:xcCustByNameView></xc:xcCustByNameView>
</xp:panel>
<xp:this.facets>
<xp:panel xp:key="LeftColumn" id="panelLeftColumn">
<xc:DL2_LeftColumnNav></xc:DL2_LeftColumnNav>
</xp:panel>
</xp:this.facets>
</xc:DL2_AppLayout>
</xp:view>
You can refresh the second component in the onComplete of the event that refreshes the first component, as outlined here.

Resources