How to use xe:popupMenu - xpages

I'd like to have a right-click popup menu in an XPage. I therefore created a popup menu in XPages using the Extension Library. The menu doesn't display, whatever I try. Do I have to bind it to a button or so? If so, how??

Yes, it needs to be bound to a link or a button. The button or link needs to use Client-Side JavaScript to call the xe:popupMenu. There is an example in the Extension Library demo database, or more information in the XPages Extension Library book, chapter 8, p252.

<xp:eventHandler event="contextmenu" submit="false">
<xp:this.script><![CDATA[XSP.openMenu(thisEvent,#{javascript:getComponent('pop1').getMenuCtor()})
]]></xp:this.script>
</xp:eventHandler>

Related

SSJS Codes behind the button runs after page is refreshed

I have SSJS code behind a button. When i click the button that code creates a document in another database.
When i click the button It Works fine but I look at the Domino Admin COnsole I realize that The code behind to button Works twice.. I think When the page is refreshed It Works again? How can i prevent it?
What is it thet I miss?
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:print("Before createNewDoc()");
createNewDoc();
print("After createNewDoc()");
}]]></xp:this.action>
</xp:eventHandler></xp:button>
Add print statements to the beforePageLoad, afterPageLoad etc events to confirm where it is running. Also, it's worth using XPages OpenLog Logger or some other logging framework that can output a full stack trace. That might identify whether the code is running twice in the refresh, and where from.
There is no reason the code should be running twice from the button. I'm assuming this is an SSJS function in a Script Library, maybe something else is triggering that.

Working dialog code from one application does not work in another application

I've working code to open dialog box using SSJS code to show error or warning to user when user click submit button. This button appears at the top of the xpage.
Applied the modified version of the above code in another application but instead of top of xpage, put button in section. If comboBox1 has initial value it is suppose to popup the dialog box. But it is not working. The client side validation is off in working as well as non working application. Why this code is not working? Where to check?
Here is code for a section button:
<xp:button value="Must click to Assign Quote Number" id="button6" style="width:207.0px">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:var comboBox1:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox1");
var a=comboBox1.getValue();
if ( a=="Assign the PE Staff"){
var d=getComponent('dialog2');
d.show();
}
}]]></xp:this.script>
</xp:executeScript>
</xp:this.action></xp:eventHandler>
</xp:button>
Things to check off the top of my head:
Check that Ext Lib is loaded properly in new app (check application properties)
Check that namespace for ExtLib is on the new page (drag any Ext Lib control on the page, and this will be added for you)
Check that resources from the first page are on the new one (script libraries, etc)
Try print("var a=" + a) to see if comboBox1 is giving you a value (check your server log.nsf)
If you give more info on what is happening when it doesn't work then we might be able to suggest more things to check.

Partial update dynamic view on CustomControl | XPages

