Siebel Foundation: Auto Complete Functionality in Siebel

Friday 24 July 2020

Exposing Siebel API as Auto Search

Hello All,

I have posted multiple article on Siebel Auto Suggestion, where we get the Suggested results based on the keyword typed.

In this post i will share how we can expose Siebel REST API url to be used as Auto Suggestion result fetching.

below Video shows, where a Front End User is entering some Product Name and Siebel API sends the request to Siebel and displays the Siebel Products results.

Siebel Structure:

The Rest API of Siebel has the features where a search expression can be set and we can return a particular field or set of field.

https://<<hosturl>>/siebel/v1.0/data/Internal Product/Internal Product/?searchspec=([Name] LIKE '"+a+"*')&fields=Name", false); // `false` makes the request synchronous

here, a is the value that will be entered in text box and passed to Siebel REST API url.

Pretty Simple :-), yet effective

Sample HTML Form

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body style="background: beige;">
<div class="container">
<div id="emailcontainer">
<label>Search a product here by entering the keywords</label>
<label for="emailaddress">Product Name</label>
<input type="" class="dataholder ui-autocomplete-input" id="emailaddress" name="emailaddress" placeholder="Email Address.." autocomplete="off">
</div>
</div>
<script>
$('#emailaddress').autocomplete({
source: function( rqst, response ) {
var txt='',tags='';
var request = new XMLHttpRequest();
var a = $('#emailaddress').val();
request.open('GET', "https://<<youraddresshere>>/siebel/v1.0/data/Internal Product/Internal Product/?searchspec=([Name] LIKE '"+a+"*')&fields=Name", false); // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {

var obj = JSON.parse(request.responseText);
var Items = obj.items;
var length = Items.length;
a = new Array();
for (var i=0;i<length;i++) {
a[i]= Items[i]['Name'];
}

}
console.log(a);
tags = a;
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( rqst.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
</script>
</body>
</html>

This can also be implemented in Siebel UI as well, will share the details of that in upcoming posts.

Friday 18 January 2019

Siebel Auto Complete Functionality :- Part 2

Hello All ,

This post is continuation of post Autocomplete in Siebel ,in this post i have tried to remove the dependency of 3rd party Files as it has its own Encapsulated classes and methods which we could not control much.

So in this post lets try to achieve the functionality using native siebel jQuery Framework,

jQuery function autocomplete() can be used to bring the feature , since its native siebel jQuery Framework we need worry about the layout or CSS

Source , the source is the data set from which the searched value appears in drop down source has 2 components , Request and Response

Code snippet that does the magic :-)

Define source to hold the Suggestions/Options for auto fill, is a Array of keywords as below,

var tags = [ "AAKASH", "ABHISHEK", "MOHIT", "ROHIT", "BHANU", "PRITAM", "RAHUL" ];

Define function that reads the user input and searches the source using RegExp function of jQuery.

$( '.siebui-ctrl-textarea').autocomplete(
{ source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});

Working Code ,

video here,

PR File ,

if (typeof(SiebelAppFacade.AutoComplete) === "undefined") {
SiebelJS.Namespace("SiebelAppFacade.AutoComplete");
define("siebel/custom/AutoComplete", ["siebel/phyrenderer"], function () { SiebelAppFacade.AutoComplete = (function ()
{
function AutoComplete( pm )
{ /* Be a good citizen. Let Superclass constructor function gets executed first */ SiebelAppFacade.AutoComplete.superclass.constructor.call( this, pm );
}
SiebelJS.Extend( AutoComplete, SiebelAppFacade.PhysicalRenderer );

/// bind events function
AutoComplete.prototype.BindEvents = function(){ SiebelAppFacade.AutoComplete.superclass.BindEvents.call( this );
var tags = [ "AAKASH", "ABHISHEK", "MOHIT", "ROHIT", "BHANU", "PRITAM", "RAHUL" ];
//////bind Autocomplete with all the text area fields //////
$( '.siebui-ctrl-textarea').autocomplete({ source: function( request, response )
{
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){ return matcher.test( item ); }) );
} });
};
return AutoComplete;
} ());
return "SiebelAppFacade.AutoComplete"; });
}

In my next post i will try to extend this to read the data from Siebel Database then manually passing in variable.

Friday 24 July 2020

Exposing Siebel API as Auto Search

Friday 18 January 2019

Siebel Auto Complete Functionality :- Part 2

Siebel GoTo View - Handling Realtime cases