Category Archives: Mashup

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.


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


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.


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.


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.


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
            } catch(e) {
                // Notify the framework that this control 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.


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">
    <!-- 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 />
        <sourceEvents />
            <event name="Speak" description="This event will speak out my thoughts"/> 

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
                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; } 
                // Set the status to running when the control is ready to respond to events again
            } catch(e) {
                // Notify the framework that this control 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.


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.

Function expressions in variable replacements

This post is an introduction to the enhancements made to the variable replacement functionality in Smart Office 10.2. The variable replacement syntax now supports function expressions that adds the possibility to modify values during a variable replacement.

Function expressions are currently supported in many places that uses variable replacements. Some examples are M3 toolbox shortcuts, Mashup parameters and links, Mashup controls such as WebBrowser and FileBrowser and data service parameters. Smart Links do not support function expressions in the current 10.2 release but this has been addressed and support for function expressions in Smart Links will ship in the next fix pack for Smart Office 10.2. Continue reading

Icons and icon buttons

When the new style for Smart Office was introduced in version 10.1.0 we also added a new set of icons. There are now almost two hundred icons that can be used on buttons, menus or to convey information in an application. In addition to the new icons a couple of controls were added to make it easy to use the icons. These new controls are the Icon, IconButton and CommandBarButton in the Mango.DesignSystem namespace. Continue reading

Mashup – Enable a button based on status and CurrentItemChanged

I’ll show you how to enabled a button on a current item changed event in a Mashup list. The scenario is as follows: You have a list of planned orders and you want to add a button to execute a related option but only if the order status has a specific value. I’ll show you how to set a property value in an event and how to execute a related option using a button. The real case scenario here would be planned work orders in MOS197 but for simplicity if you don’t use that module I’ll simulate the checks by using a much simpler program and one of my favorites, CRS610. The hard part is to reset the IsEnabled for the button to be false so that it does not keep its state as we select different rows in the list. Continue reading

How to use the keyboard in a Mashup

Do you want to add keyboard support in a Mashup? In this blog I’ll show how to get a keyboard key to invoke an event and how to user keyboard shortcuts to switch beteen tabs. I’ll talk about focus and how to user accelerator keys to jump to an input field and some other nice to know topics for Mashup and feature development. Continue reading

Inline personalizations in M3 Mashups

The Inline personalizations functionality in M3 Mashups can be used to deploy personalizations as part of a Mashup. Instead of relying on the personalizations for the regular programs you can create custom personalizations that are only used in Mashups and that do not affect the other personalizations.

Support for inline personalizations was added in Smart Office version but there have been some fixes so this functionality should only be used with Smart Office or later.

Continue reading

Building a Mashup UI – Margins and alignment explained

I’ve spent the last few months working with the UX 3.0, Infor’s new design guide lines for all Infor 10x applications, applying it for Smart Office. It has given me great insight in how I like to build a UI. I’m talking about what controls to use and why, how to think and how to align controls. In this post I’ll focus on Mashup development but this approach can be used in any WPF application. I highlight some issues and how to solve them.
Continue reading