Conditionally hidden edit box in a partially refreshed panel - xpages

My custom control consists of a number of combo boxes and text input boxes within a panel. The combo box values depend on one another, so when a combo box is changed, a partial refresh is executed on the panel to refresh the values of the other combo boxes.
One of the text input boxes is also dependent on one of the combo boxes - let's say the combo box title is "Do you have any special requirements?" and the values are "Yes" and "No". If the value is "No" then the special_requirements text box is hidden, and saved as "N/A" to the document in a querySaveDocument event. If the value is "Yes" then the special_requirements text box is shown, and the user must fill it out, and their input is saved.
The problem I've been having is that if I compute the value of the "Visible" property of the text box, then it is shown/hidden appropriately, but any user input is cleared whenever the panel is refreshed - eg the user selects "Yes", inputs some text, then changes another of the combo boxes which causes a partial refresh - the text box is still shown, but is now empty.
Currently I am using a workaround where instead of computing the "Visible" property, I compute the CSS style, setting it to hidden when the text box is not required. However, this means a user could input to it despite selecting "No" in the combo box, so it is not an ideal solution. Is there are a way to preserve the user's previous input between refreshes, and remove it if the combo box option is changed from "Yes" to "No" using the "Visible" property?

Assuming that Naveens example is the same problem like yours you have a simple problem with the JSF lifecycle: If a component is not visible during the Update Model Phase, the submitted content is not applied and gets lost.
Just change the rendering property to this:
<xp:this.rendered>
<![CDATA[#{javascript:
if( view.isRenderingPhase() ){
return getComponent("comboBox1").getValue() == "Yes"
}else{
return true;
}
}]]>
</xp:this.rendered>

I faced a similar issue some time back and I think you are facing the same. Here is what I found out.
Let's say in your panel you have combo box and then edit box (the order is important) with visibility of edit box is dependent on value of combo box. When you change the value of combo box the edit box is visible or hidden but its value gets cleared (refer below code snippet).
<xp:panel id="panel1">
<xp:comboBox id="comboBox1">
<xp:selectItem itemLabel="No" itemValue="No"></xp:selectItem>
<xp:selectItem itemLabel="Yes" itemValue="Yes"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="panel1">
</xp:eventHandler>
</xp:comboBox>
<xp:inputText id="inputText1">
<xp:this.rendered><![CDATA[#{javascript:getComponent("comboBox1").getValue() == "Yes"}]]></xp:this.rendered>
</xp:inputText>
</xp:panel>
But if I swap the two components so that we have edit box and then combo box (remember, the order is important) and then change the value of combo box, the value in edit box is restored when edit box is visible again (refer below code snippet).
<xp:panel id="panel1">
<xp:inputText id="inputText1">
<xp:this.rendered><![CDATA[#{javascript:getComponent("comboBox1").getValue() == "Yes"}]]></xp:this.rendered>
</xp:inputText>
<xp:comboBox id="comboBox1">
<xp:selectItem itemLabel="No" itemValue="No"></xp:selectItem>
<xp:selectItem itemLabel="Yes" itemValue="Yes"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="panel1">
</xp:eventHandler>
</xp:comboBox>
</xp:panel>
It seems the value in components before the partial-refresh-triggering-component get submitted while others do not. Regarding the reason for this behavior, I have no idea! I would really like if some one could throw some light on this as this has led me to redesign my XPages quite a few times!

Related

How to dynamically change style sheets for checkbox in JSF?

In my program, the frontend is created using Primefaces. When creating the registration form, I put a checkbox, which is the acceptance of the terms of service. I would like the checkbox to turn red when clicking "Register" if this checkbox is not checked.
<p:selectBooleanCheckbox immediate="true" id="checkbox"
value="#{backingBean.isChecked}"
style="#{backingBean.isChecked ? 'background-color:red':'background-color:white'}">
</p:selectBooleanCheckbox>
In my baking bean, I have a private field isChecked that stores a boolean.
My first problem is that when I put in 'style' properties " background-color, the color changes also the area around the checkbox, not the border itself. Border-color also does not work.
My second problem is that when I click "Register", the checkbox does not change color.

Combo box return relevant information depends on the edit box's value

Here is what I intend to do in xpages.
When I type something in the edit box, then I click the button, the combo box will display relevant information.
Here is the design in xpage, there is a edit box, a button and a combo box. The edit box uses session scope variable, the button is used to partial refresh the combo box. The combo box displays relevant values depends on the edit box value.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:inputText id="inputText1" value="#{sessionScope.itemname}"></xp:inputText>
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="comboBox1">
</xp:eventHandler></xp:button>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:comboBox id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var SetFirstValueBlank = #Text("");
return SetFirstValueBlank;
}]]></xp:this.value>
</xp:selectItems>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var searchitem= getComponent("inputText1").getValue();
var result = #DbLookup(#DbName(),"itemListView", searchitem,1 );
return result;}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</xp:view>
Suppose in the view, it has many items such as apple, apple chips, apple juice, apple pie, fish, orange, etc.
When I run the program, I type apple pie exactly, the combo box can show the exact value (apple pie) for me to choose, but if I just type appl (not the exact value), the combo box will not show anything. In fact, I think the combo box will show apple, apple chips, apple juice and apple pie for me to choose, but the result let me know that I am wrong.
I revised the code, I guess the combo box does not return anything for selection because I use #DbLookup, so and #DbLookup requires the exact value, so the combo box will not show anything.
The reason I choose to use combo box is it allows the user to select one value only.
I think about #DbColumn but it will return all values from the view column, so I use #DbLookup, but it needs the exact value to lookup.
How can I make the combo box return relevant information depends on the edit box's value.
Grateful for your advice please. Thank you.
Use view's getAllEntriesByKey() with parameter exact set to false to get all entries which start with the given key (in your example "apple").
instead of using a inputText + combo, have you considered using a control that provides this sort of behavior in the one control?
if you are able to use the extension library, you could use the dojo filteringselect control or dojo combobox control.
both are similar to each other but for dojo filtering select, you must choose a value from the given select list. for dojo combobox you are allowed to also type any word even if it is not in the list
here is an example from Brad Balassaitis's blog
https://www.google.com.au/amp/s/xcellerant.net/2013/09/18/xpages-dojo-filtering-select/amp/?client=safari
by default, the entries are matched with a 'starts with' style, so 'pie' would not match 'apple pie' but 'app' would.
if you want filtering select to match any part of the word then you set the queryExpr as follows
<xe:djFilteringSelect id="djFilteringSelect1" value="#{viewScope.myvalue}" autoComplete="false">
<xe:this.queryExpr><![CDATA[${javascript:"*$\{0}*"}]]></xe:this.queryExpr>
<xp:selectItems id="selectItems1" value="#{myBean.mySelectItems}"/>
</xe:djFilteringSelect>

