1

In one section in the lightning grid I display text area fields for which I want to install a search field to search for the text that appears within the text area fields:

<aura:component controller="TestLightningComponent" implements="force:lightningQuickAction,flexipage:availableForAllPageTypes,lightning:actionOverride,force:hasRecordId,force:hasSObjectName,force:appHostable" access="global" >   

<aura:attribute name="EmailObject" type="Email_Object__c"/>
<aura:attribute name="EmailObjectId" type="String"/>
<aura:attribute name="EmailObjects" type="Email_Object__c[]"/>
<aura:attribute name="startId" type="string"/>
<aura:attribute name="parentId" type="string"/>
<aura:attribute name="recordId" type="String" description="Record to which the files should be attached" />
<aura:attribute name="searchText" type="String" default=""/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="slds-grid slds-gutters_large">
    <div class="slds-col outline">
        <lightning:layout >
            <div class="slds-col slds-size_1-of-3 slds-align-bottom">   
                <lightning:select aura:id="optionValue" name="EmailObjects" label="EmailObjects">
                    <option value="" text="New"></option>
                    <aura:iteration items="{!v.EmailObjects}" var="obj">
                        <option value="{!obj.Id}" text="{!obj.Name}"></option>
                    </aura:iteration>
                </lightning:select>
            </div>
            &nbsp;
            <div class="slds-col slds-size_1-of-3 slds-align-bottom">
                <ui:button aura:id="button" buttonTitle="Get Email Object" class="button" label="Get Email Object" press="{!c.EmailObject}"/>
            </div>
        </lightning:layout>     
    </div> 
</div>
<br/>
<div class="slds-grid slds-gutters_large">
    <div class="slds-col slds-p-horizontal_medium slds-size_1-of-5 body">
        <lightning:tabset >
            <lightning:tab label="Bricks">           
                <div class="slds-form-element slds-lookup" data-select="single">
                    <div class="slds-form-element__control">
                        <div class="slds-input-has-icon slds-input-has-icon--right">
                            <lightning:buttonIcon iconName="utility:search" variant="bare" onclick="{! c.handleClick }" alternativeText="Search" class="slds-input__icon" />
                            <ui:inputText value="{!v.searchText}" class="slds-lookup__search-input slds-input" placeholder="Search" />
                        </div>
                    </div>
                </div>            
                <br/>
                <br/>
                <div class="slds-scrollable_y">
                    <div class="slds-text-longform innerbody">
                        <div class="div1" id="div1" ondrop="{!c.drop}" ondragover="{!c.allowDrop}">
                            <p class="box slds-truncate" draggable="true" ondragstart="{!c.drag}" id="drag1">
                                <lightning:textarea name="Component1" label="Component1" value="{!v.EmailObject.Component_1__c}" maxlength="100" disabled="true"/> 
                                <lightning:helptext content="{!v.EmailObject.Component_1__c}" />
                            </p>
                            <br/>
                        </div>
                        <div class="div2 item" id="div2" ondrop="{!c.drop}" ondragover="{!c.allowDrop}">
                            <p class="box slds-truncate" draggable="true" ondragstart="{!c.drag}" id="drag2">
                                <lightning:textarea name="Component2" label="Component2" value="{!v.EmailObject.Component_2__c}" maxlength="100" disabled="true"/> 
                                <lightning:helptext content="{!v.EmailObject.Component_2__c}" />
                            </p>
                            <br/>
                        </div>               
                        <div class="div3 item" id="div3" ondrop="{!c.drop}" ondragover="{!c.allowDrop}">
                            <p class="box slds-truncate" draggable="true" ondragstart="{!c.drag}" id="drag3">
                                <lightning:textarea name="Component3" label="Component3" value="{!v.EmailObject.Component_3__c}" maxlength="100" disabled="true"/>  
                                <lightning:helptext content="{!v.EmailObject.Component_3__c}" />
                            </p>
                            <br/>
                        </div>                
                        <div class="div4 item" id="div4" ondrop="{!c.drop}" ondragover="{!c.allowDrop}">
                            <p class="box slds-truncate" draggable="true" ondragstart="{!c.drag}" id="drag4">
                                <lightning:textarea name="Component4" label="Component4" value="{!v.EmailObject.Component_4__c}" maxlength="100" disabled="true"/> 
                                <lightning:helptext content="{!v.EmailObject.Component_4__c}" />
                            </p>
                            <br/>
                        </div>
                    </div>
                </div>
            </lightning:tab>
            <lightning:tab label="Other">
            </lightning:tab>
        </lightning:tabset>
    </div> 
</div>

js Controller

