function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sandesh Vishwakarma 9Sandesh 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]
 
PriyaPriya (Salesforce Developers) 

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.


 
Sandesh Vishwakarma 9Sandesh Vishwakarma 9
Hii Priya I understand that , thanks here is my till now code :
[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
    }
})

****************************************************************************************************************************