custom Search Extension : Processing Time

The following example came up the other day in a conversation so we thought it would be useful to post it here. Consider a search extension : we’ve seen many of them on this site. The principle is simple. Your user types ahead in an input box, and the search extension reaches out to whatever source of data you have, and brings back a set of options based on that typing. It has limitations (you cannot easily configure the delay before the search occurs and the extension only has two object keys – search and commit. There is no update or more importantly no validate which makes it harder to validate the data entry before running the search. That said, it is useful for the more simplistic searches. If you have no idea what we are talking about, take a look at this starter video that explains things in a bit more detail.

Let’s assume you have a good use case for making a search extension : in the example below, the user needs to search for a railway station and find the GPS coordinates, for whatever purpose:

Search Extension - Example

So the user is happy to select the value and our REST API Search has done it’s job. But what happens if the selection of the data is only the starting point? What happens if you now need to do some post-processing? How can you make the user sit tight while you do that? A long time ago we looked at the subject of loader images in extensions, with an example using an entity collect. The web has evolved of course so nowadays you would look to achieve the same concept, perhaps using modern techniques like CSS – so there is less code to handle.

In the example below, the commit object key is used to execute the post-processing (another API call, a download, whatever it is) and to make the user wait. The control is temporarily disabled, but to make the user understand what is going on, a progress bar style gradient is applied in a CSS animation. The control let’s the user know the Custom Search Extension is doing something.

The commit code looks something like this (with a dummy timer for the “post-processing” and a boolean to display the final validation message. It’s of course up to you to decide whether to display this message, or perhaps another message if your post-processing fails or does not work out.

commit: function (value) {
					//console.log("Starting name xSearchcustomSearch Commit");
					$("#opmCtl" + control._component._uniqueID).addClass("progress-1");
					$("#opmCtl" + control._component._uniqueID).prop("disabled", true)
						interview.setInputValue("validated", false);
						//this is your "post processing"
						function () {
							if (control.getValue().length != 0) {
            //do something with your attributes 
						interview.setInputValue("lat", value.latitude);
						interview.setInputValue("long", value.longitude);
						//obviously some sort of real life logic here
						interview.setInputValue("validated", true);
						$("#opmCtl" + control._component._uniqueID).removeClass("progress-1");
					}, 5000);
					$("#opmCtl" + control._component._uniqueID).prop("disabled", false)
					//console.log("Ending name:xSearch customSearch Commit");

Basically a CSS class is applied and removed, and it looks something like this.

.progress-1 {
   linear-gradient(#000 0 0) left/0% 100% no-repeat
  animation:p1 2s infinite linear;
@keyframes p1 {
    100% {background-size:100% 100%}

You can get busy thinking up how to make the progress bar even funkier with CSS.

Here is a short video explaining the search extension and the result. The project Zip can be found in the online store.


Richard Napier

Author: Richard Napier

After 8 years in case management and ERP software roles, Richard Napier joined Siebel Systems in 1999 and took up the role of managing the nascent Siebel University in Southern Europe. He subsequently was Director of Business Development and Education for InFact Group (now part of Business & Decisions) for 8 years. He now runs Intelligent Advisor IT Consulting OÜ. Owner of, he also is Co-Founder of the Siebel Hub.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Logo by Southpaw Projects LLC