Need to get dynamic count of the selected check-boxes - checkbox

I'm having the two types of check-boxes one is for selectAll check-box in the data table header, and another type selecting the check-box for each row.
I'm doing a operation, So I need to show the confirmation message, How do I get the count of the selected check-boxes from the Managed Bean.
My code was written in JSF 1.2.
I can able to do select all records, select records, ManagedBean is working fine, But I need to get how many of them got selected for deletion.
Here is the JSF code,
<i:commandLink id="delete"
onclick="if (!confirm('#{managedBean.deleteSelectedCount}')) return false;"
action="#{managedBean.deleteRecords}"
title="Delete records"
immediate="true">
<i:graphicImage url="images/icons/delete.gif" alt="Delete records" />
</i:commandLink>
;
;//Some coding
;
//Data table code starts
<i:dataTable id="caseDataTable"
<h:column>
<f:facet name="header">
<i:selectBooleanCheckbox id="selectAllRecords" title="select All records"
value="#{managedBean.selectAll}">
<a4j:support event="onclick" reRender="caseDataTable,globalMessages" action="#{managedBean.actionSelectAllRecordss}" onsubmit="showBusyIndicator();" oncomplete="hideBusyIndicator();" />
</i:selectBooleanCheckbox>
</f:facet>
<h:outputLabel for="selectCheckbox" value="selectCheckbox"/>
<i:selectBooleanCheckbox id="selectCheckbox"
title="select a record" value="#{managedBean.selected}" >
<a4j:support event="onclick" reRender="selectAllRecords, globalMessages" action="#{managedBean.actionSelectionChange}"
onsubmit="showBusyIndicator();" oncomplete="hideBusyIndicator();"/>
</i:selectBooleanCheckbox>
</h:column>

Possible solution is to use h:inputHidden component (I think it exists in JSF 1.2. If not, you can find some alternative).
For example
Add h:inputHidden to the page
<h:inputHidden id="selectedCountHidden" value="#{managedBean.deleteSelectedCount}"/>
Each time you click on header check box or any of row check boxes, calculate deleteSelectedCount value and re-render h:inputHidden. Something like
<i:selectBooleanCheckbox id="selectCheckbox" title="select a record" value="#{managedBean.selected}" >
<a4j:support event="onclick" reRender="...,selectedCountHidden,..."
And now, since h:inputHidden will always hold deleteSeletedCount value, you can read its value via java script so there is no need for re-loading the page when you click on commandLink
<i:commandLink id="delete"
onclick="if(!confirm(document.getElementById('form:selectedCountHidden').value))return false;"..../>
Note that if you have form with id defined, you will need to call
document.getElementById('form:selectedCountHidden').value
Otherwise just call
document.getElementById('selectedCountHidden').value
In any case, inspect page source and you will find the exact id of p:inputHidden.

Related

Setting already fetched Account Name/Login Name to Pnp Js Peoplepicker

I am creating an edit form in spfx(with react js as a framework) where I will fetch data for particular list item using pnp js. I already fetched data from person type field say 'Sender'.Now I want to show the fetched user in peoplepicker control.
The below control is used in my code. Value for 'defaultSelectedUsers' is set statically to check whether once this control is loaded, the loginName mentioned there will pre-populate the user or not. But this attribute is not working.
Can anyone suggest how can I pre-populate this peoplepicker control?
<PeoplePicker
context={this.props.context}
titleText="Sender"
personSelectionLimit={1}
groupName={"some group here"}
showtooltip={true}
isRequired={true}
disabled={false}
defaultSelectedUsers=
{['i:0#.f|membership|abcUser#xyz23.onmicrosoft.com']}
selectedItems={this._getItems}
showHiddenInUI={false}
principalTypes={[PrincipalType.User]}
resolveDelay={200}
ensureUser={true}
/>
Expected Behaviour: As soon as page is loaded I want the user with login Name i:0#.f|membership|abcUser#xyz23.onmicrosoft.com pre-populated in peoplepicker control.
I was doing R&D on this issue from 2-3 days almost.But couldn't find anything. Today I just tried a simple thing. I put email of user instead of loginName and this thing worked.
<PeoplePicker
context={this.props.context}
titleText="Sender"
personSelectionLimit={1}
groupName={"some group here"}
showtooltip={true}
isRequired={true}
disabled={false}
**defaultSelectedUsers=
{['abcUser#xyz23.onmicrosoft.com']}**
selectedItems={this._getItems}
showHiddenInUI={false}
principalTypes={[PrincipalType.User]}
resolveDelay={200}
ensureUser={true}
/>
In my case adding ensureUser= {true} resolved the issue as follows
<PeoplePicker
context={this.props.context}
titleText="Multi People Picker for user name"
personSelectionLimit={5}
groupName={""}
showtooltip={true}
required={false}
disabled={false}
ensureUser= {true}
onChange={this._getPeoplePickerItemsUsername}
showHiddenInUI={false}
principalTypes={[PrincipalType.User]}
resolveDelay={1000} />

