2

The slds page: https://www.lightningdesignsystem.com/components/lookups/#flavor-single-active has the examples of doing a perfect lookup input.

The sample code of typeahead is this:

<div class="slds-form-element slds-lookup slds-is-open" data-select="single">
    <label class="slds-form-element__label" for="lookup-366">Account Name</label>
    <div class="slds-form-element__control">
        <div class="slds-input-has-icon slds-input-has-icon--right">
            <svg aria-hidden="true" class="slds-input__icon">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
            </svg>
            <input id="lookup-366" class="slds-lookup__search-input slds-input" type="search" placeholder="Search Accounts" aria-owns="lookup-366" role="combobox" aria-activedescendent="" aria-expanded="true" aria-autocomplete="list" value="salesforce" />
        </div>
    </div>
    <div class="slds-lookup__menu" id="lookup-366">
        <ul class="slds-lookup__list" role="listbox">
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" id="lookup-option-368" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                    </svg>
                    <span class="slds-truncate" title="{ props.text || &#x27;New Account&#x27; }">&quot;salesforce&quot; in accounts</span>
                </span>
            </li>
            <li role="presentation">
                <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-369" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                        <div class="slds-lookup__result-text">
                            <mark>Salesforce</mark>.com, Inc.</div>
                        <span class="slds-lookup__result-meta slds-text-body--small">Account • San Francisco</span>
                    </div>
                </span>
            </li>
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" id="lookup-option-370" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
                    </svg>
                    <span class="slds-truncate" title="{ props.text || &#x27;New Account&#x27; }">New Account</span>
                </span>
            </li>
        </ul>
    </div>
</div>

However, despite this long piece of code, I am still confused by several things:

  1. the value selected by this will be the name of the SObject record, instead of Id.
  2. How should I implement the New Account functionality? Should it be a page redirection or dialog? LEX is using dialog. However, I find it difficult to implement that way. And page redirection just don't seem that correct.

Any suggestions?

1
2

I think you are looking for the JS Lightning framework such as :

Now for the New Account that's a bit up to your case. LEX is using dialog so that the user can stay on the same form and populate automatically the lookup dialog. I find that more responsive and a good way to go. At the end of the day your new Account should be a separated Lightning Component and you should be able to reuse this component as a separated page or embed in a dialog(modal).

I hope you will find that helpful

For example (Appiphony):

$(document).ready(function() {
$('#lookup-01').lookup({
    items: [
        {
            id: 'result-1',
            label: 'Result 1'
        },
        {
            id: 'result-2',
            label: 'Result 2'
        },
        {
            id: 'result-3',
            label: 'Result 3'
        },
        {
            id: 'result-4',
            label: 'Result 4'
        }
    ],
});

var results = [
    {
        id: 'ajax-result-1',
        label: 'ajaxResult1'
    },
    {
        id: 'ajax-result-2',
        label: 'ajaxResult2'
    },
    {
        id: 'ajax-result-3',
        label: 'ajaxResult3'
    },
    {
        id: 'ajax-result-4',
        label: 'ajaxResult4'
    }
];

$('#lookup-02').lookup({
    items: results,
    objectPluralLabel: 'Things',
    objectLabel: 'Thing',
    useImgTag: false,
    objectIconUrl: '/assets/icons/standard-sprite/svg/symbols.svg#account',
    objectIconClass: 'slds-icon-standard-account',
    emptySearchTermQuery: function(callback) {
        callback(results);
    },
    filledSearchTermQuery: function(searchTerm, callback) {
        callback(results.filter(function(result) {
            return result.label.match(searchTerm) !== null;
        }));
    },
    initialSelection: { id: 'ajax-result-1', label: 'ajaxResult1' },
    clickAddFunction: function() {
        console.log('redirect or do something to add something');
    }
});
});
5
  • Thank you for the answer. I agree that in the end we are all going to arrive at the promised land. But it is just the transition process we are suffering from.
    – Lance Shi
    Nov 24 '16 at 1:38
  • You need to use Lightning Component Event with account id and/or name as attribute(s). You register this event on the main component and you should fire the event on the creation of the account, in your callback method passing the created account and hide. Once the method is fired, it will call your action on your main component JS controller and you just need to populate your lookup field via jQuery and hide/remove your modal. Nov 24 '16 at 1:48
  • I understand... Thank you for the information. The issue is I am not using lightning component at the moment. I know VF page can use lightning out to use lightning component. But the conversion time and loading time are both issues to us. And I need to support both Salesforce classic and lightning. That's why I mean the transition period is tough - because we need to support both.
    – Lance Shi
    Nov 24 '16 at 1:52
  • Ha ok apologize, I thought you were doing some lightning. But should be very similar for VF : open modal, insert account (i.e.: JS Remoting), in callback method if no error then populate lookup via jQuery and close modal. Nov 24 '16 at 2:05

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.