Apex Code Development You need to sign in to do that
Don't have an account?
Jonathan Wolff 7 Add reset button to search aura component
Hello, i have a component that searches inputs in a custom object. I want a button method that resets the component, so that it empties the search bar and hides the results of the previous search. Could you help me with the implementation
Controller
Helper
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="MediathekSearchController">
<!-- handlers-->
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<!-- <aura:handler name="change" value="{!v.searchKey}" action="{!c.valueChangeValidation}"/> -->
<!-- attributes -->
<aura:attribute name="showSearchResults" type="Boolean" default="false"/>
<aura:attribute name="searchKey" type="String" default=""/>
<aura:attribute name="mediathekList" type="List" default="Mediathek[]"/>
<aura:attribute name="mediathekColumns" type="List"/>
<aura:attribute name="TypValue" type="String" default="Alle"/>
<aura:attribute name="ZielgruppeValue" type="String" default="Alle"/>
<aura:attribute name="ThemaValue" type="String" default="Alle"/>
<aura:attribute name="tooltip" type="boolean" default="false" />
<div class= "slds-box slds-p-top_none slds-p-bottom_none slds-p-right_none">
<div class="slds-grid slds-wrap" >
<div class="slds-size_12-of-12 ">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="7">
<lightning:input aura:id="inputField" name="searchKey" placeholder="Bitte geben Sie mindestens 2 Buchstaben ein, um zu suchen" value="{!v.searchKey}" onkeyup="{!c.search}" messageWhenBadInput="Es müssen mindestens 2 Zeichen eingegeben werden"/>
</lightning:layoutItem>
<lightning:layoutItem size="1"/>
<lightning:layoutItem size="1">
<lightning:button variant="brand" label="Suchen" title="Search" onclick="{!c.search}" class="customButton" />
</lightning:layoutItem>
<lightning:layoutItem size="3"/>
<lightning:layoutItem size="3">
<lightning:select aura:id="TypValue" name="Typ" label="Typ" required="false" value="{!v.TypValue}">
<option value="Alle">Alle</option>
<option value="Formular">Formular</option>
<option value="Merkblatt">Merkblatt</option>
<option value="Flyer">Flyer</option>
<option value="Infobroschüre">Infobroschüre</option>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem size="1"/>
<lightning:layoutItem size="3">
<lightning:select aura:id="ThemaValue" name="Thema" label="Thema" required="false" value="{!v.ThemaValue}">
<option value="Alle">Alle</option>
<option value="Altersvorsorge">Altersvorsorge</option>
<option value="AOK">AOK</option>
<option value="Beratungstag">Beratungstag</option>
<option value="Berufsunfähigkeit">Berufsunfähigkeit</option>
<option value="Berufsunfähigkeit privat">Berufsunfähigkeit privat</option>
<option value="bKV">bKV</option>
<option value="BRSG">BRSG</option>
<option value="Direktversicherung">Direktversicherung</option>
<option value="Direktversicherung, ergänzende Berufsunfähigkeit, Berufsunfähigkeit">Direktversicherung, ergänzende Berufsunfähigkeit, Berufsunfähigkeit</option>
<option value="Direktversicherung, Pensionsfonds">Direktversicherung, Pensionsfonds</option>
<option value="Direktversicherung, Pensionskasse">Direktversicherung, Pensionskasse</option>
<option value="Direktversicherung, Pensionskasse, Pensionsfonds">Direktversicherung, Pensionskasse, Pensionsfonds</option>
<option value="englisches Material">englisches Material</option>
<option value="FID FIR">FID FIR</option>
<option value="Firmenversicherung (Gruppenvertrag)">Firmenversicherung (Gruppenvertrag)</option>
<option value="Kundencall">Kundencall</option>
<option value="Lebensversicherung privat">Lebensversicherung privat</option>
<option value="Pensionsfonds">Pensionsfonds</option>
<option value="Pensionskasse">Pensionskasse</option>
<option value="Pensionszusage">Pensionszusage</option>
<option value="privat">privat</option>
<option value="PrivatRente, Schatzbrief Perspektive">PrivatRente, Schatzbrief Perspektive</option>
<option value="Produktinfo">Produktinfo</option>
<option value="rechtliche Unterlage">rechtliche Unterlage</option>
<option value="Riester">Riester</option>
<option value="Rückdeckungsversicherung FIR">Rückdeckungsversicherung FIR</option>
<option value="Unterstützungskasse">Unterstützungskasse</option>
<option value="Zeitwertkonto">Zeitwertkonto</option>
<option value="Zusatzbausteine">Zusatzbausteine</option>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem size="1"/>
<lightning:layoutItem size="3">
<lightning:select aura:id="ZielgruppeValue" name="Zielgruppe" label="Zielgruppe" required="false" value="{!v.ZielgruppeValue}">
<option value="Alle">Alle</option>
<option value="Arbeitgeber">Arbeitgeber</option>
<option value="Arbeitnehmer">Arbeitnehmer</option>
<option value="Berater">Berater</option>
<option value="Verband">Verband</option>
<option value="Arbeitgeber/Arbeitnehmer">Arbeitgeber/Arbeitnehmer</option>
<option value="Azubi">Azubi</option>
<option value="IGM">IGM</option>
</lightning:select>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
<div class="haha" style="margin-right:300px">
<aura:if isTrue="{!v.showSearchResults}">
<!-- <lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-large" size="12" >
<lightning:datatable keyField="id"
data="{!v.mediathekList}"
columns="{!v.mediathekColumns}"
hideCheckboxColumn="true"/>
</lightning:layoutItem>
</lightning:layout> -->
<table class="slds-table slds-table--bordered slds-table--striped slds-p-right_medium">
<thead>
<tr>
<th scope="col"><span class="slds-truncate">Bezeichnung</span></th>
<th scope="col"><span class="slds-truncate">Typ</span></th>
<th scope="col"><span class="slds-truncate">Zielgruppe</span></th>
<th scope="col"><span class="slds-truncate">Umfang</span></th>
<th scope="col"><span class="slds-truncate">CVID</span></th>
<!-- <th scope="col"><span class="slds-truncate">Vorschau</span></th> -->
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.mediathekList}" var="media">
<tr height="300px">
<td style="background-color:#F8F8F8; width:200px">{!media.Bezeichnung__c}</td>
<td style="background-color:#F8F8F8">{!media.Typ__c}</td>
<td style="background-color:#F8F8F8">{!media.Zielgruppe__c}</td>
<td style="background-color:#F8F8F8">{!media.Umfang__c}</td>
<td style="background-color:#F8F8F8"><img src="{!'/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=' + media.ContentVersionId__c}" alt="Keine Vorschau verfügbar"/></td>
<!-- <td style="background-color:#F8F8F8"> <lightning:fileCard fileId="{!media.ContentDocumentID__c}" description="{!media.Bezeichnung__c}"/> </td> -->
</tr>
</aura:iteration>
</tbody>
</table>
</aura:if>
</div>
</div>
</aura:component>
Controller
({
init: function (component, event, helper){
/* component.set('v.mediathekColumns', [
{label: 'Bezeichnung', fieldName: 'Bezeichnung_Search__c', type: 'url' , fixedWidth: 395,
typeAttributes: {label: { fieldName: 'Bezeichnung__c' }, target: '_blank'}
},
{label: 'Typ', fieldName: 'Typ__c', type: 'text', fixedWidth: 116,
},
{label: 'Zielgruppe', fieldName: 'Zielgruppe__c', type: 'text', fixedWidth: 116,
},
{label: 'Umfang', fieldName: 'Umfang__c', type: 'text', fixedWidth: 112,
},
{label: 'Preview', fieldName: 'Bild_Preview__c', type: 'image', fixedWidth: 300,
},
]); */
var action = component.get("c.getSearchResult");
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
var records =response.getReturnValue();
records.forEach(function(record){
record.BEZ = record.Bezeichnung__c;
});
component.set("v.mediathekList", records);
}
});
$A.enqueueAction(action);
},
search : function(component, event, helper) {
helper.getSearchResultsFromApex(component, event, helper);
component.set("v.showSearchResults",true);
}
})
({
init: function (component, event, helper){
component.set('v.mediathekColumns', [
{label: 'Bezeichnung', fieldName: 'Bezeichnung_Search__c', type: 'url' , fixedWidth: 395,
typeAttributes: {label: { fieldName: 'Bezeichnung__c' }, target: '_blank'}
},
{label: 'Thema', fieldName: 'Thema__c', type: 'text', fixedWidth: 112,
},
{label: 'Typ', fieldName: 'Typ__c', type: 'text', fixedWidth: 116,
},
{label: 'Zielgruppe', fieldName: 'Zielgruppe__c', type: 'text', fixedWidth: 116,
},
{label: 'Umfang', fieldName: 'Umfang__c', type: 'text', fixedWidth: 112,
},
]);
var action = component.get("c.getSearchResult");
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
var records =response.getReturnValue();
records.forEach(function(record){
record.BEZ = record.Bezeichnung__c;
});
component.set("v.mediathekList", records);
}
});
$A.enqueueAction(action);
},
search : function(component, event, helper) {
helper.getSearchResultsFromApex(component, event, helper);
component.set("v.showSearchResults",true);
},
})
Helper
({
getSearchResultsFromApex : function(component, event, helper){
var action = component.get("c.getSearchResult");
action.setParams({ TypValue : component.get("v.TypValue"), searchKey : component.get("v.searchKey"),
ZielgruppeValue : component.get("v.ZielgruppeValue"), ThemaValue : component.get("v.ThemaValue") });
// Create a callback that is executed after
// the server-side action returns
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var result = response.getReturnValue();
result.forEach(function(result){
result.Name = '/'+result.Id;
});
// SOSL will always return the list in the order they were queried
component.set("v.mediathekList",result[0]);
}
else if (state === "INCOMPLETE") {
// do something
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
}
})