You need to sign in to do that
Don't have an account?
Sandesh Vishwakarma 9
Hello Everyone , I hope you all are doing absolutely fine
Here is the scenario where I am seeking help from our community,
I have 10 radio group buttons now then what i need to do is on a click of a perticular button lets say 'SHOW RESULT' all the results should be shown of above all 10 radio groups WITH THEIR LABELS (eg. = Do you use credit card - Yes) that way. then on all those 10 results i want to create a drag and drop where i can only choose 5 of them. Then i need to save all these 5 into our lead object fileds.
Please help me out.
Thanks in advance
[I have done till creating radio groups and storing them into a list and theniterated over the list]
I have 10 radio group buttons now then what i need to do is on a click of a perticular button lets say 'SHOW RESULT' all the results should be shown of above all 10 radio groups WITH THEIR LABELS (eg. = Do you use credit card - Yes) that way. then on all those 10 results i want to create a drag and drop where i can only choose 5 of them. Then i need to save all these 5 into our lead object fileds.
Please help me out.
Thanks in advance
[I have done till creating radio groups and storing them into a list and theniterated over the list]
The developer community recommends providing any attempts/code you've started, any errors you're getting, or where exactly you're struggling in achieving this while posting a question.
[Its is working fine till selecting radio button values for all and showing them on the click of PRIORITIZE ]
But (** Next what i want is all the result shown there I want to create 3 deop boxes where i could only select three of the results only**)
(** So that I can save those 3 into a objects fields**)
Thanks in advance. Much needed help
Aura Controller :-
<aura:component>
<ltng:require styles="{!$Resource.cssfile}"/>
<aura:attribute name="listOne" type="List" default="['CONVENIENCE','COST-EFFECTIVENESS', 'YIELD']"/>
<aura:attribute name="listTwo" type="List" default="['CREDIT CARDS','DEBT RESTRUCTURE', 'ACCESS TO LIQUIDITY']"/>
<aura:attribute name="listThree" type="List" default="['EMERGENCY FUND','MAJOR PURCHASES ', 'RETIREMENT']"/>
<aura:attribute name="selectedList" type="List"/>
<aura:attribute name="value" type="String" default="option1"/>
<aura:attribute name="buttonSelected" type="String" />
<div>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-12">
<div><lightning:button variant="{!v.buttonSelected == 'A' ? 'brand':'neutral'}" label="BANK" name="A" onclick="{!c.buttonHandler}"/> </div>
<div><lightning:button variant="{!v.buttonSelected == 'B' ? 'brand':'neutral'}" label="BORROW" name="B" onclick="{!c.buttonHandler}"/> </div>
<div><lightning:button variant="{!v.buttonSelected == 'C' ? 'brand':'neutral'}" label="PLAN" name="C" onclick="{!c.buttonHandler}"/> </div>
<div><lightning:button variant="{!v.buttonSelected == 'D' ? 'brand':'neutral'}" label="PRIORITIZE" name="D" onclick="{!c.buttonHandler}"/> </div>
</div>
<div class="slds-col slds-size_3-of-12">
<aura:if isTrue="{!v.buttonSelected == 'A'}">
<table>
<thead>
<tr>
<th></th>
<th>Yes</th>
<th>No</th>
<th>Don't Know</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.listOne}" var="item">
<tr>
<td><strong>{!item}</strong></td>
<td><input type="radio" name="{!item}" class="yes" value="Yes" onchange="{!c.radioHandler}"/></td>
<td><input type="radio" name="{!item}" value="No" onchange="{!c.radioHandler}"/></td>
<td><input type="radio" name="{!item}" value="Don't Know" onchange="{!c.radioHandler}"/></td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:if>
<aura:if isTrue="{!v.buttonSelected == 'B'}">
<table>
<thead>
<tr>
<th></th>
<th>Yes</th>
<th>No</th>
<th>Don't Know</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.listTwo}" var="item">
<tr>
<td><strong>{!item}</strong></td>
<td><input type="radio" name="{!item}" value="Yes" onchange="{!c.radioHandler}"/></td>
<td><input type="radio" name="{!item}" value="No" onchange="{!c.radioHandler}"/></td>
<td><input type="radio" name="{!item}" value="Don't Know" onchange="{!c.radioHandler}"/></td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:if>
<aura:if isTrue="{!v.buttonSelected == 'C'}">
<table>
<thead>
<tr>
<th></th>
<th>Yes</th>
<th>No</th>
<th>Don't Know</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.listThree}" var="item">
<tr>
<td><strong>{!item}</strong></td>
<td><input type="radio" name="{!item}" value="Yes" onchange="{!c.radioHandler}"/></td>
<td><input type="radio" name="{!item}" value="No" onchange="{!c.radioHandler}"/></td>
<td><input type="radio" name="{!item}" value="Don't Know" onchange="{!c.radioHandler}"/></td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:if>
</div>
</div>
<aura:if isTrue="{!v.buttonSelected == 'D'}">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_4-of-12">
<h3><strong>Selected List</strong></h3>
<!-- <h3><strong>Selected List</strong></h3> -->
<aura:iteration items="{!v.selectedList}" var="item">
<div>{!item.label} - {!item.value}</div>
</aura:iteration>
</div>
</div>
</aura:if>
</div>
</aura:component>
******************************************************************************************************************************************
JS Controller :-
({
buttonHandler:function(component, event, helper) {
var buttonName = event.getSource().get("v.name");
component.set("v.buttonSelected", buttonName)
},
radioHandler:function(component, event, helper) {
var radioValue = event.target.value;
console.log(radioValue);
var radioName = event.target.name;
console.log(radioName);
var list = {label:radioName, value:radioValue}
console.log(list);
var selectedList = component.get("v.selectedList")
console.log(selectedList);
var updatedList = helper.upsert(selectedList, list)
console.log(updatedList)
component.set("v.selectedList", updatedList)
},
onDragStart :function(form,event) {
alert(event.target.id);
alert(event.dataTransfer.setData('text/plain', event.target.id));
event.currentTarget.style.backgroundColor = 'yellow';
},
onDragOver : function (from,event) {
event.preventDefault();
},
onDrop:function (form,event) {
const id = event.dataTransfer.getData('text');
console.log(id);
const draggableElement = document.getElementById(id);
const dropzone = event.target;
dropzone.appendChild(draggableElement);
event.dataTransfer.clearData();
},
});
*************************************************************************************************************************
JS Helper :-
({
upsert : function(array, item) {
const i = array.findIndex(_item => _item.label === item.label);
console.log(i);
if (i > -1){
array[i] = item; // (2)
} else {
array.push(item);
}
return array
}
})
****************************************************************************************************************************