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
DJ 367DJ 367 

Lightning example is not working

Hello All,

I have made two lightning component my example is when I select Account Rating it should display related Account record, I am not sure where I am doing mistake , can someone please help me.
My code is below:
// class
public with sharing class AccountRating {
	
    @AuraEnabled
    public static List<Account> AccMethod(RatParam){
        return [select Id,name,site,Rating from Account where Rating = : RatParam];        
    }
}
Lightning Component:
<aura:component >
    
    <aura:attribute name ="Acc" type="Account" />
    
    <div class="demo-only" style="width: 30rem;">
      <article class="slds-tile">
        <h3 class="slds-tile__title slds-truncate" title="Account Name"><a href="javascript:void(0);">{!v.Acc.Name}</a></h3>
        <div class="slds-tile__detail">
          <dl class="slds-list_horizontal slds-wrap">
            <dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">Rating:</dt>
            <dd class="slds-item_detail slds-truncate" title="Description for first label">{!v.Acc.Rating}</dd>
            <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Site:</dt>
            <dd class="slds-item_detail slds-truncate" title="Description for second label">{!v.Acc.Site}</dd>
          </dl>
        </div>
      </article>
    </div>
</aura:component>

Component: 2
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute Name = "Rating" type = "List" />
    
    <div class="slds-form-element">
      <label class="slds-form-element__label" for="select-01">Select Label</label>
      <div class="slds-form-element__control">
        <div class="slds-select_container">
          <select class="slds-select" id="select-01">
            <option value="selVal">Please select</option>
            <option>Hot</option>
            <option>Warm</option>
            <option>Cold</option>
          </select>
        </div>
      </div>
    </div>
    
    <aura:iteration items = "{!Rating}" var = "Rat" >
        <c:AccountRatingTile Acc = "{!Rat}" />
    </aura:iteration>
    
</aura:component>
Clientside Controller:
 
({
	AccRating : function(AccCom, event, helper) {
		var selValVal = AccCom.find("v.selVal");
        console.log(selValVal);
        var RatParam = selValVal.get("v.value");
        
        var searchAction =AccCom.get("c.AccMethod");
         searchAction.setParam("RatParam",RatParam);
        searchAction.setCallback(this,function(resp){
            AccCom.set("v.Acc",resp.getReturnValue());
            
        });
        $A.enqueueAction(searchAction);
	}
})

App:
<aura:application extends = "force:slds">
    <c:AccountRating />
</aura:application>


​Thanks.
 
Best Answer chosen by DJ 367
Sampath SuranjiSampath Suranji
Hi,
Try like below,
AccountRating cmp,
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="AccountRating" >
    <aura:attribute Name = "Ratings" type = "List" />
    <aura:attribute name="selectedVal" type="string"/>
    
    
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="select-01">Select Label</label>
        <div class="slds-form-element__control">
            <div class="slds-select_container">
                <ui:inputselect aura:id="input_select" class="slds-select" change="{!c.AccRating}" value="{!v.selectedVal}">
                    <ui:inputselectoption text="--select--" label="" />
                    <ui:inputselectoption text="Hot" label="" />
                    <ui:inputselectoption text="Warm" label="" />
                    <ui:inputselectoption text="Cold" label="" />
                    
                </ui:inputselect>
                
            </div>
        </div>
    </div>
    
    <div id="divAccDetails">
        <aura:iteration items = "{!v.Ratings}" var ="Rat" >
            <c:AccountRatingTile Acc="{!Rat}" />
        </aura:iteration>
    </div>
    
    
</aura:component>
controller
({
    AccRating : function(component, event, helper)  {
        var selValVal = component.get("v.selectedVal");
        
        var searchAction =component.get("c.AccMethod");
        searchAction.setParam("RatParam",selValVal);
        searchAction.setCallback(this,function(resp){
            var s = resp.getState(); 
            if(s == "SUCCESS"){
                component.set("v.Ratings",resp.getReturnValue());
                
            }
            
            
        });
        $A.enqueueAction(searchAction);
    }
})
AccountRatingTile
<aura:component access="global">
    
    <aura:attribute name ="Acc" type="Account" />
    
    
    <div class="demo-only" style="width: 30rem;">
      <article class="slds-tile">
        <h3 class="slds-tile__title slds-truncate" title="Account Name"><a href="javascript:void(0);">{!v.Acc.Name}</a></h3>
        <div class="slds-tile__detail">
          <dl class="slds-list_horizontal slds-wrap">
            <dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">Rating:</dt>
            <dd class="slds-item_detail slds-truncate" title="Description for first label">{!v.Acc.Rating}</dd>
            <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Site:</dt>
            <dd class="slds-item_detail slds-truncate" title="Description for second label">{!v.Acc.Site}</dd>
          </dl>
        </div>
      </article>
    </div>
</aura:component>

regards


 

All Answers

Sampath SuranjiSampath Suranji
Hi,
Try like below,
AccountRating cmp,
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="AccountRating" >
    <aura:attribute Name = "Ratings" type = "List" />
    <aura:attribute name="selectedVal" type="string"/>
    
    
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="select-01">Select Label</label>
        <div class="slds-form-element__control">
            <div class="slds-select_container">
                <ui:inputselect aura:id="input_select" class="slds-select" change="{!c.AccRating}" value="{!v.selectedVal}">
                    <ui:inputselectoption text="--select--" label="" />
                    <ui:inputselectoption text="Hot" label="" />
                    <ui:inputselectoption text="Warm" label="" />
                    <ui:inputselectoption text="Cold" label="" />
                    
                </ui:inputselect>
                
            </div>
        </div>
    </div>
    
    <div id="divAccDetails">
        <aura:iteration items = "{!v.Ratings}" var ="Rat" >
            <c:AccountRatingTile Acc="{!Rat}" />
        </aura:iteration>
    </div>
    
    
