Unable to set elements in an Application Layout control (XPages) - 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

Related

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.

Xpage: programmatically set custom control from session variable?

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.

How do I change the default XML generated for a blank XPage?

The default XML generated when a new XPage is created looks like thi
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
</xp:view>
but when you add new components from the extension library and other palette items the view xsmlns namespace changes. It also reformats code and screws up any JavaScript and or CSS on the page.
How can I change the default XML created to look more like this and therefore cover my bases when I add new components?
<?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">
</xp:view>
One possible solution I could come up with would be to create a template in your Eclipse Designer (Preferences > XML > XML Files > Editor > Templates).
Just to test this I created this template:
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom"
Saved it under the name "myAddNamespace" with context "XML Attribute" and "Automatically insert" = ENABLED.
If then I create a new xpage, I can go into source view, place my cursor at the end of the default namespace before the closing '>', then type "my", hit - and then select my template to be inserted at the cursor position:
I'm aware that this is NOT what you really asked for, but it's at least something
Tested this on 9.0.1 and it automatically formats the way you mention. For example without touching anything I get this.
<?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:dialog id="dialog1"></xe:dialog>
<xc:test></xc:test>
</xp:view>
You can force a reformat pressing CTRL-SHIFT-F (or right click, source->format). You can modify how the formatting works by selecting "File-Preferences" menu option, then select "XML->XML Files->Editor".
I think what you want is "Split Multiple Attributes each on a new line".

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