AEM/CQ: Checkbox is checked saves a Boolean value of TRUE,How to save a Boolean value as FALSE if we Unchecked?

For Example,I have created a check box with below properties
<checkbox1
jcr:primaryType="cq:Widget"
checked="false"
defaultValue="false"
fieldLabel="Sample"
inputValue="true"
name="./sample"
checkboxBoolTypeHint="{Boolean}true"
type="checkbox"
xtype="selection">
<listeners
jcr:primaryType="nt:unstructured"
check="function(isChecked){var panel = this.findParentByType('panel'); var fields = panel.find('name', './sample'); for (var i=0;i<fields.length; i++) {if (fields[i].xtype == 'hidden') { if (isChecked.checked) {fields[i].setDisabled(true);} else {fields[i].setDisabled(false);}}}}"/>
</checkbox1>
<hiddenCheckbox1
jcr:primaryType="cq:Widget"
disabled="{Boolean}true"
ignoreData="{Boolean}true"
name="./sample"
value="{Boolean}false"
xtype="hidden"/>
If we checked/enabled the check box it is showing the property "Sample" like below
sample Boolean true (working fine)
If we Unchecked/disable the checkbox then it is not showing the property "Sample"
Expectation: I want to show Sample Boolean false if we Unchecked/disable the checkbox
You might want to check the documentation of the Sling POST Servlet. This servlet is called when you submit your dialog. It has something called Suffixes which you can use in your dialog to give the POST servlet some hints about what your fields are doing.
One such suffix for example is the #UseDefaultWhenMissing suffix, which should be exactly what you are looking for.
From the documentation:
As described above, #DefaultValue only takes effect if no value is provided for a particular parameter. However, in some cases, such as HTML checkboxes, this isn't sufficient because the parameter isn't submitted at all. To handle this scenario, you can use the #UseDefaultWhenMissing suffixed parameter.
<form method="POST" action="/content/page/first" enctype="multipart/form-data">
<input name="queryIgnoreNoise" class="input" type="checkbox" value="true"/>
<input type="hidden" name="queryIgnoreNoise#DefaultValue" value="false"/>
<input type="hidden" name="queryIgnoreNoise#UseDefaultWhenMissing" value="true"/>
</form>
So what you have to do in your dialog definition is to add two additional hidden fields:
<checkbox1DefaultValue
jcr:primaryType="cq:Widget"
name="./sample#DefaultValue"
value="{Boolean}false"
xtype="hidden"/>
<checkbox1UseDefaultWhenMissing
jcr:primaryType="cq:Widget"
name="./sample#UseDefaultWhenMissing"
value="{Boolean}true"
xtype="hidden"/>
Pay close attention to the names of the fields:
./sample#DefaultValue and ./sample#UseDefaultWhenMissing.
It is the name of the checkbox (sample) plus the name of the two required suffixes: #DefaultValue and #UseDefaultWhenMissing.
There are a few more nice suffixes you can read about in the Sling documentation:
https://sling.apache.org/documentation/bundles/manipulating-content-the-slingpostservlet-servlets-post.html

Chaining an element using css containing text and accessing an associated field

