+ Start a Discussion
Sai.MaharajpetSai.Maharajpet 

Failed to save customLookup_Parent.cmp: Markup for markup://c:customLookup_Parent may not contain a <style> tag: Source

<aura:component controller="lookUpController" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
 
<!--Including lightning design system library-->
<ltng:require styles="/resource/SLDS222/assets/styles/salesforce-lightning-design-system.css" />
 
<!--declare attributes-->
<aura:attribute name="selectedRecord" type="Contact" default="{}" description="Use,for store SELECTED sObject Record"/>
<aura:attribute name="listOfSearchRecords" type="Contact[]" description="Use,for store the list of search records which returns from apex class"/>
<aura:attribute name="SearchKeyWord" type="string"/>
<aura:attribute name="Message" type="String" default="Search Result.."/>
<aura:attribute name="SearchedResult" type="Contact[]"/>
<aura:attribute name="Dropdownlist" type="Boolean" default="true"/>
 
<!--For applying CSS to/(Fixing the position of) Modal-Popup-->
<aura:attribute name="cssStyle" type="String" />
 
<!--For Hiding and showing the Spinner
<aura:attribute name="Showspinner" type="Boolean" default='true'/> -->
 
<!--declare events hendlers-->
<aura:handler name="oSelectedContactEvent" event="c:selectedContactEvent" action="{!c.handleComponentEvent}"/>
<aura:handler name="myEvent" event="c:selectedContactEvent" action="{!c.GetSelectedCont}" />
 
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
 
 
<style>
{!v.cssStyle}
</style>
<!-- https://www.lightningdesignsystem.com/components/lookups/ -->
<div class="slds-m-around--large ">
<div aura:id="searchRes" class="slds-form-element slds-lookup slds-is-close" data-select="single">
<label class="slds-form-element__label" for="lookup-348"> Contact Name </label>
<!--This part is for display search bar for lookup-->
<div class="slds-form-element__control">
<div class="slds-input-has-icon slds-input-has-icon--right">
<div onclick="{!c.SearchContact}">
<c:svg class="slds-input__icon slds-icon--large slds-show " xlinkHref="/resource/SLDS222/assets/icons/utility-sprite/svg/symbols.svg#search"/>
</div>
<!-- This markup is for when an record is selected -->
<div aura:id="lookup-pill" class="slds-pill-container slds-hide">
<span class="slds-pill">
<span class="slds-pill__label">
{!v.selectedRecord.Name}
</span>
<!--Button to remove the selection-->
<button class="slds-button slds-button--icon slds-pill__remove" onclick="{!c.clear}">
<c:svg class="slds-button__icon" xlinkHref="/resource/SLDS222/assets/icons/utility-sprite/svg/symbols.svg#close"/>
<span class="slds-assistive-text">Remove</span>
</button>
</span>
</div >
<div aura:id = "lookupField" class = "slds-grid">
<div style="width:100%">
<ui:inputText updateOn="keyup" keyup="{!c.keyPressController}" class="slds-lookup__search-input slds-input" value="{!v.SearchKeyWord}" placeholder="search contact.." >
</ui:inputText>
</div>
</div>
</div>
</div>
<!--This part is for Display typehead lookup result List-->
<div class="slds-lookup__menu slds" aura:id ="lookupmenu">
<div class="slds-lookup__item--label slds-text-body--small">{!v.Message}</div>
<center> <ui:spinner aura:id="spinner"/> </center>
<ul class="slds-lookup__list" role="listbox">
<aura:iteration items="{!v.listOfSearchRecords}" var="singleRec">
<!--Child Component for showing the searched result-->
<c:customLookupResult_Child1 oContact="{!singleRec}" />
</aura:iteration></ul>
</div>
</div>
</div>
&nbsp;
 
<!-- Moadal Popup for showing the search window on press of lookup icon -->
<div role="dialog" tabindex="-1" aura:id="ContactLookup" class="slds-modal slds-fade-in-open visibilityNO">
<div class="slds-modal__container">
<div class="slds-modal__header" style="padding-bottom:15px;">
<button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.HideContactPopup}">
<c:svg ariaHidden="true" class="slds-button__icon slds-button__icon--large" xlinkHref="/resource/SLDS222/assets/icons/utility-sprite/svg/symbols.svg#close"></c:svg>
<span class="slds-assistive-text">Close</span>
</button>
<ui:inputText updateOn="keyup" change="{!c.keyPressController}" class="slds-lookup__search-input slds-input" value="{!v.SearchKeyWord}" placeholder="search contact.." />
 
</div>
<div class="slds-modal__content slds-p-around--medium">
<div class="slds-lookup__item--label slds-text-body--small">{!v.Message}</div>
<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table_fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="col"><span class="slds-truncate">Contact Name</span></th>
<th scope="col"><span class="slds-truncate">Account Name</span></th>
<th scope="col"><span class="slds-truncate">Email</span></th>
<th scope="col"><span class="slds-truncate">Phone</span></th>
</tr>
</thead>
<tbody>
 
<!--Child component for showing the searched result -->
<aura:iteration items="{!v.SearchedResult}" var="obj">
<c:customLookupResult_Child2 con="{!obj}" />
</aura:iteration></tbody>
</table>
</div>
<div class="slds-modal__footer">
<ui:button label="Cancel" class="slds-button slds-button--brand" labelClass="label" press="{!c.HideContactPopup}" />
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open visibilityNO" aura:id="popUpBackgroundId1"></div>
</aura:component>


Error: Field_Integrity_exception

 

Failed to save customLookup_Parent.cmp: Markup for markup://c:customLookup_Parent may not contain a <style> tag: Source

How can i resolve this please help me 

Thanks

Sai.MaharajpetSai.Maharajpet

Source:

https://blogs.absyz.com/2017/09/20/how-to-build-custom-lookup-in-lightning/comment-page-1/?unapproved=17358&moderation-hash=c06f4cdf15d64365c008ee038b452e2b#comment-17358

chanchal_:)chanchal_:)
According to me you can not use <style> tage like this in component.

You shuld write like this - 
<aura:html tag="style">

     {!v.cssStyle}

 </aura:html>

 
AbhishekAbhishek (Salesforce Developers) 
Sai,

You can use the below code as mentioned in the below blog,

https://www.forcetalks.com/blog/how-to-create-custom-lookup-in-lightning-component/

https://sfdcmonkey.com/2017/01/07/custom-lookup-lightning-component/

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks.