How to Implement Page and Document Search in an Oracle Content and Experience Site
Site search helps people find relevant contents and navigate your site. For a site search, the search is executed by the site’s owns search implementation, as opposed to an external search engine like Google. Unlike an external search engine with the sitemap, a site’s own search implementation has more granular control. But each site has to implement the site search from framework components — not in a turnkey solution. This blog presents a site search implementation for a site built with Oracle Content and Experience (OCE).
Search for content on site pages is done through a page index, which should be refreshed if a site changes. Search for content within documents is done through a document index, which is updated when documents are uploaded.
We will show how to implement page content search, then document content search.
Setup required for page search
Before site search on pages can be performed, we have to set up the required artifacts. For simplicity, a site template package, search_template.zip, is provided in the Sites Toolkit. It has all the pieces preconfigured for the use case. The pages for the search are provided. Here is the basic outline for the setup:
- Install and set up Sites Toolkit
- Import a template package
- Create a repository with a specified content type
- Create an enterprise site with a specified repository
- Index the site
- Search the site
Install and set up Sites Toolkit
The Sites Toolkit can be obtained directly from GitHub. Go to https://github.com/oracle/content-and-experience-toolkit and click Clone to download. Choose Download ZIP, and content-and-experience-toolkit-master.zip will be downloaded. Unzip the file and enter cd content-and-experience-toolkit-master/sites to go to the directory.
To set up the Sites Toolkit, the first step to perform is Install Dependencies Through npm. Then Do a One-Time Gradle Setup will finish the installation and configuration.
Import the template package
We will first import the template package. Upload to OCE the template package from Sites Toolkit: content-and-experience-toolkit-master/sites/cec-components/data/templates/search_template.zip.
From Templates, import the template package search_template.zip.
You might get a conflict resolution dialog, depending on whether the out-of-the-box StarterTemplate is installed. If so, select the Create new components option. Alternatively, you might get a message about the user not having permission to overwrite components. If that is the case, choose the option to create new components.
After the import operation completes, you will get the template search_template.
Create a repository with a specified content type
Now create a repository for the enterprise site. In the Create Repository screen, specify search_repository for the Name field and search_content_type for Content Type field. Content type search_content_type is bundled as part of the search_template. Click Save and then Close on the Repository screen to create the search_repository.
Create an enterprise site with a specified repository
Now create the enterprise site. From the Create Site screen, click Create to invoke the Create Site wizard. Choose the search_template and then click Next.
Enter search_site for Name. Enter search_repository for Asset Repository. For Localization Policy, search_localization_policy will automatically be selected and is bundled as part of the search_template. Click Create to create the enterprise site search_site.
Index the site
Now seed the page index for the page search. The seeding will be done with the Sites Toolkit. Run the following command to seed the page index.
$ cd content-and-experience-toolkit-master/sites/cec-components
$ cec index-site search_site -c search_content_typeThe cec index-site will index the pages of search_site. An example of the console output follows:
$ cec index-site search_site -c search_content_type
- Logged in to remote server: http://swebcli-oracle.wc.released.1915ec.shared.osn.oraclecorp.com:8080
- establish user session
- get CSRF token
- query site search_site, token: 3b8d4591387f5b04c28ffe7bdaefc24f
- query site repository
- query content type search_content_type
- query site structure
- query page data
- no content on the pages
- will create 9 PageIndex items
- will update 1 PageIndex items
- update page index item for page Search
- create page index item for Page Content
- create page index item for Pages
- create page index item for Components
- create page index item for Home
- create page index item for Privacy Policy
- create page index item for Detail Page
- create page index item for Navigation
- create page index item for Developing Templates
- create page index item for Themes
- add page index item search_sitePages120 to site channel
- add page index item search_siteComponents150 to site channel
- add page index item search_siteDeveloping Templates100 to site channel
- add page index item search_siteNavigation130 to site channel
- add page index item search_sitePrivacy Policy200 to site channel
- add page index item search_siteHome10 to site channel
- add page index item search_siteThemes110 to site channel
- add page index item search_sitePage Content140 to site channel
- add page index item search_siteDetail Page201 to site channelThe cec index-site adds and populates content items, one for each page, that contain the text of the pages. Look at the Asset screen under search_repository to see the content items.
Search the site
Now that the setup is complete, run the page search to make sure everything is working. Go to the Sites screen and click View on the search_site menu.
The Home page is rendered and the search field is on the top of the page.
Enter “Components” in the search field and press Enter.
If the search result shows up correctly, the setup is working! The correct search result shows the pages that contain “Components” are listed. The matched text fragments are highlighted. To make the search easy to use, the search is case-insensitive.
Search of Assets on the Pages
When it comes to assets, content items have to be published to the site channel prior to generating page index for the search. Otherwise the search will fail to find the content items on the pages.
Go to Assets and select seach_blog content item on the left. There should be two content items that show up. Publish the two content items to search_site channel.
After the content items are published, regenerate the page index using cec index-site.
$ cec index-site search_site -c search_content_typeThen run the site search_site again. Enter entry on the search field, and press Enter. The content items from an example search_blog show up on the Blog page for the search result. Basically the Blog page contains a content list pointing to the search_blog content type. This is an example of searching assets that are part of the pages.
How does page search work?
Let’s take a closer look behind-the-scene to see how page search works. First of all, the content type search_content_type is defined as the page index. The search_content_type definition follows, and you can see it under Assets (Administration) > Content Type > search_content_type. All data fields are Text. Every field is Single Value except for the keywords field, which is Multiple Values. The pagetitle, pagedecription, and keywords fields are NOT Required fields.
After defining the content type, we generate the page index for searching (that is, content items). When creating the page index, the cec index-site <site name> -c <content type name> command will look at the pages in the site and generate one content item of the type search_content_type for each page. Every instance of the content item will contain the searchable string of the components on each page. When the page index is completed by cec index, there will be one content item for each page. Periodically, the page index should be regenerated by the cec index-site command from Sites Toolkit.
Next, we will take a look at the modification to the theme. The theme contains the UI for accepting search criteria and the code that will forward to the search page. A user can examine the following theme file:
Developer > Themes > search_siteTheme > layouts > index.html
You will find the following snippet with an input field for which a user can provide the search criteria.
<div align=”start” class=”menucontainer col-xs-2" style=”z-index: 99;”>
<input id=”searchonpage” type=”text” size=“30” placeholder=”Search on page”/>
</div>On the same page, you will find the code that takes the search criteria and forwards it to the search page to show the result.
<script>
// Get the search field element
const node = document.getElementById(‘searchonpage’);
// Get the search string from the url if it exists
var params = (new URL(document.location)).searchParams;
var defaultStr = params && params.get(‘default’);
if (defaultStr) {
if (defaultStr.lastIndexOf(‘*’) === defaultStr.length — 1) {
defaultStr = defaultStr.substring(0, defaultStr.length — 1);
}
// Display the search string in the search field
node.value = defaultStr;
}
// When you enter text from the search field, go to the site search page with the search string:
node.addEventListener(‘keydown’, function onEvent(event) {
if (event.key === “Enter”) {
var inputElem = event.srcElement || event.target;
var siteSearchPageUrl = ‘search.html’;
var searchUrl = SCSRenderAPI.getSitePrefix() +
siteSearchPageUrl +
‘?contentType=search_content_type&default=’ + inputElem.value + ‘*’;
window.location = searchUrl;
}
});
</script>The preceding code will forward to the search page with the following URL, which contains the search content type and search criteria. For example:
https://<host>/sites/preview/search_site/search.html?contentType=search_content_type&default=Components*The search page is called Search. It has a Content List component for showing the search result. The content list is bound to Content Type search_content_type.
The page search mechanism will search the content items pointed to by the contentType URL parameter. The page search will use the search criteria specified by the default URL parameter.
Once the search has the search result, it will format the result according to the content layout search_content_type-overview. Here is the layout.html of the content layout search_content_type-overview:
Developer > Components > search_content_type-overview > assets > layout.html.
{{#fields}}
<div>
<div class=”pageicon”>
<img src=”{{pageicon}}” align=”absmiddle” border=”0"></img>
</div>
<div class=”titlecontainer”>
<a href=”{{pageFullURL}}” title=”{{pagename}}”><span class=”pagetitle”>{{pagename}}</span></a>
</div>
<div class=”matchingstring”>{{{matchingString}}}</div>
<div class=”metadatacontainer”>
<span>
<span class=”metadata”>{{pageurl}}</span>
</span>
</div>
</div>
{{/fields}}The other content layout affected files:
Developer > Components > search_content_type-overview > assets > render.js
Developer > Components > search_content_type-overview > assets > design.css
Developer > Components > search_content_type-overview > assets > page.png
That is all the affected site artifacts for the page search.
Setup required for documents search
Now let’s discuss what’s required for the documents search. Here are the steps required to set up a documents search:
1. Import a custom component from Sites Toolkit
2. Create a folder to contain documents
3. Configure the proxy service
4. Add and configure the custom component
A documents search uses a custom component, Document-Search, available from Sites Toolkit. It has the implementation to do a live search from folders and display the result.
Import a custom component from Sites Toolkit
Let’s begin by deploying the custom component from Sites Toolkit. First the Sites Toolkit has to be started.
1. Enter cd content-and-experience-toolkit-master/sites/cec-components in a terminal window.
2. Enter npm start &
Then the custom component, Document-Search, has to be created in the Sites Toolkit local server.
$ cec create-component Document-Search -f Document-Search
Create Component: creating new component Document-Search from Document-Search
— update component Id Document-Search to Document-Search
— update component GUID C34733C786E5D472DB39EDE65A88A5E94D49D4C299F1 to C10448522DB1A46D8A5909F5A91E00C40156A1EA3B37
— component Document-Search created at ~/cec-components/src/main/components/Document-Search
To rename the component, rename the directory ~/cec-components/src/main/components/Document-SearchAfter the custom component is created on the local server, deploy the custom component to the OCE server.
$ cec deploy-component Document-Search
— copying Document-Search component
— optimizing component Document-Search
Optimization is not enabled for the component Document-Search
— created zip file Document-Search.zip
— connect to remote server: https://skocicgovserv3-p2skocicgov5oct.uscom-central-1.c9dev2.oc9qadev.com
— establishing user session
— file Document-Search.zip uploaded to home folder, version 1 (1s)
— component Document-Search imported (14s)Create a folder to contain documents
The custom component searches under any specified folder. Let’s create Search Folder at the root level.
After creating the folder, select the folder and invoke the Share Link and click Copy Link. If you want to download the document as opposed to previewing it when the user clicks document search results, you can click Edit Link Options to change Link Permissions to Downloader.
The link that is copied looks like the following example:
https://skocicgovserv3-p2skocicgov5oct.uscom-central-1.c9dev2.oc9qadev.com/documents/link/LF85B3693E4B350C622ED47EAD454E4BB0A4B3D6F067/folder/F013AFF2DEDC9C962B4E8BDD5CED30132879FCE47696/_Search_Folder
First take note of the link ID (for example: LF85B3693E4B350C622ED47EAD454E4BB0A4B3D6F067). That will be used later to parameterize the custom component. Your link ID will be different from the preceding one.
Then take note of the folder ID (for example: F013AFF2DEDC9C962B4E8BDD5CED30132879FCE47696). That will be used later to set a proxy service. Your folder ID will be different from the preceding one.
After getting a Share Link for the folder, upload the files you want to search to the folder. For example, you can generate a PDF of this blog (File > Print… > Save) and call it SearchBlog.pdf. Then you can upload the file to the Search Folder folder.
Configure the proxy service
After you create the folder to search, the proxy service needs to be set up. The proxy service is required because the documents search needs to work for the public/anonymous use case. To execute a search in the anonymous use case, we need a proxy with the right credential.
Let’s start by navigating to Integrations > Proxy Services.
Enable the proxy if it is not already enabled. Click Create new Endpoint. Enter search_proxy as the Endpoint Name. Check Enable Endpoint. Enter search_pxy_endpoint as the Path Name. For the Target URI, enter the following URL substituting <host> and <folder ID> from the previous step.
https://<host>/documents/api/1.2/folders/<folder ID>/search/items
For example:
Save and Close the proxy service endpoint configuration.
Next, click Create New Credential. Enter search_user for Credential Name. Enter user name and password values for the user ID you want to perform the search. Save and Close the Credential screen.
Click search_proxy in the Endpoints section.
Set search_user in the Credential field. Save and Close the Endpoint screen.
Add and configure the custom component
To add the custom component Document-Search, open the site search_site in Sites Builder. Edit the site with a new update named update1. Navigate to the Search page. Go to Components > Custom in Sites Builder and find the Document-Search custom component. Drag-n-drop the custom component onto the page below Title Matching Documents.
Open the Settings of the Document-Search, and invoke Custom Settings. In the Custom Settings, enter the Link ID from the earlier step in the Folder Download Public Link ID field. Enter search_pxy_endpoint in the Document Search Proxy Endpoint field.
Close Custom Settings. In Document-Search Settings, click the Link tab. Click below Available Triggers. Choose File Preview from Page Action on the left and drop that to the section on the right. Select File URL for File ID or URL.
Click OK for Configure Trigger Actions. Dismiss Document-Search Settings. Save and Publish/Commit the update.
Now run the site again and enter “Components” for the search. Under the Matching Documents section, you will see the result SearchBlog.pdf.
Click the SearchBlog document and the preview of the document appears.
This is how to implement site search on Oracle Content and Experience (OCE). We showed both pages and documents searches. The template package search_template.zip and custom component Document-Search are available from the Sites Toolkit.