I have an application with one XPage. It has these custom controls(cc):
ccHeader
ccMenu
ccContent
ccFooter
Custom control ccContent has a combobox, with list of Views in sessionScope and dynamic view panel from extension library for XPages. This combobox has an event OnChange defined to partial update dynamic view.
What do I need?: Combobox with view list will be deleted and after that I need to assign this partial update function to five links, which are located on ccMenu custom control. So, i click on link in ccMenu, it returns some view name, assigns it to dynamic view and makes partial update.
How to get id of this dynamic view in ccMenu to call partial update?
Assuming what you mean is that you want to have a clean way to let the buttons know which area to partial-refresh when changed:
You could add a property to the ccMenu control along the lines of "viewRefreshId" and pass in the ID of the area to refresh, so you'd end up with a button like this:
<xp:button id="viewChanger1" value="View 1">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="${compositeData.viewRefreshId}">
<xp:this.action><![CDATA[#{javascript: viewScope.selectedView = 'View 1' }]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Now, there's a question of whether you should try to pass in an ID from something contained within another CC from the main XPage, and I try to avoid that - it would PROBABLY work, but it's a bit messy. I tend to architect similar things so that the part to be refreshed is directly on the XPage (which is to say, I don't use "content" custom controls), so I end up with something like this:
<xc:viewSelector viewRefreshId="dynamicViewContainer"/>
<xp:div id="dynamicViewContainer">
<xe:dynamicView>
<xe:this.data>
<xp:dominoView var="view1" viewName="#{viewScope.selectedView}"/>
</xe:this.data>
</xe:dynamicView>
</xp:div>
The extra container div comes from experience that I had a while ago where refreshing the dynamic view directly caused rendering problems, but I don't know if that's still the case (or if I had run into some other problem).

How to open a classical Notes document in a new client tab, triggered by a XPage

I have to implement the following request, but all my tries failed:
If you click on a button/link in a XPage (XPiNC), a classic Notes-Document shall be created in another Notes Database. This new Notes document has to be open in a new client tab beside the tab with the XPage.
I’ve tried several ways with
FacesContext.getCurrentInstance().getExternalContext().redirect("notes://server/anotherdb/newdocumentunid?openDocument")
but none of them led to the desired result (There were 3 tabs opened or the XPage tab is empty).
Have you tried using window.open in client side javascript.
Add the code window.open("Notes://database/view/document?EditDocument")
that should work.
EDIT:
It is possible to execute CSJS from SSJS with view.postScript().
<xp:button value="client" id="button3">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" disableValidators="true">
<xp:this.action><![CDATA[#{javascript:var url = myJavaClass.createNewDocumentAndReturnNotesUrl(); view.postScript("window.open('" + url + "')");}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
CSJS function window.open(url) is executed from SSJS after creating document in other database and getting back the URL for the new document. This way, the code is only executed when button is clicked and new document opens in a new window.
Actually, to create a document in the other database, you don't need to worry about what the document's UNID is. Just use this javascript:
window.open("Notes://database/form?CreateDocument")

XPages: Add a button to a data view custom control

I'm using the Extension Library for creating XPages and I want to use a view, where i can use some inline buttons (buttons in every row of the view) and I also want to use the functionality of the data view where I can expand the content of the current row.
I want to use one of those inline buttons, to expand the content of this row, because before the functionality of this button can be executed, the user has to enter some data in an inputText-field.
So the questions are?
- How can I add inline buttons (using SSJS) to a data view?
- Do you know any other way to solve my problem?
Thanks!
In the Extlib database the expansion with a custom form was done using a link. I would stick to the links -> gives you the most options (client side, server side). Stick to those. If you really need that "buttony" look (which does IMHO not look very much like a web application), use CSS to style the link to look like a button. The OneUI has instructions for that (or steal them from Twitter bootstrap).
The OneUI is worth another look suggesting a different visual clue for expand/collapse.
You should be able to do this within the confines of a dataView by adding a facet for "detail" and using collapsible detail.
For the dataView, set collapsibleDetail="true", add in a panel to the detail facet, then put the elements you want to display when they click to expand in that panel.
<xe:dataView id="dataView1" collapsibleDetail="true" detailsOnClient="true">
<xp:this.facets>
<xp:panel xp:key="detail">
<xp:button id="Mybutton" value="My button"></xp:button>
<xp:label value="This is the label" id="label1" for="Mybutton"></xp:label>
</xp:panel>
</xp:this.facets>
<xe:this.summaryColumn>
<xe:viewSummaryColumn columnName="lastname"></xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xe:this.extraColumns>
<xe:viewExtraColumn columnName="city"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="state"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="zip"></xe:viewExtraColumn>
</xe:this.extraColumns>
<xe:this.data>
<xp:dominoView var="view2" viewName="ByName-First"></xp:dominoView>
</xe:this.data>
</xe:dataView>
Now, I'm not positive on how to bind it to the contents of the documents displayed, but I'm sure there's a way. I know how to access the document in a repeat, but not in a dataView, so I would probably do it in a repeat (unless you figure it out and post it to us here!)
Hopefully, that moves you in the right direction.

Resources