The day is not too far when we talk to computers and they perform required action based on human voice instruction and respond interactively. Here we present to you, a new way of interaction with MII Applications. Imagine a world where shop floor user just says – “Post Confirmation”, “Quantity 200”, “Scrap 5”, “For Order 10001234” and the system responds automatically by posting confirmation to SAP based on this voice command. That’s what we are talking about and details of implementation are as below.
- Shop Floor workers can now use MII application with simple voice instructions.
- Faster end user training.
- Many shop floor users are not used to computers as it’s not a part of their day to day job. Now, they don’t have additional burden to get trained on computers to just to use MII applications.
- This particular API works only with Chrome browser.
- Server should be SSL enabled if we don’t want to be prompted to allow or deny the use of microphone every time.
- End users may have to learn and voice out the instructions multiple times in case system is unable to understand as Voice APIs are still experimental.
To start with we will reuse the code from AJAX Dynamic Editable Data grid using servlet and XSL blog with slight modifications.
- loadXMLDoc() function is called onLoad of the page.
- Input box to enter servlet, populate div and read values buttons have been removed.
- Query output and table fields include – Order Number, Material Number, Material Description, Quantity and Description.
- Goods Issue, Goods Receipt and Confirmation Buttons have been added.
- Please note that the scope of the demo is limited to how technically we can drive the application with voice API only and doesn’t show or supply all required parameters for successful postings in SAP from MII.
Test the IRPT. If XSL is correct, you will be able to see a table similar to below image depending on the data in query template.
When a row is selected, we would like to assign the value of the position to a global variable to make it easy for us to read values of selected row.
- Create a global variable: var selectedRowPosition=””;
- Modify the XSL, append position attribute and onClick function to the radio button element.
Define a generic showPopup() function, this function is called when Goods Issue, Goods Receipt and Confirmation buttons are clicked. We will open up a window pop-up to show the selected transaction name, order number, material, Qty to be posted and Description.
Select 3rd Row, provide quantity and description. Then mouse click on each of these buttons it should result in:
Now that we have an MII application which is working with mouse clicks. Let’s now Integrate Speech Recognition API to it to drive it with voice commands.
- While this API works for several languages and regional dialects, I am limiting this sample for just English and five widely used English Regional dialects. More information about languages in provided in the API documentation.
Add this code just below <body> tag
- After adding the above code, the screen should look like:
Code to use Speech Recognition API.
- webkitSpeechRecognition() object does this magic. It provides the Speech Interface and it currently works with only Chrome browser v25 and above. “Webkit” is the vendor name as it is currently experimental.
- This is a standard code and there is no need to customize this.
- In this function we are:
- First checking if “Confirmation” keyword exists in the voice command, if so, we call showPopup(‘confirmation’) function which we had defined earlier, similarly we call showPopup(‘Goods Issue’) and showPopup(‘Goods Receipt’) for “Issue” and “Receipt” voice commands respectively.
- Then we check for “Select Row number n” voice command, where n is position number between 1 and 9, if “Select Row” word exists, then we substring and get the last digit in the voice command and select the row specified based on the position.
- Then we check for only number in the voice command, if only number exists, number will be populated in Quantity input box.
- Then we check for “Description” keyword in the voice command, if this exists, we truncate description keyword and populate rest of the sentence in Description input box.
- NOTE: This is just a sample code mainly focusing on various ways to use voice commands in MII applications. Once you get the idea, you can optimize the code; there are better ways to implement and use it which is not in the scope of this documentation.
- Since we already have showPopup() function defined, we just need to define a function to select radio button.
That is it. We are now done with coding, it’s time to have fun testing it and see the results.
- Make sure you are using Chrome Browser v25 and above.
- Select the language and Regional Dialect. Selecting correct regional Dialect will provide close to accurate results. If you are a native American English Speaker use United States, If you are a native Queen’s English Speaker then use United Kingdom, If you are an Indian like me use India.
- Click on microphone icon/button and start saying the voice commands.
- Voice Command: “Select Row Number 1” Result: Should select the first Row.
- Voice Command: “200” Result: Should populate Quantity 200 in the first Row’s quantity field
- Voice Command: “Description This is test description” Result: Should populate “This is test description” in first Row’s description field.
- Voice Command: “Confirmation” Result: Should show Confirmation pop-up with details mentioned above.
- Voice Command: “Issue” or “Goods Issue” Result: Should show Goods Issue pop-up with details mentioned above.
- Voice Command: “Receipt” or “Goods Receipt” Result: Should show Goods Receipt pop-up with details mentioned above.
- NOTE: You may have to “Allow” microphone every time you want to say a voice command. This can be avoided if sever is SSL enabled, this means that URLs begin with HTTPS.
- TIPS: Give a small pause between words while saying voice commands. Eg., Select <pause> Row <pause> Number <pause> 1. You may have to give a couple of tries if your voice is not being recognized properly.