README

Interface Editor

The Interface Editor is an application that allows to modify and customize the coveo-search-ui.

Install

npm install coveo-interface-editor --save

Options

Required

close: () => void

The function called when closing the editor. Typically, it will redirect the user to the location they were before opening the editor.
delete: () => void

The function called when deleting the search page. Typically, it will send a request to delete the search page followed by redirecting to the Interface Editor creator.
environment: Environments

The environment the Interface Editor is instantiated in. Valid values include:

CloudV2HostedSearchPage, CoveoForDynamics, CoveoForSalesforcePro, CoveoForSalesforceEnterprise, salesforcefree.
load: () => Promise<ISearchPageContent>

The function to retrieve the search page. The returned object should respect the ISearchPageContent interface:

    interface ISearchPageContent {
        head: string;
        body: string;
    }

requireConfig: Record<string, string>

The option tells the Interface Editor where to retrieve the files for the Monaco code editor. Note that we package these files as part of our build process. The object should take the following form:

    {
        url: '<path to Interface Editor directory>/js/vs/loader.js',
        paths: {
            vs: '<path to Interface Editor directory>/js/vs'
        }
    }

save: (body: string) => Promise<void>

The function called when saving. It receives the edited search page body. Typically, it should send a request to save the page.

Optional

containerClasses?: Partial<ISearchInterfaceData>

Specifies the CSS classes of elements that contain coveo-search-ui components. The ISearchInterfaceData interface has the following properties:

    interface ISearchInterfaceData {
        facetsContainer: string;
        sortsContainer: string;
        foldingsContainer: string;
        templatesContainer: string;
    }

    Default values:

    facetsContainer: 'coveo-facet-column' (or 'coveo-facet-container' if the "mobile" option is true),
    sortsContainer: 'coveo-sort-section',
    foldingsContainer: 'CoveoSearchInterface',
    templatesContainer: 'CoveoResultList'

displayMode?: string

Sets the width of the search page iframe. Valid values and their corresponding pixel widths are:

    enum displayWidths {
        mobile = 480,
        mobileLandscape = 640,
        tablet = 767,
        laptop = 1024,
        desktop = 1920,
        ipx = desktop
    }

Default value: `desktop`

features?: ICustomizableFeatures

An object that allows disabling features in the Interface Editor. The ICustomizableFeatures interface has the following properties:

    interface ICustomizableFeatures {
        hideNoResultsPageToggle?: boolean;
    }

iconsUrl?: string

Allows specifying a url to load additional icons from. The response should be a JSON string containing objects that respect the IIconFromSearchUI interface:

    interface IIconFromSearchUI {
        name: string;
        img: string;
        cssClass: string;
        isFileType: boolean;
    }

iframeCss?: string[]

Allows specifying additional CSS files to include inside the Interface Editor iframes. The files will be used inside the main search page, the result layout editor and the new result template editor. If you specify this option, you must include a reference to the InterfaceEditorIFrame.css styles file in your array for the iframe to render correctly.
mobile?: boolean

Specifies if the search page is in mobile mode.
repositories?: IRepository[]

Repository objects specified in this array become preconfigured options shown when a user creates a new search page or a CoveoTab component.

    interface IRepository {
        id: string;
        title: string;
        icon: string;
        description: string;
        queries: string[];
        tabs: string[];
        facets: string[];
        sorts: string[];
        templates: IRepositoryTemplate[];
        foldings: string[];
    }

resultCss?: string

Allows specifying additional CSS files to include inside the Interface Editor iframes. These include the the result layout editor and the new result template editor. This option will not be used if iframeCss is defined.
rootSelector?: string

A selector that should retrieve the root element of the search page.

Default value: .CoveoSearchInterface
visibleComponents?: IVisibleComponentCreator[]

Allows specifying additional drag-and-drop components. The IVisibleComponentCreator interface is:

    export interface IVisibleComponentCreator {
        id: string;
        creator: (parser: any) => HTMLElement;
        onDrop?: (node: IParsedNode) => JQueryPromise<IEditableNode>;
        icon: React.DOMElement<React.SVGAttributes<SVGElement>, SVGElement>;
    }

onModeChange?: (mode: string) => void;

Allows specifying a callback function to be executed when the interface editor mode (ie: Interface versus Code versus Help) is modified by the end user.

Development

Node version 6+ required
npm install -g gulp                 # Gulp is the build tool, -g to install globally (so you can call gulp directly in the cmd line)
npm install                         # Install all the local dependencies for the project
gulp                                # Compiles the project (you may need to use ./node_modules/.bin/gulp).

See Gulpfile.js for more options.

Dev server

gulp dev
gulp dev --env.production           # Starts a dev server while compiling in production mode (useful for testing the build).

This starts a webpack dev server available on http://localhost:8083

It also starts a node js express server on http://localhost:3000 to act as a mock backend that allows to save and load search pages.

Dev server for IPX

* Create a new file in `backend/edit/ipx.config` by copying `backend/edit/ipx.config.sample`
* The API key needs to have VIEW/EDIT search pages privilege, as well as EXECUTE_QUERY
* Run `gulp dev` to start the dev server as usual
* Access `localhost:8083/ipx` in your browser
* `orgID`, `ipxID` and `ipxName` can all be obtained easily from the admin UI interface in the IPX section.
* The API key can be created from the administration UI as well
* You can alternatively load `localhost:8083/ipx?org={org}&id={id}&name={name}&access_token={token}` to override any local config

Prod server

gulp prod

Compiles resources in production mode and starts a node server on http://localhost:3000.

Analyzing bundle sizes

gulp prod --env.analyzeBundles

The webpack-bundle-analyzer package is included in the project. It can be activated by adding --env.analyzeBundles to any gulp task that includes a webpack compilation step (e.g. gulp dev, gulp prod, gulp build).

coveo-interface-editor

Usage no npm install needed!