Siebel Open UI Enhancement ,Part 1: Text to Speech API

Hello all,

After a long break from writing any useful post i am writing this post after one of my application user demanded a feature to readout Siebel Fields, so i thought to give it a try and achieved it as below.

The concept is very simple we need to call a 3rd party plugin or API and pass field value to it, that we want system to speak. There are various API's available to achieve it to name a few

• https://responsivevoice.org/ 
• http://www.jqueryscript.net/other/Lightweight-jQuery-Based-Text-To-Speech-Engine-Articulate-js.html
• http://www.masswerk.at/mespeak/
• http://www.jtalkplugin.com/

I used method from https://responsivevoice.org/, the API is free to use and supports many options.

Base function is responsiveVoice.speak("Text to Speak"), here speak() take in input the text to speak. Additional parameters that can be passes are,

• Changes default voice to "UK English Male", responsiveVoice.speak("hello world", "UK English Male");
• Sets Pitch of voice, responsiveVoice.speak("hello world", "UK English Male", {pitch: 2});
• Sets volume of vocie, responsiveVoice.speak("hello world", "UK English Male", {volume: 1});

for further documentation please refer, https://responsivevoice.org/api/

Tasks to do to make it work in Siebel,

1. Download responsivevoice.js from http://code.responsivevoice.org/responsivevoice.js or Include the script directly in your code , <script src="http://code.responsivevoice.org/responsivevoice.js"></script>
2. Add the file under Manifest Files if downloaded else directly refer this is PR file
3. Write a PR file with this JS file under define section , define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"] 
4. Associate PR file with a Applet 
5. In PR file write code to get value of certain field and call speak() method on some event say Button click.

Sample PR File

Downloadable link to PR and JS file.

https://drive.google.com/open?id=0B52024rQ9Hc0ZFg0bnYyTHM4bTg


Explanation of Code :

1. Define and Include 3rd party files

define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"] ,

all the JS files that code refer need to be defined here. Since we are using speak() method that is defined in file responsivevoice.js so we need to include this. Also either we can directly call file by refering its web location ["siebel/phyrenderer","//code.responsivevoice.org/responsivevoice.js"] or by locally saving file under siebel/custom folder.

2. Creation of button that will call method speak

 var id1 = this.GetPM().Get("GetFullId") + '-siebui-cust-ActivateMember-btn';

//Custom Button that will trigger speech API

var Speak = "<button " +
"id= '" + id1 + "' " +
"class= 'siebui-ctrl-btn appletButton' " +
"aria-label=Speak " +
"type=\"button\" " +
"data-display=\"Speak\" " +
"title=Speak " + ">" + "Speak" + "</button>";

$("#s_" + this.GetPM().Get("GetFullId") + "_div").find(".AppletMenu").append(Speak);


3. Function that gets value of a selected field and calls speak method 

$('button[data-display="Speak"]').click(function(){

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

Working Demonstration of this is shown in below video.

any suggestions are always welcome...

In my next post i will be sharing Speech to Text conversion functionality in Siebel..

<<<<<<<<Next in the Series >>>>>>>>>

Creating a Custom Button using PR file

Hello All,

Recently i had a requirement where i was required to add a new button on List applet to perform some update operation. This is very basic requirement and can be easily done by creating a button at applet control and associating a script to perform the desired operation.

This time i thought to work without a SRF recompile, so i tried this with PR file and i actually saved a lot of time and learned something new.

Actual Requirement was like :

• Need to Create a button in the Highlighted area

• Button Created using PR

Sample PR Code :

explanation of Code :

var id1 = this.GetPM().Get("GetFullId") + '-siebui-cust-Validate-btn' , Id which we are assigning to the button 

var ValidateBttn = "<button " +  

  "id= '" + id1 + "' " +  

  "class= 'siebui-ctrl-btn appletButton' " +  

  "aria-label=Validate" +  

  "type=\"button\" " +  

  "data-display=\"Active\" " + 

          "title=Validate" + ">" + "Validate" + "</button>" , code for custom button here we have defined Id, Label and Title for this button

.find(".siebui-icon-find").append(ActivateMemberBttn) , code finds Object with class siebui-icon-find and adds button near this object

to find the Place holder for button :

• Click fn + F12 to open browser console
• Select the element after which you want to place control
• Look for its class, can be found under (Class : "") tag 
• make sure the class is unique i.e. used only once in the current div else it will result in Creation of multiple buttons

Now complete you PR file and write any code you want to perform in your PR on button click event.

Register PR in Manifest Administration and you are good to go.

Hope this was helpful ...