In an xpage I have two select2 lists. The choice in the first select box directs the options in the second select box.
The lists are defines via List Box controls.
In order to have select2 applied to them I have a scriptblock
$(document).ready(
function(){
x$("#{id:list1}").select2();
}
)
$(document).ready(
function(){
x$("#{id:list2}").select2();
}
)
$(document).ready(
function(){
x$("#{id:list1}").on("change", function(e) {
XSP.partialRefreshPost("#{id:pnlList2}"
})
pnlList2 contains the second list box.
The problem is that the validation for the second list is triggered when the first list box changes in value.
I tried to apply as parameters:
'params': {
'disableVal':'true'
}
but that does not work as desired.
anyone has a suggestion?
There are a couple of ways to go about it, but I prefer the most performing one, that is partial execution. Partial execution should be mandatory as a best practice.
What happens with your code is that you refresh a portion of your page while validating the whole of it. By doing this the second select gets caught without value.
I would define the onchange param for the combobox - not the event handler - so that the select2 will automatically pick up the event without declaring it through JavaScript later on as you do.
Just use:
<xp:combobox onchange=“XSP.partialRefreshPost('#{id:select2Id}', { execId: '#{id:select1Id}' }”
As I said select2 will see the onchange declared in this way and honor it. When it will fire only the combobox1 will be evaluated, thus automatically skipping any other validation on the page because not included. At this point the second select will not complain and be refreshed.
An additional word of advice is to reinitialize the second combobox with select2 because the partial refresh will destroy it. Better to expand the partial refresh area to include both the combobox and the scriptBlock specific for the second select.
Related
I have a report page which displays a crosstab. This is filtered by 5 paramaters. These paramaters are submitted by the user through on page checkbox prompts.
The requirement is to return the data with all values in all paramaters selected on the first run. If I leave default selections blank this behaviour is achieved but all the checkboxes are unchecked which gives misleading feedback to the user.
As an alternative I've manually specified all the values in default selections. However, this has a performance impact.
Does anyone have any alternative suggestions?
I've been looking for a way to specifically link a reprompt button to a value list so only those paramaters are resubmitted (rather than the whole page) but haven't found anything yet.
Thanks in advance - even if the answer is 'no and this is a bad way to go about it'!
One option is to use JavaScript to check all of the checkboxes after the page is rendered with no filtering applied. To do this all filters have to be set to optional. The page is rendered with all data and unchecked checkboxes. The JavaScript fires and checks all checkboxes so that the state of the prompts matches the state of the data. This happens so fast the user likely won't know the boxes weren't checked initially. A reprompt button will, when clicked, enforce whatever choices the user makes after that.
Since version 10.2, Cognos has provided a fairly simple JavaScript API to allow for render-time manipulation of prompt controls. Hopefully, you are working with 10.2 or later otherwise the code provided will not work. Here is a bit of JavaScript code that will loop through all prompts and select all values within them:
var report = cognos.Report.getReport("_THIS_");
var prompts = report.prompt.getControls();
if (typeof firstrun == "undefined") {
var values;
for (var i=0;i<prompts.length;i++) {
values = prompts[i].getValues(true);
prompts[i].addValues(values);
}
var firstrun = false;
}
Notes:
All value prompts behave the same way regarding the 10.2+ JavaScript Prompt API. It doesn't matter whether you choose a drop-down, list, checkbox or radio button interface. The way we code for all of these variations is the same. The provided code would work just as well with a list as it would with checkboxes.
Make sure that you wrap your code in script tags and that the HTML Item object you place on your page to hold the code appears below all prompt controls. If it is placed elsewhere it will not be able to find the prompt controls as they will not have been rendered when the code executes.
The code assumes that the only prompts on the page are the checkboxes you want checked. If there are other prompts on the page then you will have to target individual prompts using the getControlByName() function provided in the API rather than looping through all prompts. More information on the Cognos JavaScript Prompt API can be found here.
The key bits of code here are the getValues() and addValues() Cognos JavaScript Prompt API functions. getValues(true) returns a JSON-formatted object representing all values, selected or not, from a value prompt. addValues(values) takes a JSON-formatted object representing the values to be selected and selects them. Thus, it's a matter of grabbing all values and then passing them in to be selected.
The reason for the if block is that we only want this code to run once at first page render. When the user first runs the report we want all checkboxes checked but after that we want the checkboxes to retain state. If we didn't use the if block the user's choices would be overwritten after a reprompt. For more information on this technique check out this tutorial on my blog: JavaScript: Running Code Only Once.
Addendum
If you don't want any filters to be applied when all boxes are checked in a section even after subsequent reprompts you can do so by tweaking your filter.
Assume that we are checking against a model based item [Item1]. We have a current filter of: [Item1] in ?parameter1?. We also have four checkboxes with values of 'Choice1','Choice2','Choice3', and 'Choice4'.
The following modified filter will only apply the checkboxes to the filter when all four aren't checked:
(
'Choice1' in ?parameter1?
AND
'Choice2' in ?parameter1?
AND
'Choice3' in ?parameter1?
AND
'Choice4' in ?parameter1?
)
OR
[Item1] in ?parameter1?
If all four checkboxes are checked then the first part of the OR is satisfied and all rows will be returned. It should be fast too because most languages, including iterations of SQL, will not test the second component of an OR if the first component is satisfied.
Short overview of my issue: I have a large form with several fields, one of them is a xe:djFilteringSelect and one a xp:combobox. The xp:combobox is computet depending on the value selected in the filtering select. Now my customers want that if they change the value of the filtering select of a already saved docoument they should be prompted with a warning. So i want to add a confirm message to the onChange event of the djfilteringselect to cancel it's SSJS code wich changes the combobox.
Prompting the user with a confirm ("change value?...") box is no big deal but reseting the value back (on ClientSide) if the users selects "no" gives me a lot of trouble.
What i have already tryed:
If i use a simple confirm action all further onChange actions get canceled but the djFilteringSelect field keeps it's user selected value. So if i fire a partial refresh on the filtering select the original value form the document is displayed but i don't know where to add it because there is no onCancel or did i miss something here?
I also tried it from the CSJS with window.confirm and XSP.confirm and reset the value manual with a XSP.partialrefreshGet() if the user selects 'no' but in this case the partial refresh does not work:
if(!XSP.confirm("execute?")){
XSP.partialRefreshGet("#{id:repeat1}",{
onStart: function () {console.log("start");},
onComplete: function () {console.log("finish");},
onError: function () {console.log("error");}
});
return false;
}
If i move the partial refresh to a function and call it from e.g. firebug it works fine but if i call it inside the if(confirm){} it does nothing at all. The return false does work the SSJS does not get executed. The value in the document is not changed (as intended), but the djFilteringSelect keeps the selected value on the ClientSide.
I also tried Mark Leusink´s dojo-style Confirm but same Problem with the partial refresh here.
If i set the value back manual instead of using a partial refresh with dijit.byId(item).setValue it will resoult in another onChange Event... loop. Update: If i use dijit.byId(item).set("value",newVal,false) the onChange does not fire direct it changes the value as intended but then the onChange fires when the filtering select looses ist ??focus!?!? ...
So my questions:
Is there a ways to execute any Code after the confirm action if the user selects "no".
Why is the partial refresh in my CSJS not working (i dont see any traffic in firebug and i dont get any errors not even the onError of the refresh gets fired).
Does anyone know a different approach to my problem?
update:
My current 'solution' is to use window.location.reload() instead of the XSP.partialRefresh to reload the site. But this solution does not really satisfy me, because in IE the whole page is flickering.. in firfox i can live with it.
On a XPage how can I clear some fields when a certain radio button is pressed?
The fields are on a panel. Outside of that panel are some radio buttons. In the onChange of the radio buttons I change the render property of the panel via a viewScope variable and a partial refresh of the panel to make it disappear. This works. I just want to be able to also blank out the fields as well, else the values are saved when the users submits!
The SSJS equivalent of the modifyField simple action is the setValue method of the document data source; for example:
currentDocument.setValue("fieldName", null);
If someone tells you to instead call getComponent("someId").setValue(null)... don't. At first glance, that also works, but it's less efficient, fragile, and doesn't work when the target component is in a repeat control but the event component is outside the repeat. Always update the data source directly... any components bound to that data source will automatically pick up any changes you make.
Add an event that will modify the field on onchange event and refresh the area you want to change.
<xp:modifyField
var="document1"
name="FIELDNAME"
value="">
</xp:modifyField>
Use client side onChange to run whichever of these dojo's, where the < parentID > is the id of the container the RadioButton or RadioGroup is within:
dojo.query("*[type=radio]:checked",dojo.byId(parentID)).forEach(function(node, index, nodelist){
node.checked=false;
});
dojo.query("*[type=checkbox]:checked",dojo.byId(parentID)).forEach(function(node, index, nodelist){
node.checked=false;
});
dojo.query("input",parentID).
forEach(function(node, index, nodelist){
node.value = "";
})
//reset(
I am working on a large, worldwide application, which includes access from areas of low bandwidth. As such, I want to use a minimum of SSJS or partial refreshes for all the complex hide/when calculations. Here is what I have so far for a simple "hide/when":
A Yes/No radio button, with CSJS to show a panel ("Yes") or hide the
panel ("No").
The panel has a formTable inside it, and the values are shown or hidden, as per #1.
In the XPage's onClientLoad, the following code is run:
// "getRadioValue" is a simple script to return the value of a radio button
var v_value = getRadioValue("#{id:radioButton}");
v_div = '#{javascript:getClientId("radioButtonPanel")}';
// show or hide div simply use dojo to change the display of the panel
if (v_value == 'Yes') {
showDiv(v_div);
} else {
hideDiv(v_div);
};
For a new document, the onClientLoad script will hide the "radioButtonPanel" successfully. Changing the radio button to "Yes" will show the radioButtonPanel, just as clicking "No" will hide it. It works great! :-)
Once the document is saved and reopened in read mode, though, the onClientLoad CSJS event should read the saved value in the document, and decide to show the panel or not. When the document is opened in edit mode, the onClientLoad fires, reads the radioButton value and successfully shows or hides the panel.
This is what I've tried so far, to get it to work in read mode:
In CSJS, using "#{javascript:currentDocument.getItemValueString('radioButton'}" to get the value,
Doing some calculations in the "rendered" or "visible" properties, but that's SSJS and, if hidden, prevents any of the "show/hideDiv" CSJS visibility style changes.
Adding an old fashioned "div" to compute the style (which is what I used to do before XPages), but since I can't do pass-thru html any more, I can't seem to get a CSJS calculation for the style. Ideally, I can do something like this:
<div id="radioButtonPanel" style="<ComputedValue>">
Where the ComputedValue would read the back end value of the document, and decide to add nothing or "display:none".
Note that I don't want to use viewScopes, since this long form would need many of them for all the other hide/when's.
Is there any way to make this 100% CSJS? I feel like I'm very close, but I wonder if there's something I'm just missing in this whole process.
First, rather than computing style, I'd recommend computing the CSS class instead -- just define a class called hidden that applies the display:none; rule. Then toggling visibility becomes as simple as a call to dojo.addClass or dojo.removeClass.
Second, I see that you're using the #{id:component} syntax to get the client ID of the radio button but using SSJS to get the client ID of the panel. Use the id: syntax for both; this is still just a server-side optimization, but if there are many instances of these calculations, it adds up. Similarly, replace #{javascript:currentDocument.getItemValueString('radioButton'} with #{currentDocument.radioButton}. Both will return the same value, but the latter will be faster.
Finally, any attribute of a pass-thru tag (any component with no namespace, like xp: or xc:) can still be computed, but you'll need to populate the expression by hand, since the editor doesn't know which attributes for valid for these tags, and therefore doesn't provide a graphical expression editor. So if the ideal way to evaluate the initial display is by wrapping the content in a div, the result might look something like this:
<div class="#{javascript:return (currentDocument.getValue('radioButton') == 'Yes' ? 'visible' : 'hidden');}">
<xp:panel>
...
</xp:panel>
</div>
I am struggling with the following.
On my XPage I have a viewpanel component, but it is not bound to a notesview datasource, but to a hashmap stored in viewScope. Reasons for this is beyond scope of my question.
Since the lines in my view are not actually linked to the documents I cannot use the standard checkboxes and the related getSelectedDocIds. I do however want a way to remove the selected documents. I have a column with checkboxes containing the unid of the corresponding row.
So long story short. I have an array of unids and want to perform an action that does the following:
Display a dijit.Dialog asking for confirmation
If OK clicked call a function that does the following:
Remove the documents based on the unids
Refresh the viewpanel
I am thinking of the following 2 solutions, but in doubt what would be best (maybe a third, even simpler solution?)
Have the OK button of the dojo dialog call a function that does an XmlHttpRequest to an XAgent or plain old LS agent
Have the OK button trigger an eventhandler that runs on the server as described by JeremyHodge here. But how would I pass the unids as parameter and refresh the view afterwards?
Thanks!
Cant you just make use of the extension library dialog with the dialog button control. In this button control you can then
A third option would be to add a column to your datatable/view which contains checkboxes. On the onchange event of these boxes you add an eventhander which adds the value to a viewScope variable.
A button on the bottom (or top.) of the page you add the code you need to remove the selected items from the hashmap, delete the documents associate with the selected id's. this button can be a ordinary button with a partial refresh on the viewpanel. When you run into the bug that you cant use buttons in a dialog please use the extension library dialog control because this fixes that issue for you.
If the current user does not have the correct access level to delete documents you could use the sessionAsSigner global (assuming the signer of the design element has the correct access levels).
This way you dont need to go call an xAgent by xmlthttprequest and can stay with the default xpage methodology.
I hope this helps in some way
I would second #jjbsomhorst in the use of the extension library for the dialog box - if you use one at all. Usually users don't read dialog boxes. So the approach would be add the column with the checkboxes, but don't bother with an event handler, but bind them ALL with their value to ONE scopeVariable. On submission that variable will then hold an array with the selected UNID.
Then render a page that lists these documents and have a confirm button. While the new page affords a server round-trip the likelihood, that users actually pay attention is way higher. What you can do:
Have the normal page that renders the dialog with editable checkboxes and when the user clicks "Delete" you set something like viewScope.confirmDeleteMode=true; and use that as condition for the checkboxes and make them read-only AND set the class of the selected rows to "morituri" which in your CSS would have something like .morituri { color: white; background-color : red; font-weight: bold } and a new button "Confirm Delete" (and hide the Delete button).
This way you only have one page to deal with.
I went for option 2, which has the possibility to provide the partial refresh id. I passed the unids as a submitvalue like:
function doRemove(unids){
XSP.executeOnServer(ISP.UI.removeEventID, ISP.UI.removeRefreshID, {
params: {
'$$xspsubmitvalue': unids
},
onComplete : function() {
//alert('test')
}
});
}
The ISP.UI.removeEventID performs the following code:
var unids = context.getSubmittedValue();
removeDocuments(unids); //SSJS function performing the actual delete
viewScope.reload = 'reload' //triggers the hashmap to be rebuild based on new documentcollection