p:carousel filled with an array and input text not submitting [duplicate] - arrays

This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 6 years ago.
I fill a carousel with datas from an array. And I'd like to change the datas of the array with the datas which are set in the carousel.
<h:form id="newConditionPanelForm">
<p:panelGrid id="newConditionPanelGrid">
<p:row>
<p:column colspan="2"><h2>Define conditions</h2></p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Condition Name:" />
</p:column>
<p:column>
<h:outputText value="#{priceManagementMB.conditions.name}"></h:outputText>
</p:column>
</p:row>
<p:row>
<p:column colspan="2" style="text-align:center; width:100%">
<p:carousel id="priceCarousel"
value="#{priceManagementMB.prices}" headerText="Price per hour"
var="priceEdit"
numVisible="1"
style="width:100%"
circular="true"
binding="#{carousel}"
responsive="true">
<h:panelGrid columns="1">
<p:row>
<p:column colspan="2">
<h:outputText value="#{carousel.rowIndex + 1}h00" />
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Price during given Hour: " />
</p:column>
<p:column>
<p:inplace id="inplacePrice" emptyLabel="click here to edit">
<p:inputText id="priceEdit" value="#{priceEdit}">
</p:inputText>
</p:inplace>
</p:column>
</p:row>
</h:panelGrid>
</p:carousel>
</p:column>
</p:row>
</p:panelGrid>
<h:commandButton value="Submit conditions" update="newConditionPanelGrid"
validateClient="true" action="#{priceManagementMB.updateCondition}">
</h:commandButton>
</h:form>
The elements in the inputtext that are in the carousel aren't submitted to the backing bean and I can't use them.
What do I do wrong ? How could I get the datas without transmitting them an actionPropertyListner in a link or button? An event like blur would work too but I don't know how to put it in use, I need the Index and the new Value. The array has a lenght of 24, one for each hour of the day.

JSF after submit try to call proper setter. You don't provide details about prices type but I'm guessing that you use some class from java.lang (Float, Double).
So then when you use value="#{priceEdit}" JSF try to use setPriceEdit on Double, Float. In details it is explained here How does EL #{bean.id} call managed bean method bean.getId()
The solution is to used your class with setter (take a look at What is the best data type to use for money in java app?). If this class has no setter you always can write your own class (wrapper) with proper setter.
Simple example:
class MoneyWrapper {
private YourMoneyType value;
public setValue(YourMoneyType value){
this.value = value;
}
public YourMoneyType getValue(){
return this.value;
}
}
Than in your bean you can use array contains elements of MoneyWrapper. And finally use it in view like this value="#{priceEdit.value}"

Related

How do I add value to my ligthning input using aura:iteration during onChange event of text box

