Category Archives: Mashup

MIPanel enhancements for the Mashup Designer

Smart Office Hot Fix 12 was just released (10.2.0.88). 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.

Properties

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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">
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="1*" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
		<RowDefinition Height="1*" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<m3:MIPanel Name="ItemDetail" Grid.Row="0" Margin="0,15,0,0">
		<m3:MIPanel.Events>
			<mashup:Events>
				<mashup:Event SourceEventName="Startup" TargetEventName="Get">
					<mashup:Parameter TargetKey="ITNO" Value="AC-001" />
					<mashup:Parameter TargetKey="FACI" Value="010" />
				</mashup:Event>
			</mashup:Events>
		</m3:MIPanel.Events>
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="10" />
				<ColumnDefinition Width="200" />
				<ColumnDefinition Width="15" />
				<ColumnDefinition Width="*" />
			</Grid.ColumnDefinitions>
			<Grid.RowDefinitions>
				<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" />
			</Grid.RowDefinitions>
			<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">
				<Button.CommandParameter>
					<mashup:Events>
						<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]}" />
						</mashup:Event>
					</mashup:Events>
				</Button.CommandParameter>
			</Button>
		</Grid>
		<m3:MIPanel.DataSources>
			<m3:MIDataSourceList>
				<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:MIDataSourceList>
		</m3:MIPanel.DataSources>
	</m3:MIPanel>
	<m3:MIPanel Name="SecondUpdatePanel">
		<m3:MIPanel.Events>
			<mashup:Events>
				<mashup:Event SourceName="ItemDetail" SourceEventName="CompletedSuccessfully" TargetEventName="Update" Debug="True">
					<mashup:Event.Conditions>
						<mashup:Conditions>
							<mashup:Condition SourceValue="{Binding ElementName=inputAPPR, Path=Text}" TargetValue="{Binding ElementName=ItemDetail, Path=[MMS200MI.GetItemFac.APPR]}" Operator="NotEqual" />
						</mashup:Conditions>
					</mashup:Event.Conditions>
					<mashup:Parameter SourceKey="ITNO" />
					<mashup:Parameter TargetKey="FACI" Value="010" />
					<mashup:Parameter SourceKey="APPR" />
				</mashup:Event>
			</mashup:Events>
		</m3:MIPanel.Events>
		<m3:MIPanel.DataSource>
			<m3:MIDataSource Program="MMS200MI" Transaction="UpdItmFac" Type="Update" InputFields="FACI,ITNO,APPR" />
		</m3:MIPanel.DataSource>
	</m3:MIPanel>

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

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.

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.

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 10.0.5.0 but there have been some fixes so this functionality should only be used with Smart Office 10.0.5.1 or later.

Continue reading