Siebel Foundation: Siebel Auto-Complete

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.

Tuesday 15 August 2017

Siebel Auto Complete Plugin :- Part 1

Hello All,

In Siebel Dropdown fields (LOV) we have option to enter some Letter and related Option are shown in Dropdown, as shown in below image.

But in Normal Text Fields we have to enter the complete information there is no option of auto-complete.
We can extend the Option for auto fill for normal text fields also by the below mentioned Method.

We need to use a 3rd party Plugin that Offers Auto Complete option
I am using file from TypeAhead, http://twitter.github.io/typeahead.js/
Include the file in Our PR file
Call Method in PR file
We can either retrieve the Option from Fixed set of value as in this example or From a file (.txt) or at run-time by querying Database (will take this in further articles)

Sample PR Code

you can download typeahead.js file and PR file from here

PR File : https://drive.google.com/open?id=0B52024rQ9Hc0NXQxWTR1TEtUbzg
JS file : https://drive.google.com/open?id=0B52024rQ9Hc0LURFbTQ1aDNiTzg

if (typeof(SiebelAppFacade.AutoComplete) === "undefined") {

SiebelJS.Namespace("SiebelAppFacade.AutoComplete");
define("siebel/custom/AutoComplete", ["siebel/phyrenderer","siebel/custom/typeahead"],
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 );

/* Static List of Control Identifier which will be displayed in Carousel; */

}

SiebelJS.Extend( AutoComplete, SiebelAppFacade.PhysicalRenderer );

AutoComplete.prototype.ShowUI = function(){
SiebelAppFacade.AutoComplete.superclass.ShowUI.call( this );
var pm = this.GetPM();

}

/// bind events function
AutoComplete.prototype.BindEvents = function(){
SiebelAppFacade.AutoComplete.superclass.BindEvents.call( this );
var pm = this.GetPM();
var controls = this.GetPM().Get("GetControls");

// read out Description field
$('[aria-label="Alternate Phone #"]').dblclick(function(){

// var controls = pm.Get( "GetControls" );
var cntrl = controls[ "Description2" ];
// alert(controls);
var Status = pm.ExecuteMethod( "GetFieldValue", cntrl );
//alert(Status);
responsiveVoice.speak( Status );
});

/////////////////////////////////

var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;

// an array that will be populated with substring matches
matches = [];

// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');

// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});

cb(matches);
};
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

//$('#1_Last_Name').typeahead({ /// tt-menu tt-open

$('[aria-label="Alternate Phone #"]').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});

//define colour, Border and Width Scheme

$('.tt-menu').css({ "background": "#F5F5F5", "width": "155px","border-style": "solid"})

////////////////////////////////
};

return AutoComplete;
}
());
return "SiebelAppFacade.AutoComplete";
});
}

Working Example of the above is :

Will be sharing further advaced option te fetch data from Files and Siebel Database in further Articles.
Your Comments are most welcomed ..

Friday 24 July 2020

Exposing Siebel API as Auto Search

Tuesday 15 August 2017

Siebel Auto Complete Plugin :- Part 1

Siebel GoTo View - Handling Realtime cases