
BoatSearchForm.cmp:-
- <aura:component controller="BoatSearchForm" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global" >
- <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
- <aura:attribute name="boatList" type="List" default="All type" />
- <aura:attribute name="selectedType" type="String" default="All type"/>
- <aura:attribute name="renderNew" type="Boolean" default="true"/>
- <aura:registerEvent name="launchNewBoatForm" type="c:launchNewBoatForm"/>
- <aura:handler name="launchNewBoatForm" event="c:launchNewBoatForm" action="{!c.handleNewBoatForm}"/>
- <article class="slds-card slds-m-bottom_medium">
- <div class="slds-media__body">
- <div class="c-container">
- <form>
- <lightning:layout horizontalAlign="center">
- <lightning:layoutItem >
- <lightning:select name="selectItem" label="" aura:id="boatTypes" onchange="{!c.handleChange}">
- <option value="All type" text="All type"/>
- <aura:iteration items="{!v.boatList}" var="boattype">
- <option value="{!boattype}" text="{!boattype}"/>
- </aura:iteration>
- </lightning:select>
- </lightning:layoutItem>
-
- <lightning:layoutItem ><br/>
- <lightning:button variant="brand" label="Search" onclick="{!c.onFormSubmit}" />
- </lightning:layoutItem>
- <lightning:layoutItem ><br/>
- <aura:if isTrue="{!v.renderNew}">
- <lightning:button variant="neutral" label="New" onclick="{!c.newBoat}" />
- </aura:if>
- </lightning:layoutItem>
- </lightning:layout>
- </form>
- </div>
- </div>
- </article>
</aura:component>
BoatSearchFormControllerjs:-
- ({
- doInit: function(component, event, helper) {
- // helper.createRecord(component, event, helper);
- helper.fetchPickListVal(component, event, helper);
- },
- handleNewBoatForm: function(component, event, helper){
- console.log("handleNewBoatForm handler called.")
- var boatTypeId = component.get("v.selectedType");
- console.log(boatTypeId);
- var createNewBoat = $A.get("e.force:createRecord");
- createNewBoat.setParams({
- "entityApiName": "Boat__c",
- })
- if(! boatTypeId==""){
- createNewBoat.setParams({
- "defaultFieldValues": {'BoatType__c': boatTypeId}
- })
- }
- createNewBoat.fire();
- },
- newBoat : function(component, event, helper){
- var boatTypeId = component.get("v.selectedType");
- console.log("New button pressed " + boatTypeId);
- var requestNewBoat = component.getEvent("launchNewBoatForm");
- requestNewBoat.setParams({"boatTypeId": boatTypeId});
- requestNewBoat.fire();
- },
- search : function(component, event, helper) {
- console.log('selectedType', component.get("v.selectedType"));
- var selectedType = component.get("v.selectedType");
- }
- ,
- handleChange : function(component, event, helper){
- console.log('boatTypes',component.find("boatTypes").get("v.value"));
- component.set("v.selectedType", component.find("boatTypes").get("v.value"));
- },
})
BoatSearchResults.cmp
- <aura:component controller="BoatSearchResults" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global" >
- <aura:attribute name="boats" type="List" />
- <aura:handler name="init" value="{!this}" action="{!c.doSearch}" />
- <aura:attribute name="boatTypeId" type="String" />
- <aura:method name="search" >
- <aura:attribute name="boatTypeId" type="Id"/>
- </aura:method>
- <lightning:layout multipleRows="true">
- <aura:if isTrue="{!v.boats.length > 0}">
- <aura:iteration items="{!v.boats}" var="bot">
- <lightning:layoutItem flexibility="auto" padding="around-small">
- <c:BoatTile boat="{!bot}" />
- </lightning:layoutItem>
- </aura:iteration>
- <aura:set attribute="else">
- <div class="slds-align_absolute-center">
- No boats found
- </div>
- </aura:set>
- </aura:if>
- </lightning:layout>
</aura:component>
- BoatSearchResultsController.js:
- ({
- doSearch : function(component, event, helper) {
- helper.onSearch(component);
- },
- search: function(component, event, helper){
- var params = event.getParam('arguments');
- console.log("boatTypeId extracted: " + params.boatTypeId);
- component.set("v.boatTypeId", params.boatTypeId);
- helper.onSearch(component);
- return "search complete.";
- },
})
BoatSearchResultHelper.js
({
onSearch : function(component){
var action = component.get("c.getBoats");
action.setParam({"boatTypeId":""});
action.setCallback(this, function(response){
console.log(response.getReturnValue());
var status = response.getState();
if(status === "SUCCESS") {
if(! $A.util.isEmpty(response.getReturnValue())){
component.set("v.boats",response.getReturnValue());
} else {
component.set("v.recordError","No boats found");
}
}
});
$A.enqueueAction(action);
}
})
BoatSearch.cmp
- <aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
- <aura:handler name="formsubmit" event="c:FormSubmit" action="{!c.onFormSubmit}" />
- <lightning:card title="Find a Boat" class="slds-m-top_10px">
- <c:BoatSearchForm />
- </lightning:card>
- <lightning:card title="Matching Boats">
- <c:BoatSearchResults aura:id="BoatSearchResults"/>
- </lightning:card>
- </aura:component>
BoatSearchController.js:-
({
- onFormSubmit : function(component, event, helper){
- var formData = event.getParam("formData");
- var boatTypeId = formData.boatTypeId;
- var BSRcmp = component.find("BoatSearchResults");
- var auraMethodResult = BSRcmp.search(boatTypeId);
- },
- })
FormSubmit.evt
- <aura:event type="COMPONENT" description="Event template" >
- <aura:attribute name="formData" type="Object[]"/>
- </aura:event>
4 个回答
I've just passed it. The problem was in that I placed onFormSubmit function in BoatSearchFormHelper instead of BoatSearchFormController. I moved it and in worked.
But at the same time I can't find in your code onFormSubmit function that would work with FormSubmit event at all... You didn't write it yet?