Hi I'm new to salesforce. I'm trying to develop a lightning component that will take user input, process that input & will display the value in two text box.My lightning component looks like
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global" controller="VisionController">
<!--Remember to define your binding attribute-->
<aura:attribute name="val" type="String"/>
<lightning:card title="Partner Information">
<div class="slds-p-around_medium">
<p>
<!--Set you attribute as the value of the lightning:input component-->
<lightning:input aura:name="val"
label ="Enter KPI"
value="{!v.val}"
type="text"
onchange="{!c.onChange}"/>
</p>
</div>
</lightning:card>
My JS controller looks like
({
onChange : function(component, event, helper) {
var action = component.get("c.getCallKPI")
action.setParams({
"value":val,
})
$A.enqueueAction(action)
}
})
I tried to do the iteration portion in controller using following code
var prediction=component.find("pred")
var predictionProb=component.find("predProb")
<aura:iteration items="{c.getCallKPI}" var="predUrl" >
prediction.value="{!predUrl.label}"
predictionProb.value="{!prediction.probability}"
</aura:iteration>
where prediction & predictionProb are id of two lightning inputs given in my component.But I'm getting syntax error at </aura:iteration>
If I'm doing it in component using following code
<aura:iteration items="{c.getCallKPI}" var="predUrl" >
<lightning:input id="pred" readonly="true" value="{!predUrl.label}"/>
<lightning:input id="predProb" readonly="true" value="{!predUrl.probability}" />
</aura:iteration>
Then it's not giving any error but not populating the inputs.
Can you guide how do I resolve this?
my getCallKPI is given below
#auraEnabled
public static List<KPI.Prediction> getCallKPI(string value) {
return KPI.Prediction;
}
You should use aura:iteration inside component markup.
In your component create new attribute of type "List".
<aura:attribute name="predictions" type="List"/>
In JS controller specify callback for action, in which set new attribute to response.getReturnValue().
action.setCallback(this, function(response) {
component.set("v.predictions", response.getReturnValue());
}
Calling a Server-Side Action
Inside component, iterate over returned records:
<aura:iteration items="{!v.predictions}" var="item">
//your logic
</aura:iteration>
aura:iteration

ExtJs4 - Form defined in javascript multicombo loaded at runtime

When the form is initially loaded the multicombo on the form correctly reflects the data that is set up.
However, if I attempt to update the information at runtime, the list of options in the multicombo aren't updated when the form is displayed.
I have them successfully defined as form options, they have a simple 'text' only store. However, I can't seem to find the correct set of properties and method to actually update the multicombo from the C# code as needed.
I've noticed this as well. You can set the Ext.net.ListItems on page-load but they are fickle when it comes to setting them dynamically in code-behind. I now always use a Ext.net.Store with any Multicombo or ComboBox that needs to dynamically change.
You can use the Handler events on Focus or BeforeSelect to reload the list.
<ext:ComboBox ID="ComboBoxTransferGroupMembers" runat="server" FieldLabel="Transfer To" EmptyText="Group Members" LabelAlign="Top" DisplayField="Name" ValueField="Id" MarginSpec="0 0 5">
<Listeners>
<Focus Handler="#{ComboBoxTransferGroupMembers}.store.reload()" />
</Listeners>
<Store>
<ext:Store runat="server" OnReadData="StoreTransferGroupMember_ReadData" ID="StoreXferGroup">
<Model>
<ext:Model IDProperty="Id" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Id" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Mode="Raw" Name="Group" Value="#{ComboBoxTransferGroup}.getValue()" />
</Parameters>
</ext:Store>
</Store>
<DirectEvents>
<Select OnEvent="ComboBoxTransferGroupMembers_Select">
<ExtraParams>
<ext:Parameter Mode="Raw" Name="Group" Value="#{ComboBoxTransferGroup}.getValue()" />
</ExtraParams>
</Select>
</DirectEvents>
</ext:ComboBox>

How to Enable/Disable checkbox in dataTable based on the value of column in the row

I need your help in enabling/disabling the checkbox in the dataTable based on the column remarks in the dataTable. If the remarks column is not empty or blank, then the checkbox of the row should be disabled, otherwise it should be enabled if the remarks column is empty or blank.
I need to do it from the backing bean in the method. The dataTable code is:
<p:dataTable value="#{testController.employeeList}" id="Employee" var="emp"
rowIndexVar="rowIndex"
selection="#{testController.selectedEmployees}" rowKey="#{emp.id}"
rowSelectMode="checkbox">
<p:columnGroup type="header">
<p:row>
<p:column/>
<p:column headerText="ID"/>
<p:column headerText="Name"/>
<p:column headerText="Remarks"/>
<p:column headerText="Update"/>
</p:row>
</p:columnGroup>
<p:column selectionMode="multiple"/>
<p:column headerText="ID">
<h:outputText value="#{emp.id}"/>
</p:column>
<p:column headerText="Name">
<h:outputText value="#{emp.name}" id="name"/>
</p:column>
<p:column headerText="Remarks">
<h:inputText id="inputT1" value="#{emp.remarks}"/>
</p:column>
<p:column headerText="Update">
<p:commandButton id="updateCmd" title="Update"
actionListener="#{testController.updateRecord}">
</p:commandButton>
</p:column>
</p:dataTable>
In the init method:
public void init() {
if (e.getRemarks.equals("") || e.getRemarks == null)
{
// I need to update the checkbox to be enabled
}
else
{
//I need to update the checkbox to be disabled
}
To update only the checkbox you need to add 2 property in your Employee class
private Boolean selected;
private Boolean isRemarkNotEmpty;
and assign isRemarkNotEmpty = (remarks!=null)&&(!remarks.trim().isEmpty()) while creating the object.
Data table:
<p:dataTable value="#{testController.employeeList}" id="Employee"
var="emp" widgetVar="employeeTable" rowIndexVar="row"
rowKey="#{emp.id}">
<p:columnGroup type="header">
<p:row>
<p:column/>
<p:column headerText="ID"/>
<p:column headerText="Name"/>
<p:column headerText="Remarks"/>
<p:column headerText="Update"/>
</p:row>
</p:columnGroup>
<p:column>
<p:selectBooleanCheckbox value="#{emp.selected}" disabled="#{emp.isRemarkNotEmpty}" id="myCheckBox"></p:selectBooleanCheckbox>
</p:column>
<p:column headerText="ID">
<h:outputText value="#{emp.id}"/>
</p:column>
<p:column headerText="Name">
<h:outputText value="#{emp.name}" id="name"/>
</p:column>
<p:column headerText="Remarks">
<h:inputText id="inputT1" value="#{emp.remarks}"/>
</p:column>
<p:column headerText="Update">
<p:commandButton id="updateCmd" title="Update"
actionListener="#{testController.updateRecord}">
<f:attribute name="rowId" value="#{row}"></f:attribute>
</p:commandButton>
</p:column>
</p:dataTable>
Update method:
public void updateRecord(ActionEvent actionEvent) {
Integer rowId = (Integer)actionEvent.getComponent().getAttributes().get("rowId");
FacesContext context = FacesContext.getCurrentInstance();
Employee selectedRecord = context.getApplication().evaluateExpressionGet(context, "#{emp}", Employee.class);
selectedRecord.setIsRemarkNotEmpty(false);
RequestContext.getCurrentInstance().update("myform:sEmployee:"+rowId+":myCheckBox");
}

checkbox selection issue in data table

I am using primeface 3.5 where I have datatable with check box column.Among different columns i have a column with amount and when i check any row then i have to calculate 15% of that amount and show the result in another column .My data table is like this:
<p:dataTable id="tblExamPaymentSlip" style="width:1200px;"
value="#{examPaymentSlipMB.paymentSlipList}"
selection="#{examPaymentSlipMB.tempList}"
rowIndexVar="rowsn" var="paymentSlip" rowKey="#{paymentSlip.paymentSlipId}" >
<p:ajax event="rowSelectCheckbox" listener="#{examPaymentSlipMB.addAmt}" process="tblExamPaymentSlip" update="dedId" />
<p:column>
<f:facet name="header">
<h:outputText value="Payment" />
</f:facet>
<h:outputText value="#{paymentSlip.offPaymentMasterModel.paymentAmount}" />
</p:column>
<p:column selectionMode="multiple" headerText="Tax"></p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Deduction" />
</f:facet>
<f:facet name="output">
<p:inputText id="dedId" value="#{paymentSlip.deductionAmt}" />
</f:facet>
</p:column>
</p:dataTable>
Problem is that deduction amount is set in the model class but is not displayed in data table.My managed bean code is like this.
Managed bean:
public void addAmt(SelectEvent event) {
ExamPaymentSlipModel obj =(ExamOfficialModel)event.getObject();
for (ExamPaymentSlipModel examPaymentSlipModel : tempList) {
if (obj.equals(examPaymentSlipModel)) {
examPaymentSlipModel.setDeductionAmount((15*examPaymentSlipModel.getOffPaymentMasterModel().getPaymentAmount())/100);
}
}
}
How can i display the amount ? Can any one help with this.

Using two actions on a single checkbox event

I am having problems while trying to render a pageblocksection in visualforce. The code that i have used is as given below.
<apex:pageBlockSection title="My Content Section" columns="2">
<apex:pageBlockSectionItem>
<apex:outputLabel value="Account Site"/>
<apex:outputPanel>
<apex:inputText value="{!account.site}" id="account__site"
onclick="changefont(this)">
<apex:actionSupport event="onclick"
rerender="thePageBlock" status="Status"/>
</apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
Here I am trying to render a page block and a javascript function at the same time, i,e the checking of a checkbox(Account Site). The problem here is when i try to execute the changefont(this) function in the onclick of apex:inputText and then try to render "thePageblock" in event="onclick" of apex:actionSupport the rendering does not take place. Is there a problem with my code or should i do this a different way.
Thanks..
Try calling your Javascript function from the onsubmit or oncomplete attribute of your apex:actionSupport tag:
<apex:inputText value="{!account.site}" id="account__site" >
<apex:actionSupport event="onclick" rerender="thePageBlock"
status="Status" onsubmit="changefont(this)" />
</apex:inputText>

Resources