You need to sign in to do that
Don't have an account?
Jonathan Wolff 7
Problem with search component
Hello, I have a object calles Mediatek/en
I tried to build a search component to find records in the List. When I inserted it and tried it I got an error message. How can I change the code so the error will not occure. I will give you the code sample and the screenshots.
Error:
Code:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<!-- handlers-->
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<!-- attributes -->
<aura:attribute name="showSearchResults" type="Boolean" default="false"/>
<aura:attribute name="searchKey" type="String"/>
<aura:attribute name="mediathekList" type="List" default="Mediathek[]"/>
<aura:attribute name="mediathekColumns" type="List"/>
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="9">
<lightning:input name="searchKey" placeholder="Enter search key" value="{!v.searchKey}"/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<lightning:button variant="brand" label="Search" title="Search" onclick="{!c.search}" class="customButton"/>
</lightning:layoutItem>
</lightning:layout>
<aura:if isTrue="{!v.showSearchResults}">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
Mediathek
<lightning:datatable keyField="id"
data="{!v.mediathekList}"
columns="{!v.mediathekColumns}"
hideCheckboxColumn="true"/>
</lightning:layoutItem>
</lightning:layout>
</aura:if>
</aura:component>
Controller
({
init: function (component, event, helper){
component.set('v.mediathekColumns', [
{label: 'Mediatheken Name', fieldName: 'Name', type: 'url',
typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
]);
},
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({ searchKey : component.get("v.searchKey") });
// 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);
}
})
DESIGN
.THIS .customButton{
margin-top: 19px;
}
.cSuchleiste_Media{
height: 50px;
background-color:#ffffff;
}
I tried to build a search component to find records in the List. When I inserted it and tried it I got an error message. How can I change the code so the error will not occure. I will give you the code sample and the screenshots.
Error:
Code:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<!-- handlers-->
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<!-- attributes -->
<aura:attribute name="showSearchResults" type="Boolean" default="false"/>
<aura:attribute name="searchKey" type="String"/>
<aura:attribute name="mediathekList" type="List" default="Mediathek[]"/>
<aura:attribute name="mediathekColumns" type="List"/>
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="9">
<lightning:input name="searchKey" placeholder="Enter search key" value="{!v.searchKey}"/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<lightning:button variant="brand" label="Search" title="Search" onclick="{!c.search}" class="customButton"/>
</lightning:layoutItem>
</lightning:layout>
<aura:if isTrue="{!v.showSearchResults}">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
Mediathek
<lightning:datatable keyField="id"
data="{!v.mediathekList}"
columns="{!v.mediathekColumns}"
hideCheckboxColumn="true"/>
</lightning:layoutItem>
</lightning:layout>
</aura:if>
</aura:component>
Controller
({
init: function (component, event, helper){
component.set('v.mediathekColumns', [
{label: 'Mediatheken Name', fieldName: 'Name', type: 'url',
typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
]);
},
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({ searchKey : component.get("v.searchKey") });
// 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);
}
})
DESIGN
.THIS .customButton{
margin-top: 19px;
}
.cSuchleiste_Media{
height: 50px;
background-color:#ffffff;
}
All Answers
Hi Jonathan,
Mistakenly you forgot to add your apex class name into aura so please add that first and if you didn't create apex class for this component please create it
first and then include the class name and associated function into it.
If you find your Solution then mark this as the best answer.
Thank you!
Regards
Suraj Tripathi