6

I'm building a form in Lightning where I want to use the Appiphony Strike lookup component to get input for lookup fields. I also have my own component that depends on the value selected for the lookup field, like this:

<c:strike_lookup label="Manufacturer"
        object="Account"
        searchField="Name"
        placeholder="Select a manufacturer"
        iconName="standard:account"
        order="Name"
        loadingMessage="Loading..."
        errorMessage="Invalid input"
        showRecentRecords="true"
        value="{!v.newTask.Manufacturer__c}" />
<aura:if isTrue="{!v.newTask.Manufacturer__c != null}">
    <c:getSGIList mfrId="{!v.newTask.Manufacturer__c}" year="2018" />
</aura:if>

The problem is the Strike component doesn't have an onChange event (so I know I have to set up my own event for that), but more importantly I need to use the strike component for several other lookup fields in this form, and I need to capture onChange for those lookup fields as well since I have separate components depending on those values.

What's the best approach to accomplish this? Should I wrap each lookup field in its own component? I assume the "wrapping" component would contain the strike lookup component and it would fire a field-specific event when the field changed value. The parent form component would listen for the specific changes and call the appropriate child component that needed to re-initialize based on the lookup field.

I'm hoping there's a better way so that I don't have to pass the selected values from the wrapping components up to the form parent component.

EDIT: I've tried Mike Topolovich's suggestion of wrapping the Strike component in a div like so:

<div id="mfrInput" onchange="{!c.refreshSGIList}">
    <c:strike_lookup label="Manufacturer"
            object="Account"
            searchField="Name"
            placeholder="Select a manufacturer"
            iconName="standard:account"
            order="Name"
            loadingMessage="Loading..."
            errorMessage="Invalid input"
            showRecentRecords="true"
            value="{!v.newTask.Manufacturer__c}" />
</div>
<aura:if isTrue="{!v.newTask.Manufacturer__c != null}">
    <c:getSGIList mfrId="{!v.newTask.Manufacturer__c}" year="2018" aura:id="SGIList" />
</aura:if>

Unfortunately, the onchange event is not bubbling up since the Strike component does a stopPropagation at several points and those are necessary for proper function of the component.

1

Since the Strike Lookup ultimately renders HTML elements, you can handle DOM events fired by the child HTML elements by wrapping them with a div and defining attributes for the specific DOM events that you want to handle.

While the following post focuses on Base Lightning Components, it would apply to your use case as well:

Reference: Handle DOM Events Raised by Base Lightning Components

  • Thanks Mike, I think this will work for me, I'll give it try. – David Cheng Feb 6 '18 at 21:03
  • Mike - I tried your suggestion but the Strike component is stopping propagation of events, see my edited original post. – David Cheng Feb 10 '18 at 1:52
  • That's a bummer...looks like you'd have to change the source code for the Strike components, which would require a deeper understanding of the architecture behind them. – Mike Topalovich Feb 12 '18 at 17:16
0

I posted an issue on the Strike github and received this solution from Michael Richmond. https://github.com/appiphony/Strike-Components/issues/190#issuecomment-370160172

He suggested using an event handler on the value change of the lookup component, and it works.

In the component:

<aura:handler name="change" value="{!v.myAccount}" action="{!c.myActionHandler}"/>

<c:strike_lookup
    aura:id="myAccount"
    label="Account"
    object="Account"
    searchField="Name"
    placeholder="Select an Account"
    iconName="standard:account"
    subtitleField="Industry"
    order="Name"
    limit="5"
    loadingMessage="Loading..."
    errorMessage="Invalid input"
    showRecentRecords="true"
    value="{!v.myAccount}"/>

And of course in the controller:

myActionHandler : function(component, event, helper) {
  //do something
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.