I need to access the input field in the below html. The way the page is setup I need to chain using the 'Address Line 1' text and then sending text to the input field. The input field id changes and so doesn't the layout of the fields depending on user preference. I am struggling. If you need some more information feel free to ask I did not want to overload with too much information.
<td class="labelCol requiredInput">
<label for="00N36000000xina"><span class="assistiveText">*</span>Address Line 1</label>
</td>
<td class="dataCol col02">
<div class="requiredInput">
<div class="requiredBlock"></div>
<input id="00N36000000xina" maxlength="255" name="00N36000000xina" size="20" tabindex="4" type="text">
</div>
</td>
I have accessed like this:
element(by.css('div.pbSubsection:nth-child(3) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(2) > input'))
However depending on where the user puts the fields it can move around. So what I was hoping was to be able to access the label\ and use that to pinpoint its input field.
I don't know protractor but I cobbled together some code that hopefully will work or be close and I'll give you the thought process and some info and hopefully you can use it to fix my code, if needed, and solve the problem.
Start by finding an element by XPath, "//label[text()='Address Line 1']". This searches for a LABEL tag that contains "Address Line 1". Once you find that element, get the label attribute. From your HTML, this label is the id for the INPUT element you want. Now use the id to find the element and do with it what you want.
id = element(by.xpath("//label[text()='Address Line 1']")).getAttribute("label")
input = element(by.id(id))
input.sendkeys("some text")
Haven't tested this myself, but you could try something like this:
// $ is shorthand for element(by.css())
$('div.assistiveText').getAttribute('for').then(function (val) {
// locate the <input> by the value of the attribute on <label>
element(by.id(val)).sendKeys('abc'); // replace sendKeys with your intended function
});
Or if that first locator on the label isn't specific enough, swap out $('div.assistiveText') for element(by.cssContainingText('Address Line 1'))
I tried it for other attributes (I don't have a for attribute anywhere in my app) and it seemed to work for me.
Try this:
List<WebElement> elementList = driver.findElements(By.cssSelector("tbody > tr"));
for (WebElement element : elementList) {
if(element.findElement(By.cssSelector("td.labelCol > label")).getText().equalsIgnoreCase("Address Line 1")) {
element.findElement(By.cssSelector("input[type='text']")).sendKeys("textToInput");
}
}

How to avoid page refresh while using selectOneChoice

I am working on JDeveloper 11g Release 2. I am having af:input text elements and af:selectonechoice elements in my form. The problem is with af:selectonechoice element. After selecting a value from this choice list, it refreshes the values of other elements. I mean the values of af:inputtext are lost or the fields becomes empty.
The code for af:selectonechoice is as follows:
<af:selectOneChoice label="User Permission" id="soc"
value="#{row.bindings.UserPermission.inputValue}"
autoSubmit="true" valueChangeListener="#{SomeBean.setSomeValue}">
<af:selectItem label="Administrator" value="ADMIN" id="si1"/>
<af:selectItem label="Manager" value="MANAGER" id="si2"/>
<af:selectItem label="Employee" value="EMPLOYEE" id="si3"/>
</af:selectOneChoice>
Below is the code for input text:
<af:inputText value="XXX" label="XXX" id="id3" readOnly="true" partialTriggers="soc" >
</af:inputText>
Only the above inputText has partialtriggers. This works fine. Also I am sure that other input elements not having any partial triggers. Why the other input elements also being updated. Any ideas regarding this.
EDIT:
<af:column sortProperty="#{bindings.TasksView1.hints.TaskNo.name}"
sortable="true" headerText="Task No" id="c2">
<af:inputText value="#{row.bindings.TaskNo.inputValue}"
label="#{bindings.TasksView1.hints.TaskNo.label}" id="id3"
partialTriggers="soc">
</af:inputText>
</af:column>
And Code for ValueChangeLister is:
public void generateTaskNo(ValueChangeEvent valueChangeEvent){
DCBindingContainer dcBindings = (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
DCIteratorBinding iterBind = (DCIteratorBinding)dcBindings.get("TasksView1Iterator");
valueChangeEvent.getComponent().processUpdates(FacesContext.getCurrentInstance());
String task_code = (String)iterBind.getCurrentRow().getAttribute("USERPERMISSION");
task_code = task_code +'-';
String task_no = (String)iterBind.getCurrentRow().getAttribute("TaskNo");
task_code = task_code + task_no;
iterBind.getCurrentRow().setAttribute("TaskNo", task_code );
}
Here i am getting the SelectOneChoice value and Input text value[with id 'id3' ]. Based on the selected choice's value[Admin,manager,employee] i will set the value[TaskNo] in that input text. This should not affect other input fields in the form. But the problem is all other input fields are also updating and losing their previous values. I am sure those input fields don't have any partial triggers.
Your select one choice (SOC) set as auto submit = true. Then any element had partial triggers for SOC, Then that elements get refreshed. element SOC submit his value to server and other elements listen that value. listening elements needs to refreshed for update his value for SOC
The solution for this is if you use select one choice component with list of values you want store the id in database. For suppose your storage "ID" datatype consist integer but in database storage column datatype consist Varchar then soc components automatically refreshed when click save.so let you check the db column and list of values(lov) store value.

retain value of input type file in a jsp file while being dynamically generated

i have a jsp page where i have a input type file and i m allowing the user to browse files. i have one such input on jsp and the rest i m generating dynamically by javascript.
this is my jsp code:
<div id="labelContainer" style="display:inline">
<table align="center">
<tr>
<td align="left"><input type="text" id="label0" name="label0" size="15"></td>
<td align="center"><input type="file" id="filePath0" name="browsetrainset0"></td>
<td id="addlabel" ><img src="../images/add.png" title="Add Label" onclick="addLabel()"></td>
<td id="removelabel"><img src="../images/remove.png" title="Remove Label" onclick="removeLabel('labelDiv0')"></td>
</tr>
</table>
</div>
and this is my javacsritp code:
function addLabel(){
var text="";
lCount++;
text+=("<table id='labelDiv"+lCount+"' align='center'>");
text+=("<tr>");
text+=("<td align='left' style='display:none'><input type='checkbox' checked='true' name='labelchkbox'/></td>");
text+=("<td align='left' id='label'><input type='text' id='label"+lCount+"' name='label"+lCount+"' size='15'></td>");
text+=("<td align='center'id='filePath' ><input type='file' id='filePath"+lCount+"'name='browsetrainset"+lCoun t+"'></td>");
text+=("<td id='addlabel' ><img src='../images/add.png' title='Add Label' onclick='addLabel()'></td>");
text+=("<td id='removelabel'><img src='../images/remove.png' title='Remove Label' onclick=\"removeLabel('labelDiv"+lCount+"')\"></td>");
text+=("</tr>");
text+=("</table>");
document.getElementById("labelContainer").innerHTM L+=text;
}
but i m not able to retain the value of the file path i browse, on the jsp page once i click the add label and generate another input type file.
I am using IE7. Please tell me how to reatin the value of the browsed files so that i can use them further.
document.getElementById("labelContainer").innerHTM L+=text;
Never, ever use += on innerHTML. It does not do what you think.
Instead, it laboriously serialises the entire contents of the div into HTML, adds your string onto the HTML code, and then parses the whole lot back into objects.
This is slow, and loses all information that cannot be remembered in an HTML string, such as JavaScript references, event handlers (all your onclicks will stop working) and form field contents (including file uploads).
You could add all the new HTML content to a temporary container instead, then move that using DOM methods to the destination:
var div= document.createElement('div');
div.innerHTML= text;
while (div.firstChild)
document.getElementById("labelContainer").appendChild(div.firstChild);
Or you can use DOM methods to create and add the nodes directly. In your case since the new nodes are so similar to the old ones, you could clone them:
function addLabel() {
var container= document.getElementById('labelContainer');
var tables= container.getElementsByTagName('table');
var n= tables.length;
var table= tables[0].cloneNode(true);
table.id= 'labelDiv'+n;
var inputs= table.getElementsByTagName('input');
inputs[0].id=inputs[0].name= 'label'+n;
inputs[1].id=inputs[1].name= 'browsetrainset'+n;
container.appendChild(table);
}
(Care: IE has some issues with changing field names with things like radio buttons though.)
If you want to be accessible without JavaScript (generally a good idea), the usual approach is to include the maximum number of entries you might, and use script to hide the ones that aren't in use.
If I remember correctly, it is not possible to programmatically set the filepsec associated with an <input type="file"> element, as this would constitute a security risk, by allowing malicious scripts to upload files that had not been specifically chosen by the user.
The only way to set the filespec is to browse to it from the web browser.

Resources