Category Archives: Mashup

Snooping my Mashup for Missing Data

Sometimes when you’re developing a Mashup it happens that the data you’re expecting to appear in a databound control is not showing up. There’s a small developer tool named Snoop that will help you examine the runtime visual tree of a Windows Presentation Foundation (WPF) user interface.

Snoop WPF Spy utility


Launch Smart Office and open the Mashup Designer. In this post we use an example from the Help menu named Document found in the Infor Document Management category.


Run the example, save it and search for any Document Type e g CLM_Document. Depending on the available data, it will look something like this in the running Mashup.


Now it’s time to launch the Snoop utlitity tool. It has a slim and narrow window. ISOSnoop

Drag the Snoop hair-cross (marked yellow) and drop it on your Mashup window. A new window will open and present the visual tree representation of the user interface in the left-hand panel and the details of the selected UI element in the right-hand panel. Below the details panel there’s a preview panel to render and show the selected UI element (if actived with the power button).

Press down the CTRL- and SHIFT- key simultaneously while you drag the mouse over the Mashup window. The control beneath the mouse will be selected and decorated with a red border and the corresponding element in the Snoop visual tree view will be highlighted and selected. Navigation can also be done directly in the tree-view by selecting UI element nodes.



Let’s examine the bound data for the document attribute panel. Use the mouse or locate and select the LangAttrList (ListBox) in the visual tree. Scroll down in the Properties list until you find ItemsSource property for the ListBox control.

ISO IDM Snoop ItemsSource

It’s now possible to drill-down into the data collection with a double-click on the value of ItemsSource, in this example [System.Windows.Data.CompositeCollection]. Now you see that the collection contains 1 item: this[0]. You can continue to drill-down with a double-click on the value this[0] to see the details of the item or navigate back up by clicking the up-arrow button (marked yellow).

ISO IDM Snoop Drill-down and up

In this case the ListBox will apply a template for each document attribute found in a collection item. Select the attrTemplate under the ListBoxItem to show its properties. In most template cases the data will be in the DataContext property of the element. Select the Data Context tab for a dedicated view of the property, in this case the DataContext is a piece of XML.
Note that there’s a Binding Errors column in the properties list that will show an error message if the data binding declaration for a UI element property is wrong and the data source can’t be found.

ISO IDM Snoop Data Context

We’ve only scratched the surface of the Snoop tool functionality but it’s the basics needed to investige why your data is not showing up.

MIPanel enhancements for the Mashup Designer

Smart Office Hot Fix 12 was just released ( We have some new features and in this post I’ll cover a changes to the MIPanel that will make it easier to chain calls together. The new features for the MIPanel are:

  • New events: CompletedSuccessfully and CompletedWithError
  • New properties: ShowMessagesInDialog and ShowMessagesInStatusBar
  • New result property that you can bind to: MIPanel.ErrorInfo. This property will contain error information from the first failed transaction. It has ErrorMessage, ErrorCode, ErrorField, Transaction and Program.


For those of you who have use conditions on events you can now consider using the new events. An example scenario would be updating item information and if that transaction is successful you would like to run another transaction. In that case you can trigger the second update based on CompletedSuccessfully instead of UpdateCompleted.

Item update

Please note that I have some hard coded values in the example. I did have to configure MandatoryInputFields since I’m not changing the item number as the behavior of the MIPanel is to only send updated data to an MITransaction. The use of the event is pretty straight forward. For numeric input I used the NumericTextBox. You will not find it in the Designer UI but it is part of Smart Office so you can use it if you edit the XAML. Here is the XAML:

<Grid xmlns="" xmlns:x="" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI" xmlns:m3="clr-namespace:MForms.Mashup;assembly=MForms">
		<ColumnDefinition Width="1*" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="1*" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
	<m3:MIPanel Name="ItemDetail" Grid.Row="0" Margin="0,15,0,0">
				<mashup:Event SourceEventName="Startup" TargetEventName="Get">
					<mashup:Parameter TargetKey="ITNO" Value="AC-001" />
					<mashup:Parameter TargetKey="FACI" Value="010" />
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="10" />
				<ColumnDefinition Width="200" />
				<ColumnDefinition Width="15" />
				<ColumnDefinition Width="*" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="5" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="5" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="5" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="10" />
				<RowDefinition Height="Auto" />
			<Label Content="Item number:" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0" Padding="0" />
			<TextBox MaxLength="15" Text="{Binding [ITNO]}" IsEnabled="false" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
			<Label Content="Name:" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0" Padding="0" />
			<TextBox MaxLength="30" Text="{Binding [ITDS]}" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
			<Label Content="Description 2:" Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0" Padding="0" />
			<TextBox MaxLength="60" Text="{Binding [FUDS]}" Grid.Row="4" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
			<Label Content="Avergage cost:" Grid.Row="6" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0" Padding="0" />
			<ui:NumericTextBox MaxLength="10" Name="inputAPPR" Text="{Binding [APPR]}" Grid.Row="6" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
			<Button Name="SaveButton" Content="Update" Grid.Row="8" Grid.Column="2" HorizontalAlignment="Right">
						<mashup:Event TargetName="ItemDetail" SourceEventName="Click" TargetEventName="Update" Debug="True">
							<mashup:Parameter TargetKey="ITNO" Value="{Binding [ITNO]}" />
							<mashup:Parameter TargetKey="FUDS" Value="{Binding [FUDS]}" />
							<mashup:Parameter TargetKey="ITDS" Value="{Binding [ITDS]}" />
				<m3:MIDataSource Program="MMS200MI" Transaction="Get" Type="Get" InputFields="ITNO" OutputFields="ITNO,ITDS,FUDS" />
				<m3:MIDataSource Program="MMS200MI" Transaction="GetItmFac" Type="Get" InputFields="FACI,ITNO" OutputFields="APPR" />
				<m3:MIDataSource Program="MMS200MI" Transaction="UpdItmBasic" Type="Update" InputFields="ITNO,ITDS,FUDS" MandatoryInputFields="ITNO" />
	<m3:MIPanel Name="SecondUpdatePanel">
				<mashup:Event SourceName="ItemDetail" SourceEventName="CompletedSuccessfully" TargetEventName="Update" Debug="True">
							<mashup:Condition SourceValue="{Binding ElementName=inputAPPR, Path=Text}" TargetValue="{Binding ElementName=ItemDetail, Path=[MMS200MI.GetItemFac.APPR]}" Operator="NotEqual" />
					<mashup:Parameter SourceKey="ITNO" />
					<mashup:Parameter TargetKey="FACI" Value="010" />
					<mashup:Parameter SourceKey="APPR" />
			<m3:MIDataSource Program="MMS200MI" Transaction="UpdItmFac" Type="Update" InputFields="FACI,ITNO,APPR" />

	<ui:StatusBar Name="StatusBar" Grid.Row="3" Grid.Column="0" />

Unfortunately the Documentation in the Mashup Designer is not updated with the new properties etc as there has been no update to the Mashup Designer. You can always find the latest API documentation in the Smart Office SDK.

Please note that these events applies to update transactions. You set the type of the transaction on the MIDataSource. We will automatically try and determine the type based on the transaction name.

For a full listing of changes made on this release, refer to Lawson KB 1626878 / M3 KB 1623430.

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