Open an XPage from the Application Layout Banner - xpages

I'm using the Application Layout control and have set up a basicLeafNode within the bannerUtility links. I wanted to open another XPage (MeineAnmeldung.xsp) whenever that link 'Meine Anmeldungen' is clicked.
<bx:this.bannerUtilityLinks>
<xe:basicLeafNode
label="Meine Anmeldungen">
<xe:this.rendered><![CDATA[#{javascript:context.getUser().getRoles().contains('[CreateAnmeldung]')}]]></xe:this.rendered>
<xe:this.onClick><![CDATA[#{javascript:context.redirectToPage("MeineAnmeldungen.xsp")}]]></xe:this.onClick>
</xe:basicLeafNode>
but, as I have discovered, the onCLick event on the basicLeafNode is strictly CSJS, which I assume is the reason why I'm having issues.
Am I trying to do this at the wrong place? To be honest, I don't understand the difference between all these different bars at the top: Placebar, Search Bar, Title Bar, mastHeader. No idea which does what, and I'm trying to have a very simple UI without any clutter.
Or is there a way to redirect using CCJS? Perhaps by recalculating an URL, which I also am not sure about how to calculate.

Use a pageTreeNode instead. Here's an example:
<xe:this.bannerUtilityLinks>
<xe:pageTreeNode label="Meine Anmeldungen" page="/MeineAnmeldungen.xsp.xsp"></xe:pageTreeNode>
</xe:this.bannerUtilityLinks>

You can redirect via CSJS using location.href=.... CSJS is all the onClick event of the basicLeafNode can do.
The Application Layout control itself has an onItemClick event on the Events tab. That will allow you to trigger SSJS and use context.getSubmittedValue() to check the submitValue property (you'll need to add that) for the basicLeafNode.
See TitleBar tabs in ApplicationLayout control (extlib) generating invalid code

Related

How to make backbutton work for a control, not just Page in UWP?

I followed this link http://www.wintellect.com/devcenter/jprosise/handling-the-back-button-in-windows-10-uwp-apps and "successfully" make my button work. I mean I can make my backbutton work between pages. However, if I navigate to a control which is inside this page and will cover the whole screen, then it would not allow me to back to the page. I will stuck in that control.
I'm wondering how to solve this problem. Currently I can think two possible ways (0) Override OnBackRequested() inside the control's code behind or viewmodel? (1) Override OnHardwareButtonsBackPressed() inside the control's code behind or viewmodel?. I don't know if these are correct way to do it or there is some better way to do it. Another reason for me to override is that I need to make some changes to the page navigation behavior.
As you have guessed, you simply need to hide the control again when the back button is pressed or back is requested in some other way. I would listen for the BackRequested event (not the HardwareButtons.BackPressed event) in the page's code-behind, and in the handling method you can check to see if the control is currently shown. The reason I recommend the BackRequested event is because it is universal, while HardwareButtons.BackPressed only works on a phone. Anyway, if the control is visible, then hide it, and set the Handled property of the event arguments to true. If the control is already hidden, don't do anything special to handle the event (because in that case you will want the navigation system to handle it by navigating to the previous page, if there is one). There are many aspects to navigation in Windows 10 -- please see these pages on Navigation and the SystemNavigationManager.

How to add an onComplete event to the Xpages extLib valuePicker control

I have an extensionLibrary valuePicker control on my XPage and I'd like to run some search code after user selection. How can I achive this. Any onComplete events? I'd like to omit an "onchange" event at the target field (user may change it manually and then I'd like to start search on Enter or Search Button click)
<xe:valuePicker id="valuePicker1"
for="TargetField" pickerText="Select"
dialogTitle="Select">
<xe:this.dataProvider>
<xe:simpleValuePicker labelSeparator="|">
<xe:this.valueList><![CDATA[#{javascript:getMyValues()}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
From the source code, it looks like the Value Picker calls XSP.selectValue() passing in the dojoType of the dialog to show, by default extlib.dijit.PickerList. It's triggering an AJAX request to retrieve the values, but opening and closing the dialog is done via CSJS only. So there's no onComplete event like partial refresh. And there's no current hook to add CSJS to run when closing. But it would be possible to extend that JavaScript file and trigger that instead. I'm not sure in your use case what corresponding code you would then need for your Edit Box control.
My preferred method is to use the Dojo List Text Box to hold the selected values (rather than an Edit Box or other manually editable component), then use an onChange event on that target field. Personally I feel it gives a better user experience, discourages manual typing and avoids needing to validate the Edit Box for user input.

Displaying Extension Library Dialog box when page loads?

Is there any way to display an extension pages dialog box when my page loads?
Add a <xp:scriptBlock /> with the following client-side code as its value:
XSP.addOnLoad(function(){XSP.openDialog("#{id:dlgMessage}");});
...just be sure to place the component outside any refresh targets, or it will launch the dialog again after every partial refresh event with a target that includes it.
Try adding a dojo.addOnLoad() (in a xp:scriptblock) that displays the dialog using CSJS: XSP.openDialog()
Bruce,
You could use jQuery to 'push' the button on page load.
Try putting this clientside js code in your onClientLoad event
$(document).ready(function(){
$('a.btn').trigger('click');
});
You will have to load jQuery to use this if you don't already have it loaded. You might also be able to do the same thing with dojo.
EDIT: You might have to modify the selector (the tag and class in the parens line 2) above if not using bootstrap. I would give it a unique class so as not to 'push' any other buttons at the same time.

XPages templating dialog boxes

I am currently on a project redesigning an existing traditional domino web application to XPages. This application contains a web form with quite a lot of helper dialog boxes. Also notifications and validation and confirmation is done through dialogboxes.
I know I can create a custom control for each dialog box and add it to the Xpage and call the show. I even managed to load it dynamically using a dynamic content control with a facet for each dialog. Since the dialog cc contains a show() in the onClientLoad. It is easy to open a dialog by switching the content of the dynamic content control.
Still, adding all these custom controls to my XPages feels inefficient and really clutters the design tab. What's your take?
I would prefer setting the content of the dialog dynamically (Like in traditional domino you would define a form for each dialog). Is that possible?
If not is it possible to load a custom control dynamically (Like using a computed subform)?
Also for confirmation boxes I need the OK button to execute different code for each confirm. What would be the best way to implement that? Add custom parameter "functionOnOk" to the "dlgConfirm" custom control and evaluate that in the submit button?
PS: I am still using panels with dojoType=dijit.DialogBox, but will change those to extlib dialog boxes. For the confirm and messageboxes I am now using client side dijit.Dialogs with mark-up in code, but I would like the markup in XPages as well.
I know there are issues with panels with dijit.Dialog, because Dojo moves the dialog in the DOM, which prevents any SSJS in the dialog running. I don't know if that's also an issue with dijit.DialogBox, but I suspect it could be. Jeremy Hodge did some code to workaround that.
However, I would strongly recommend using the Extension Library control. Client-side dijit.Dialogs are likely to be much more difficult to code and will not allow any SSJS interaction. I'm not aware of any Dojo properties not available in the Extension Library control, and the Extension Library control also allows you to open or close the dialog both in CSJS or SSJS. It also allows you to specify an area to refresh on close.
In terms of the properties, preload is there purely to speed up showing. Are you using the refreshOnShow property? This ensures the URL or content is refreshed each time the dialog is shown. The Extension Library chapter on dialogs has a table covering all the properties. You can set the URL to point to another XPage or another web page. This may allow you to use the Dynamic Content control to pass parameters to switch the content that should appear.
In terms of the code behind the OK button, if you use the Extension Library dialog, you have all the functionality you would have outside the dialog.

moving from javascript window.open to Rich:ModalPanel

In my web application currently there are many pop up windows made by various JS function which i would like to replace with Rich:ModalPanel (I'm using Myfaces 2.0.12 and RichFaces 3.3.3). Below is a typical example i like to replace:
window.open("<%=basePath1%>jsp/custhistory.faces?userid="+pk);
where pk is the value retried from a hidden input such as <h:inputHidden id="userPk" value="#{1234}"/> inside the javascript function and then added to the end of the url above.
Looking at few RichFaces ModalPanel examples (and demos) i can't figure out how i can make the above work using ModalPanel. Can someone please provide an example or a link to a resource o
I have been using Richfaces 4, but the same theory should apply.
The modal panel is essentially a div that can be shown or hidden, so you could add a <ui:include> in there if you specifically need (or want) the panel to be a seperate file.
The modal panel is rendered as part of your page, but is styled as display:none I believe. If this is triggered by a client action you can call the Richfaces API to show the panel on command.
For instance instead of a command(Link|Button) triggering Richfaces.$('elName').show() it could trigger your js function which sets and values/params your modal panel needs and then call .show() itself.
Note: IE and firefox had a truly modal popup. This is not truly modal and javascript will process in the background, and if you do not give focus to the popup panel if the user types it will interact with the application in the background.
I had used a modal js popup to prompt a user with a yes/no question int his type of idiom
if(askUser("some question?")=='yes'){
//some code to do if yes
}else{
//some code to do if no
}
Depending on how generic you want this popup, that is not really possible without using an event that is fired and defining an event handler for that event to handle the rest of the function.

Resources