({

doInit : function(component, event, helper) {
    helper.getEmailTemplates(component, event);
    helper.getCases(component, event);
    //helper.getEmailObject(component, event);
    helper.getEmailObjects(component, event);
    helper.getAttachments(component, event);
},

EmailObject : function(component, event, helper) {
    //component.find("optionValue").get("v.value");
    helper.getEmailObject(component, event);
},

handleClick : function(component, event, helper) {
    var searchText = component.get('v.searchText');
    var recordId = "a000N000014PsjpQAC";
    var action = component.get('c.searchForIds');
    action.setParams({
        searchText: searchText,
        recordId: recordId
    });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === 'SUCCESS') {
            //var ids = response.getReturnValue();
            //console.log(ids);
            component.set("v.EmailObject", response.getReturnValue())
        }
    });

    $A.enqueueAction(action);
},

})

js helper

({

getEmailObject : function(component, event) {
    var EmailObject = component.get('c.getEmailObject');
    EmailObject.setParams({
        EmailObjectId : component.find("optionValue").get("v.value")
    });

    EmailObject.setCallback(this, function(objectresults){
        var constate = objectresults.getState();
        if(constate === "SUCCESS"){
            component.set("v.EmailObject", objectresults.getReturnValue());
        }
    });
    $A.enqueueAction(EmailObject);        
},

getEmailObjects : function(component, event) {        
    var objaction = component.get("c.getEmailObjects");
    objaction.setCallback(this, function(objresponse){
        var objstate = objresponse.getState();
        if(objstate === "SUCCESS"){
            component.set("v.EmailObjects", objresponse.getReturnValue());
        }
    });
    $A.enqueueAction(objaction);
},

})

Apex Controller

public class TestLightningComponent {

@AuraEnabled
public static Email_Object__c getEmailObject(String EmailObjectId){
    Email_Object__c tempobj = new Email_Object__c();
    tempobj = [Select Id, Anrede__c, Component_1__c, Component_2__c, Component_3__c, Component_4__c, Contact__c, Email_Template__c, Name, Gruss__c, Text_1__c, Text_2__c, Text_3__c, Text_4__c, Verfasser__c from Email_Object__c where Id =:EmailObjectId];
    return tempobj;
}

@AuraEnabled
public static List<Email_Object__c> getEmailObjects(){
    return [Select Id, Anrede__c, Component_1__c, Component_2__c, Component_3__c, Component_4__c, Contact__c, Email_Template__c, Name, Gruss__c, Text_1__c, Text_2__c, Text_3__c, Text_4__c, Verfasser__c from Email_Object__c order by Name];
}

public static Email_Object__c searchForIds(String searchText, String recordId) {
    Email_Object__c tempObject = [Select Component_1__c, Component_2__c, Component_3__c, Component_4__c from Email_Object__c where Id=:recordId];
    Boolean resultComp1 = tempObject.Component_1__c.contains(searchText);
    Boolean resultComp2 = tempObject.Component_2__c.contains(searchText);
    Boolean resultComp3 = tempObject.Component_3__c.contains(searchText);
    Boolean resultComp4 = tempObject.Component_4__c.contains(searchText);

    Email_Object__c newObject = new Email_Object__c(); 
    if (resultComp1 == true){
        newObject.Component_1__c = tempObject.Component_1__c;
    }
    if (resultComp2 == true){
        newObject.Component_2__c = tempObject.Component_2__c;
    }
    if (resultComp3 == true){
        newObject.Component_3__c = tempObject.Component_3__c;
    }
    if (resultComp4 == true){
        newObject.Component_4__c = tempObject.Component_4__c;
    }
    return newObject;
}  

}

So basically the searchText String and the recordId get passed on to the controller, and in apex the EmailObject that is displayed gets put together anew with only the components that contain the searchText. Then this new EmailObject replaces the one in the component.

Here my question: when I set the EmailObject in handleClick, why does the page then not rerender?

0

From the documentation on naming convention for the client side helper function and server side @auraEnabled method they will need to be unique.

enter image description here

Hence lets rename your helper methods .Try the below

 ({

 getEmailObjectHelper : function(component, event) {
   var EmailObject = component.get('c.getEmailObject');
   EmailObject.setParams({
     EmailObjectId : component.find("optionValue").get("v.value")
  });

  EmailObject.setCallback(this, function(objectresults){
    var constate = objectresults.getState();
    if(constate === "SUCCESS"){
        component.set("v.EmailObject", objectresults.getReturnValue());
    }
  });
  $A.enqueueAction(EmailObject);        
 },

   getEmailObjectsHelper : function(component, event) {        
      var objaction = component.get("c.getEmailObjects");
      objaction.setCallback(this, function(objresponse){
      var objstate = objresponse.getState();
      if(objstate === "SUCCESS"){
        component.set("v.EmailObjects", objresponse.getReturnValue());
      }
     });
      $A.enqueueAction(objaction);
    },
   })

Also carefully change the names in controller JS file .

| improve this answer | |
  • I did this but that did not solve the matter yet... – user40501 Jan 22 '18 at 5:42

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.