1

I am building a lightning component that is supposed to show a record based on the user's language. I've gotten this part to work but I haven't been able to figure out how to compare a component attribute to a value of a Sobject record. If I set the component Property Editor value for Subject to "value1", then it should only show DynamicContent__c records where field Subject__c = "value1". How do I achieve this?

Apex Controller:

public class DynamicContentController {

public String currentLanguage {get; set;}

public DynamicContentController() {
    // get user’s language
    currentLanguage = UserInfo.getLanguage();
}

@AuraEnabled
public static List<DynamicContent__c> getDynamicContent(User communityUser) {

    // get user’s language
    String currentLanguage = UserInfo.getLanguage();

    // return content matching user's language
    return [SELECT Id, Content__c, Language__c, Subject__c FROM DynamicContent__c WHERE Language__c = :currentLanguage];
}

}

Lightning Component:

<aura:component controller="DynamicContentController" implements="forceCommunity:availableForAllPageTypes">   

<aura:attribute name="section" type="String" access="global" />
<aura:attribute name="subject" type="String" access="global" />
<aura:attribute name="contents" type="DynamicContent__c[]" />
<aura:handler name="init" value="{!this}" action="{!c.getContents}"/>   

<div class="container">
    <aura:iteration items="{!v.DynamicContent__c}" var="c">
        <p>{!c.Content__c}</p>
    </aura:iteration>
</div> 

</aura:component>

Lightning Component Controller:

({
getContents : function(component, event, helper) {        
    var action = component.get("c.getDynamicContent");
    action.setCallback(this, function(data) {
        component.set("v.DynamicContent__c", data.getReturnValue());
    });
    $A.enqueueAction(action);                
}
})

Lightning Component Design:

<design:component>
    <design:attribute name="section" label="Section" description="Section value" />
    <design:attribute name="subject" label="Subject" datasource="value1,value2,value3" default="value1" />
</design:component>
1

The value that User chooses in the design file will be available as an attribute .You will pass only that value which user chooses .

Here is how your controller.js will look like

({
getContents : function(component, event, helper) { 
   var selectedSubject = component.get("v.subject"); //Observe how i get value out of the attribute which is bound to design file     
   var action = component.get("c.getDynamicContent");
   action.setParams({
            "selectedSubject": selectedSubject 
        });
   action.setCallback(this, function(data) {
    component.set("v.DynamicContent__c", data.getReturnValue());
  });
   $A.enqueueAction(action);                
  }
})

Your server code will have parameter name same as one which is defined in your action

@AuraEnabled
public static List<DynamicContent__c> getDynamicContent(String selectedSubject){

// get user’s language
String currentLanguage = UserInfo.getLanguage();

// return content matching user's language
return [SELECT Id, Content__c, Language__c, Subject__c FROM    DynamicContent__c WHERE Language__c = :currentLanguage and Subject__c =:selectedSubject];
 }
1

So you are saying you want your component's subject attribute to act as a filter on the displayed items? There are a few ways you might do that.

You could use an aura:if to ensure only matching records are placed in the DOM, e.g.:

<aura:iteration items="{!v.DynamicContent__c}" var="item">
    <aura:if isTrue="{!item.Subject__c == v.subject}">
        <p>{!item.Content__c}</p>
    </aura:if>
</aura:iteration>

You could also use styles:

<aura:iteration items="{!v.DynamicContent__c}" var="item">
    <p class="{!if(item.Subject__c == v.subject,'','hideThisOne')}">
        {!item.Content__c}
    </p>
</aura:iteration>

And then your style block would include .THIS .hideThisOne {display:none;}. Now all your elements are in the DOM but only the matching ones are shown.

A third approach is to filter the array of objects in JS and send only the relevant ones to the view. Depending on the size of the data set there are reasons one approach may be better than others.

Note I replaced your iteration variable name of c with item because it could lead to some ambiguities. Normally c is reserved to refer to the component itself, so when you see {!c.something} it suggests you are pointing to a controller method rather than properties of a data object.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.