function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Swimming through thecloudSwimming through thecloud 

Lightning Component Framework Specialist superbadge -STEP 2

I have created BoatSearchForm.cmp, BoatSearchResults.cmp, and BoatSearch.cmp, as described in the business requirements but I am unable to make the Boatsearchform look similar to the use case. I did not add any styling or controller to it yet. Any advice is appreciated.
Boat Search form
Component:
User-added image
Shubham saini 14Shubham saini 14

Hello,

Try This 

 

/** BoatSearchForm.cmp **/
<aura:component controller="BoatSearchFormController">
    <aura:attribute name="options" type="BoatType__c[]" />
    <aura:attribute name="selectedValue" type="String"/>
    <aura:attribute name='showNewButton' type='Boolean' default="true" />
    <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
    <aura:registerEvent name="formsubmit" type="c:formsubmit"/>
    <!-- creating a form -->
    <form class="slds-form--stacked">
        <lightning:layout horizontalAlign="center">
            <lightning:layoutItem class="select slds-p-horizontal_x-small">
            <lightning:select name="mySelect" label="" onchange="{! c.getSelectedVal}" aura:id="mySelect" value="{!v.selectedValue}">
                <option text="All Type" value="" />
                <aura:iteration items="{!v.options}" var="item">
                    <option text="{!item.Name}" value="{!item.Id}" />
                </aura:iteration>
            </lightning:select>
            </lightning:layoutItem>
            <lightning:layoutItem class="slds-p-horizontal_xx-small">
                <lightning:button variant="brand" label="Search" onclick="{!c.onFormSubmit}" />
            </lightning:layoutItem>
            <aura:if isTrue='{!v.showNewButton}'>
                <lightning:layoutItem class="slds-p-horizontal_xx-small">
                    <lightning:button variant="neutral" label="New" onclick="{!c.createRecord}" />
                </lightning:layoutItem>
            </aura:if>
        </lightning:layout>
    </form>
</aura:component>

/** BoatSearchForm.css **/

.THIS .select{
    margin-top: -19px;
}


Thank You