Create a custom Visualforce search page

This is for:

When integrating a Visualforce search page in Coveo for Salesforce, you usually want to create a custom Visualforce page that references the Coveo components.

There are many Coveo components you can add to your custom Visualforce page (see Visualforce components).

This tutorial shows you how to create a custom Visualforce page and include a SearchInterface into it.

To create a custom Visualforce search page

In Salesforce, under Setup, search for and select Visualforce Pages (Build > Develop > Visualforce Pages).
On the Visualforce Pages page, select New.
Give your new component a Label; the Name should be filled automatically.

For this tutorial, you can enter MyCustomSearchComponent.
In the Visualforce Markup tab, enter the following template:
```
 <apex:page standardstylesheets="false" sidebar="false" docType="html-5.0">
   <CoveoV2:SearchInterface mobile="false" name="myCustomPage"/>
 </apex:page>
```
This template will use a Visualforce component called myCustomPage, which you will be prompted to create when accessing your Visualforce page if it doesn’t already exist.
Select Save to save your Visualforce page.

You should now have a fully functional Visualforce page that you can use in Salesforce.

With your custom Visualforce page, you can add custom CSS using the <style> element, JavaScript using the <script> element, or leverage information in Apex using the <apex> element.

Example

If you need to leverage information from the controller in the search page, you can use JavaScript to create a variable with all the values that you need so that you can use this variable in your code. Keep in mind that this variable isn’t available in the Interface Editor, but is available in your actual page.

<apex:page ...>
[...]
<apex:variable var="OrgID" value="{!IF(LEN($Organization.Id)==18, LEFT($Organization.Id, 15), $Organization.Id)}" />
    <script>
        (function(){
            Coveo.SFContext = {
                Current_Page: '{!$CurrentPage.Name}',
                Session_ID : '{!$Api.Session_ID}',
                Partner_Server_URL_200: '{!$Api.Partner_Server_URL_200}',
                Org_ID: '{!OrgID}',
                HiddenExpression: '@sforganizationid=={!OrgID} OR @uri (NOT @sforganizationid<>{!OrgID})'
            }
        })();
    </script>
</apex:page>

Now that you’ve created your custom search page, you may want to consider making it the default search page (see Change the default Coveo-Powered search page).