Speech Recognition Custom Control

Custom Control in sap ui5

In this blog, I will be taking about what is a Custom control in sapui5, how to develop it and how to use it once its implemented.  The idea is simple, we will create a simple custom control apart from what already exists in sapui5 framework.

SapUi5 offers us many built in controls like table, list, and different kinds of forms and so on, which helps to develop almost any type of required application. What if we have a requirement, apart from what already exist in sapui5? The best probable solution might be to create a custom control.

How a Custom Control works

Basically, the parent class of all the sap ui5 control is sap.ui.core which extends from sap.ui.core.Element. A control defines appearance and behavior.

Take a look at the structure of a control:

  1. Properties. Allows define its appearance and behavior on initialization.
  2. Aggregations. It lets group controls, variables, etc. It lets define some kind of containers inside a control. For example sap.m.ListBase has different aggregations items, swipeContent, headerToolBar etc.
  3. Associations. Controls can be associated with others that are not part of them. For example if we want to render a collection with next/prev functionality we could develop a previousItem / nextItem associations.
  4. Events. Control events should be related to higher level events more than standard DOM events (click, mouseover, etc). For example sap.m.ListBase has some events like select, delete, swipe etc.
  5. Appearance. Definition of our control in screen area. Every control has a render method in order to be rendered in HTML code.

This might give a better understanding if you have come across with sap.m.ListBase control.
So this was the basic understanding of what a custom control is. Now, with an example let’s just try to implement a custom control.

Requirement – Speech Recognition Custom Control

Sapui5 doesn’t offer us any control, which can be used for speech recognition. Here, I will create an inputControl and a button. The inputControl will be our custom control. So just lets start:

First, create a project in eclipse:

Here, I have made the project structure. Have a look at the project structure tutorial in my blog here: http://www.sapui5tutors.com/2016/03/sapui5-application-project-structuring.html
This project structuring is according to the best practices, so I would suggest to follow this.

In the view folder create a view named CustomControlView.  Now, the Best practice would suggest that there should be a separate folder for controller, but for the sake of simplicity, I have collected both view and controller in the same folder itself.

In the view, define the inputControl and the button


<core:View xmlns:custom="custom.controls.demo.control"
xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
<Page navButtonPress="onNavBack" showNavButton="false"
title="Cordova Speech recognition custom control (SAPUI5)" id="thisPage">
<Button text="Add Speech recognition control" id="__button0"
icon="sap-icon://add" type="Emphasized" press="onButtonPress" width="100%" />
width="70%" id="spoken1"></custom:SpeechRecognitionInputControl>


sap.ui.controller("custom.controls.demo.view.CustomControlView", {
onButtonPress: function(evt){
var x = new control.SpeechRecognitionInputControl();
var oLayout = this.getView().byId("thisPage");

Now Create a new folder in the webcontent named as control and create a new js file. You can name it accordingly, here I have named it SpeechRecognitionInputControl.js.

This is the main file, where the coding is to be done


sap.m.Input.extend("custom.controls.demo.control.SpeechRecognitionInputControl", { //inherit Input definition
metadata: {
width: {type : "string", defaultValue: "70%"},   /// setting default width
value: {type : "string", defaultValue: ""},
recognition: { type:"any" }   //// for Cordova plug-in recognition object
aggregations : {
_buyButton      : {type : "sap.m.Button", multiple : false, visibility: "hidden"}   // Agregate button
init : function(){   /// init the control
var oControl = this;
var oBuyBtn   = new sap.m.Button({
text:"", width:"40px",  icon:"sap-icon://microphone", type:"Default",
press: function (oEvent) {    //////// Handle press event
if ( oControl.recognition !== undefined){
oControl.recognition.start();  //// Start recognition
var _oBuyBtn = oControl.getAggregation("_buyButton");
_oBuyBtn.setType(sap.m.ButtonType.Emphasized);  /// Change button color
this.setAggregation("_buyButton", oBuyBtn);  /// Add aggregation control
if (sap.hybrid !== undefined ){  ///// hybrid library defined ?
var isCompanionApp = sap.hybrid.getUrlParameterName("companionbuster");
if (window.cordova || sap.hybrid.Cordova || isCompanionApp) {   //// Verifying if it is a Cordova app
document.addEventListener("deviceready", function() {
// load odata library
oControl.recognition = new SpeechRecognition();  /// Load Speech recognition librar
oControl.recognition.onnomatch = function(event) {         /// Add event handlers
var _oBuyBtn = oControl.getAggregation("_buyButton");
oControl.recognition.onerror = function(event) {          /// Add event handlers
var _oBuyBtn = oControl.getAggregation("_buyButton");
oControl.recognition.onresult = function(event) {      /// Add event handlers for result
if (event.results.length > 0) {       /// If there is a success
oControl.setValue(this.value = event.results[0][0].transcript);  /// Set value with voice recognition
var _oBuyBtn = oControl.getAggregation("_buyButton");
_oBuyBtn.setType(sap.m.ButtonType.Default);  /// Get back the button to original state
}, false);
oBuyBtn.setEnabled(false);   //// Disable button if there is no cordova app
/////////////// hybrid not defined
oBuyBtn.setEnabled(false);   //// Disable button if there is no cordova app
renderer : {
render : function(oRm, oControl) {   /////// Render the control
oRm.writeControlData(oControl);       ////// Render control data
sap.m.InputRenderer.render(oRm, oControl);  //// pass the control to base renderer
oRm.renderControl(oControl.getAggregation("_buyButton"));  /// pass aggregated control for rendering

Output would look like something like this:

Even though the speech functionality wont work, unless cordova plugin is installed and https://github.com/macdonst/SpeechRecognitionPlugin.git is integrated into the eclipse.Still, we learned how to implement custom control in sap ui5 application.

That’s all for now, Stay tuned for next post!!!
Next Post »


Click here for comments
4 April 2018 at 00:26 ×

Please will you help that how to integrate speech recognition custom control with cordova.Will you give detail description?

11 April 2019 at 03:08 × This comment has been removed by a blog administrator.