XPages - how to remove default value from date fields?

I'm using several Edit Boxes on an XPage. These Edit Boxes use the display type Date/Time and are designed to store and display date values. On my test server these Edit Box fields contain no default value when a new XPage is being created. On my production server the current date is always displayed as a default value. What could be the cause of this? Here is my code:
<xp:inputText id="Birthdate" value="#{document1.Birthdate}" defaultValue="">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime></xp:this.converter>
<xp:dateTimeHelper></xp:dateTimeHelper>
</xp:inputText>
This is a change in Domino 9 but it has been changed in 9.01
Check this previous question about this and the solution
Xpages Date Time Picker field defaults to today's date

How can I allow selection of a date using the calendar button but disable typing of date in Dojo Date Textbox?

How can I allow selection of a date using the calandar button but disable typing of date in Dojo Date Textbox?
Is there a way to do this? If so how?
Basically I want the users to be able to select a date using the calendar button but don't allow them to manually enter a date.
Create a client-side onfocus event:
thisEvent.target.blur();
That doesn't prevent the field's value from being programmatically populated via the date helper, but if they try to manually focus (i.e. click or tab into) the field, it will kick them back out again.
There is a new property of showReadonlyAsDisabled which I tried on date time field. But it ended up creating a disabled field, but surprisingly it creates a readonly field in case of edit box. So I had to create a workaround by setting the readonly property via javascript while loading the page. Below is the code snippet:
<xp:inputText id="dateTimeField">
<xp:dateTimeHelper id="dateTimeHelper1"></xp:dateTimeHelper>
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<xp:br></xp:br>
<xp:scriptBlock>
<xp:this.value><![CDATA[XSP.addOnLoad(
function() {
document.getElementById("#{id:dateTimeField}").readOnly = true;
}
);]]></xp:this.value>
</xp:scriptBlock>
I don't know if this is optimal solution, but it works!

Computing checkbox choices dependent on radio button selection

I want to be able to select a value in a radio button in XPages, then use that value to determine the choices in a set of checkboxes.
The choices for the radio button are found using a DbLookup to one view. There is some javascript that puts the text value of the radio button lookup into a hidden field. Based on that value, the checkbox choices are determined with another DbLookup.
I keep fiddling with the code and can never get it to use the updated value of the hidden field to recompute the choices for the checkboxes, even if I display it.
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript: var viewName=reportDoc.getItemValueString("viewChoice");
var tmp = #DbLookup(#DbName(),"dbprofile",viewName,"Value");
#If(#IsError(tmp),"None",tmp)
}]]></xp:this.value>
</xp:selectItems>
I'm sure this is actually pretty simple, but I just can't figure it.
You need to set the onChange event of the radio button to partially refresh the checkBox control. This ensures that the values of the checkBox control are refreshed.
The checkBox control can read the value of the radio button control using getComponent("id of radio button control").getValue() and use this value instead of the hidden field for the DbLookup.

Resources