Typeahead in search box of ExtLib Application layout component

Question

I would like to provide typeahead suggestions when user enters few characters of his search in search box rendered by Application layout.

Our Application layout is used in many applications as shared custom control, so I am looking for solution which can be customized according to application it is in.

Answer 1

SearchBar is one of several "facets" supported by the applicationLayout component. When using the property panels to enable one or more of the "drop targets", Designer automatically adds markup like the following to the XML source:

<xe:applicationLayout>
    <xe:this.facets>
        <xp:callback facetName="facetRight" xp:key="RightColumn" />
        <xp:callback facetName="facetLeft" xp:key="LeftColumn" />
    </xe:this.facets>

For the benefit of those not familiar with the callback tag, this creates an Editable Area component, allowing any XPage (or Custom Control) containing your Custom Control to contribute its own content to it. If you were, for example, to add this Custom Control to an XPage and then use the Design tab to drag a Panel to the green dot representing the left column, you'd end up with markup like the following:

<xp:panel xp:key="facetLeft" />

So if you add an additional callback to the list of facets of your applicationLayout...

<xp:callback facetName="facetSearch" xp:key="SearchBar" />

...you'll have an additional drag target on any XPage to which you add your layout Custom Control. This replaces the standard search functionality of the applicationLayout with whatever content you drag into it. Hence, you can define your own custom search behavior in each application without affecting the rest of the standardized behavior of the applicationLayout.