Creating your own inline web Mashup control

Web Mashups have been around for a while but this is the first post on the topic thanks to our latest author Stefan W. He plans to write a series on Web Mashups so enjoy.

Sometimes the controls available in the Mashup Designer are not satisfying the needs for the mashup you are building. In these times the Smart Office SDK has come in handy but, applications written with Smart Office SDK are not available when running your mashup in web. When using the Mashup SDK for web application development you have the opportunity to include the mashup interface in your components and thus make it available for usage in a mashup application. This, however requires you also to provide an application system profile in the mashup administration client. If you do not wish to provide your components as a whole application or not have any web service to host your components there is a possibility to provide the components as embedded components hosted within the mashup itself.

This can all be done through the Mashup Designer by following these simple steps. In this example I want my mashup to speak out the selected line in a m3 list using the Web Speech Api functionality build in to several browsers.

First of all. I have a simple application that shows m3 items in a list and the details of the selected item underneath.

webmashups1

In the project properties I choose to create a new (embedded) Application.

webmashups2

The designer will suggest a name for the new file and to have it put in the project folder. I choose to accept this and press OK.

This application can now be used to embed one or several external components into my project.

Next, I want to place my new component into the mashup. The textToSpeach component that I am going to make will not use any UI so I cose to simply put it into the bottom of the mashup page away from the other controls. I use the MashupWebControl found under Common Controls and drag it into my mashup.

webmashups3

In the settings window of the MashupWebControl you can choose to use a control either from an application deployed to the mashup server or to use/add one from the embedded application we just created. In this case I choose to go with the embedded.

webmashups4

Next, I want to create a new control so I put a name to it in the New Control input field and press Create.

A new html page is automatically created and put into my project resources. I also choose to provide some initial parameters to my new control so I enter them in the key-value list before I press OK on the settings dialog.

By opening my new html file I can now see that it has been prepopulated with the script tags and linking that it needs to behave as a proper web mashup control. Now, all we have to do is to put some functionality and behavior into the control interface methods.

webmashups5

I start by putting some code into the onInitialized callback function to initialize my new control with the parameters that I defined in the control settings.

I use the mashupContext parameter to retrieve the default values.


infor.mashup.client.onInitialized = function (mashupContext) {
            try {        
                // Initialize your control and maybe save "mashupContext" for later use
                lang = mashupContext.getValue('lang');
                rate = mashupContext.getValue('rate');
                pitch = mashupContext.getValue('pitch');
                volume = mashupContext.getValue('volume');
                
                // Set the status to initialized when the control is ready to respond to events
                infor.mashup.client.setStatus(infor.mashup.client.Status.INITIALIZED);
            } catch(e) {
                // Notify the framework that this control failed
                infor.mashup.client.setStatus(infor.mashup.client.Status.FAILED);
            }
        };

I also want my new control to handle some mashup events in order to trigger the speech synthesizer when I select a line in the m3 list so I go back to the application definition I created before in the project properties and select Edit.

webmashups6

I choose to create a target event, Speak, that I can trigger from outside the control to have it speak whatever I wish. I do this by simply copying the event from the commented code in the file.

<?xml version="1.0" encoding="UTF-8"?>
<application description="My Application">
  <controls>
    <!-- An example of an embedded mashup control registration. This is only supported in Web mashups. -->
    <!-- For the "type" attribute the following values are valid: "control", "extension" and "static", see Web SDK documentation for more information -->
    <control name="Speaker" description="" type="control" relativeUrl="Speaker.html" allowAdditionalParameters="false">
      <parameters />
      <events>
        <sourceEvents />
        <targetEvents>
            <event name="Speak" description="This event will speak out my thoughts"/> 
        </targetEvents>
      </events>
    </control>
  </controls>
</application>

Now that I have my event it is time to put in some code for that as well in the mashup control so I go back to the html file and put in the code needed to make the browser speak.

I want to do this when the Speak event is triggered so I put the code into the onLoad function. Parameter values for the event are provided through the theEvent parameter. By looping over all parameters and concatenating them I make the speaker to speak several parameters in the same sentence which makes it sound more accurate.

infor.mashup.client.onLoad = function (theEvent) {
            try {        
                // Set the status to busy when the control is working, no events will be sent to the control
                infor.mashup.client.setStatus(infor.mashup.client.Status.BUSY);
                var stringValues = "";
                theEvent.parameters.forEach(function(param) {
    
                    // Load the control with the data specified in "theEvent" parameter
                    if(param.value) {
                        stringValues += param.value;
                    }
                });
                
                if(stringValues) {
                    var msg = new SpeechSynthesisUtterance(stringValues);
                    if(lang) { msg.lang = lang; }
                    if(rate) { msg.rate = rate; } 
                    if(pitch) { msg.pitch = pitch; } 
                    if(volume) { msg.volume = volume; } 
                    window.speechSynthesis.speak(msg);
                }
                
                // Set the status to running when the control is ready to respond to events again
                infor.mashup.client.setStatus(infor.mashup.client.Status.RUNNING);
            } catch(e) {
                // Notify the framework that this control failed
                infor.mashup.client.setStatus(infor.mashup.client.Status.FAILED);
            }
        };

Having my new event I can now go back to my control settings and select to trigger the event whenever the current item is changed in the m3 list. I want my control to speak out the name of the current item but also put a little context to it, so I put in some extra parameters to wrap the item name in a nicely way.

webmashups7

And that’s it. I now have a nice little control that can speak through my browser. This control will work in chrome, safari, android, and any IOS 7+ browser which are the browsers that have implemented the Web Speech Api.

Thank you Stefan (kallekaka) for this article.

4 thoughts on “Creating your own inline web Mashup control

  1. Mikael

    Hi, I have built a custom list within a mashup that shows all the operations in PDS002 (table MPDOPE). The issue I face is that it shows all records in the file connected to a given product even if the valid to date of a record has passed the current date. Is there a way to have an condition in the event to only show records where the valid to date (POTDAT) is less than or equal to the curren date?

    The layout of the file is somewhat like this:

    Operation no From Date To Date Operation
    100 0 99999999 MIXING 1
    200 0 20150531 MIXING 2
    300 0 99999999 PACKING

    I then don’t want to see operation no 200 since the to date is larger than the current date (20150610).

    Mikael

    Reply
  2. George Dedas

    Ihave seen that here is a “Condition” area in the Event tab, maybe you can set up something useful over there. I have to admit that I have never userd it though…

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s