</aura:component>
controller
({
    AccRating : function(component, event, helper)  {
        var selValVal = component.get("v.selectedVal");
        
        var searchAction =component.get("c.AccMethod");
        searchAction.setParam("RatParam",selValVal);
        searchAction.setCallback(this,function(resp){
            var s = resp.getState(); 
            if(s == "SUCCESS"){
                component.set("v.Ratings",resp.getReturnValue());
                
            }
            
            
        });
        $A.enqueueAction(searchAction);
    }
})
AccountRatingTile
<aura:component access="global">
    
    <aura:attribute name ="Acc" type="Account" />
    
    
    <div class="demo-only" style="width: 30rem;">
      <article class="slds-tile">
        <h3 class="slds-tile__title slds-truncate" title="Account Name"><a href="javascript:void(0);">{!v.Acc.Name}</a></h3>
        <div class="slds-tile__detail">
          <dl class="slds-list_horizontal slds-wrap">
            <dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">Rating:</dt>
            <dd class="slds-item_detail slds-truncate" title="Description for first label">{!v.Acc.Rating}</dd>
            <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Site:</dt>
            <dd class="slds-item_detail slds-truncate" title="Description for second label">{!v.Acc.Site}</dd>
          </dl>
        </div>
      </article>
    </div>
</aura:component>

regards


 
This was selected as the best answer
v varaprasadv varaprasad
Hi DJ,

Check once below sample code :

 
================Controller=================

public class fetchPicklistOptsController {
    @AuraEnabled
    public static List < String > getselectOptions(sObject objObject, string fld) {
        system.debug('objObject --->' + objObject);
        system.debug('fld --->' + fld);
        List < String > allOpts = new list < String > ();
        // Get the object type of the SObject.
        Schema.sObjectType objType = objObject.getSObjectType();
        
        // Describe the SObject using its object type.
        Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
        
        // Get a map of fields for the SObject
        map < String, Schema.SObjectField > fieldMap = objDescribe.fields.getMap();
        
        // Get the list of picklist values for this field.
        list < Schema.PicklistEntry > values =
            fieldMap.get(fld).getDescribe().getPickListValues();
        
        // Add these values to the selectoption list.
        for (Schema.PicklistEntry a: values) {
            allOpts.add(a.getValue());
        }
        system.debug('allOpts ---->' + allOpts);
        allOpts.sort();
        return allOpts;
    }
    
    @AuraEnabled
    public static list<account> getAccs(string rating){        
           system.debug('==Server call'+rating); 
        list<account> lstAccs = [select id,name,phone,Rating from account where rating =:rating ];
        system.debug('==lstAccs=='+lstAccs);
        return lstAccs;
        
    }
}

==============Component==========

<!-- Component name : DisplayDatabasedOnPicklists -->

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global"
                controller="fetchPicklistOptsController">    
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="objInfo" type="account" default="{sobjectType : 'Account'}" />
    
    <aura:attribute name="accountList" type="list" />
    
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="select-01">Select Label</label>
        <div class="slds-select_container">
            <ui:inputSelect  aura:id="rating" class="slds-select"  change="{!c.onPicklistChange}"/>
        </div>
    </div>   
    
     <div class="slds-box slds-theme_default">
        <aura:iteration items="{!v.accountList}" var="obj">
            <b>Account Information</b>
            <p>Name :  {!obj.Name}</p>
            <p>Phone : {!obj.Phone}</p>   
            <p>Rating :{!obj.Rating} </p>
            <br></br>
        </aura:iteration>       
    </div>
    
</aura:component>

===================JS Controller===================

({
    doInit: function(component, event, helper) {
        helper.fetchPickListVal(component, 'Rating', 'rating');
    },
    onPicklistChange: function(component, event, helper) {
        // get the value of select option
        alert(event.getSource().get("v.value"));
        var ratng = event.getSource().get("v.value");
        console.log("==ratng="+ratng);
        
        var action = component.get("c.getAccs");
        action.setParams({  rating : ratng  });
        action.setCallback(this, function(response){
            var status = response.getState();
            alert('==status=='+status);
            if (status === "SUCCESS") {
                var storeResponse = response.getReturnValue();                
                 console.log(storeResponse);
               // set current user information on userInfo attribute
                component.set("v.accountList", storeResponse);
            }            
        });
		$A.enqueueAction(action);
    },
})
 
 
 ====================Js Helper================
 
 ({
    fetchPickListVal: function(component, fieldName, elementId) {
        var action = component.get("c.getselectOptions");
        action.setParams({
            "objObject": component.get("v.objInfo"),
            "fld": fieldName
        });
        var opts = [];
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
                var allValues = response.getReturnValue();
 
                if (allValues != undefined && allValues.length > 0) {
                    opts.push({
                        class: "optionClass",
                        label: "--- None ---",
                        value: ""
                    });
                }
                for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        class: "optionClass",
                        label: allValues[i],
                        value: allValues[i]
                    });
                }
                component.find(elementId).set("v.options", opts);
            }
        });
        $A.enqueueAction(action);
    },
})
 
 
 =======================App================
 
 <!--  DisplayDatabasedOnPicklistsAPP  -->
<aura:application extends='force:slds'>
    <c:DisplayDatabasedOnPicklists />
	
</aura:application>


============================================


Hope this helps you!
If my answer helps resolve your query, please mark it as the 'Best Answer' & upvote it to benefit others.

Thanks
Varaprasad
@For  Support: varaprasad4sfdc@gmail.com
Blog: http://salesforceprasad.blogspot.com/