Mashup ComboBox for REST Web Service

Here’s a sample Mashup source code to display the result of a REST Web Service in a ComboBox.

Suppose you have a REST Web Service that returns the following XML:

 

Note: How to produce the above XML is outside the scope of this post. This particular XML is produced with a JSP querying the M3 table CMNCMP with JDBC.

In the Mashup Designer, we use the mashup:DataPanel control to call the REST Web Service. How to use that DataPanel is outside the scope of this post, but there is an example in the Mashup Designer > Help > Data Services.

Then, in the DataPanel we add our ComboBox, and in the ComboBox we use a ComboBox.ItemTemplate (similar to the ComboBox for M3 API results):

<ComboBox Name="TabComboBox" SelectedIndex="0" HorizontalAlignment="Left" ItemsSource="{Binding Items}">
    <ComboBox.ItemTemplate>
       <DataTemplate>
          <StackPanel Orientation="Horizontal">
             <TextBlock Text="{Binding XPath=CONO, Mode=OneWay}" />
             <TextBlock Text=" - " />
             <TextBlock Text="{Binding XPath=TX40, Mode=OneWay}" />
          </StackPanel>
       </DataTemplate>
    </ComboBox.ItemTemplate>
 </ComboBox>

The result looks like this:

 

 

The Mashup Designer looks like this:

The full XAML source code is of the :

<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">

	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition Height="*" />
	</Grid.RowDefinitions>

	<mashup:DataPanel Name="Companies">
		<mashup:DataPanel.Events>
			<mashup:Events>
				<mashup:Event SourceEventName="Startup" />
			</mashup:Events>
		</mashup:DataPanel.Events>
		<mashup:DataPanel.DataService>
			<mashup:DataService Type="REST">
				<mashup:DataService.Operations>
					<mashup:DataOperation Name="List">
						<mashup:DataParameter Key="REST.BaseAddress" Value="http://hostname/Thibaud3bis.jsp" />
						<mashup:DataParameter Key="REST.RemoveNamespace" Value="True" />
						<mashup:DataParameter Key="REST.XPath" Value="Companies/Company" />
					</mashup:DataOperation>
				</mashup:DataService.Operations>
			</mashup:DataService>
		</mashup:DataPanel.DataService>
		<ComboBox Name="TabComboBox" SelectedIndex="0" HorizontalAlignment="Left" ItemsSource="{Binding Items}">
			<ComboBox.ItemTemplate>
				<DataTemplate>
					<StackPanel Orientation="Horizontal">
						<TextBlock Text="{Binding XPath=CONO, Mode=OneWay}" />
						<TextBlock Text=" - " />
						<TextBlock Text="{Binding XPath=TX40, Mode=OneWay}" />
					</StackPanel>
				</DataTemplate>
			</ComboBox.ItemTemplate>
		</ComboBox>
	</mashup:DataPanel>
</Grid>

That’s it!

Start a Mashup with input parameters

Here is the solution to start a Mashup in Lawson Smart Office with input parameters.

  1. Suppose we have a Mashup located at:
    C:\Test.xaml

  2. The URI to launch that Mashup in Smart Office would be:
    mashup:///?BaseUri=C:\&RelativeUri=Test.xaml

  3. To send a key:value pair as an input parameter to the Mashup we add the parameter DefaultValues to the URI with an arbitrary key and an arbitrary value separated by a colon. In this example I chose a key InputParameter with a value Hello World! and I URI-encoded them:
    DefaultValues=InputParameter:Hello+World!
  4. The resulting URI is:
    mashup:///?BaseUri=C:\&RelativeUri=Test.xaml&DefaultValues=InputParameter:Hello+World!
  5. In the Mashup we receive the value with the following Binding:
    {Binding Converter={StaticResource CurrentItemValue}, ConverterParameter=InputParameter, Mode=OneTime}
  6. We can show the value in a TextBox for example:
    <TextBox Text="{Binding Converter={StaticResource CurrentItemValue}, ConverterParameter=InputParameter, Mode=OneTime}" Grid.Column="1" />
  7. For that Binding to work we must add the converter Mango.UI.Services.Mashup.CurrentItemValue to our Grid.Resources:
    <Grid.Resources>
    	<mashup:CurrentItemValue x:Key="CurrentItemValue" />
    </Grid.Resources>
  8. Now let’s start the URI:
  9. Here’s the result, the input parameter is shown in the TextBox!
  10. We can also send multiple input parameters by separating the key:value pairs with semi-colons:
    InputParameter1:Hello+World!;InputParameter2:Yeehaa!;InputParameter3:ABC123
  11. The new URI is:
    mashup:///?BaseUri=C:\&RelativeUri=Test2.xaml&DefaultValues=InputParameter1:Hello+World!;InputParameter2:Yeehaa!;InputParameter3:ABC123
  12. The new result is:

Here is a screenshot of the final XAML in the Mashup Designer:

Here is the complete XAML source code:

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" Margin="10">

This solution was given by the following sample provided in the Mashup Designer:

That’s it!

UPDATE 2013-01-31:

Note 1: My example above showed the URI to start a Mashup from the C:\ drive and folder. But to start a Mashup that is deployed, the BaseUri must point to the *.mashup file, for example: mashup:///?BaseUri=MyMashup.mashup&RelativeUri=MyMashup.xaml&DefaultValues=key1:value1;key2=value2 . This will work with a Mashup deployed either privately (Mashup Designer > Deploy > Private), either locally (Smart Office > Show > My Local Applications). But for a Mashup deployed globally (LifeCycle Manager > Admin View > Install) you must prefix the BaseUri with the folder Mashups\, for example: mashup:///?BaseUri=Mashups\MyMashup.mashup&RelativeUri=MyMashup.xaml&DefaultValues=…

Note 2: We can create a Shortcut in Smart Office (for example, CRS610 > Tools > Personalize Shortcuts) and dynamically get values from the current panel by putting the field name in curly braces (angle brackets will work as well), for example: mashup:///?BaseUri=MyMashup.mashup&RelativeUri=MyMashup.xaml&DefaultValues=ItemNumber:{ITNO}

Current date in Mashup

I found this post about getting the current date in XAML. I gave it a try in a Mashup.

Here’s the code to get the current date and time in various formats in a Mashup. You can complement this with the Date picker in Mashup.

<Gridxmlns:sys=”clr-namespace:System;assembly=mscorlib”>

<TextBlock Text="{Binding Source={x:Static sys:DateTime.Today}, StringFormat='Today is: {0:dddd, MMMM dd, yyyy, hh:mm:ss}'}" />
<TextBlock Text="{Binding Source={x:Static sys:DateTime.Today}, StringFormat='One of LSO formats: {0:MMddyy}'}" />
<TextBlock Text="{Binding Source={x:Static sys:DateTime.Today}, StringFormat='M3 API format: {0:yyyyddMM}'}" />
<TextBlock Text="{Binding Source={x:Static sys:DateTime.Today}, StringFormat='\{0:yyyy/MM/dd}'}" />
<TextBlock Text="{Binding Source={x:Static sys:DateTime.Today}, StringFormat='\{0:yyyyddMM}'}" />

And here is a screenshot of the result with the current date displayed in five different formats:

UPDATE 2012-03-26: To get the date in a TextBox add the binding property Mode=OneWay, for example:

<TextBox Text="{Binding Source={x:Static sys:DateTime.Today}, StringFormat='yyyy', Mode=OneWay}" />

Date picker in Mashup

Here’s the XAML code to add a date picker in a Mashup, using DatePicker:

<DatePicker Name="dp" SelectedDateFormat="Short" />

The result looks like this:

If you want to get the value of the date picker use this:

{Binding ElementName=dp, Path=Text}

Here’s a simple Mashup that shows the selected date in a Label:

<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:wf="clr-namespace: System.Windows.Forms;assembly=System.Windows.Forms" xmlns:wfi="clr-namespace: System.Windows.Forms.Integration;assembly=WindowsFormsIntegration">
    <Grid.Resources>
    </Grid.Resources>

    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto" />
       <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <DatePicker Name="dp" SelectedDateFormat="Short" Grid.Column="0" />
    <Label Name="Date" Content="{Binding ElementName=dp, Path=Text}" Grid.Column="1" />

 </Grid>

That’s it!

How to add filters to a ListView in a Mashup

What is the XAML code needed to add filters to a ListView in a Mashup in Lawson Smart Office? The solution is to put a StackPanel with a Label and a TextBox inside the GridViewColumn:

<GridViewColumn>
    <StackPanel>
        <Label Content="Location" Foreground="White" />
        <TextBox Name="WHSL" />
    </StackPanel>
</GridViewColumn>

Here is a screenshot of a desired M3 program (for example: MWS060/B) with filters in the list (in this case: Receiving number, Location, and Lot number); we want to reproduce that list and its filters as a Mashup:

And here is the resulting Mashup with the filters in the list; the result is surprisingly similar to the actual M3 panel:

The particular Mashup shown in the screenshot above calls a REST Web Service made with JSP and which is not provided here. The Mashup passes the values of the filters as parameters of the Web Service in the URL. The Web Service executes SQL against M3 using JDBC and returns the result set as XML. Finally, the Mashup displays the resulting XML in the ListView as data in columns and rows. Here’s the full XAML code of that Mashup:

<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" Margin="10">
	<Grid.Resources>
	</Grid.Resources>

	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
		<RowDefinition Height="*" />
	</Grid.RowDefinitions>

	<StackPanel Orientation="Horizontal" Grid.Row="0">
		<Label Content="Warehouse" VerticalAlignment="Center" Margin="3" />
		<TextBox Name="WHLO" VerticalAlignment="Center" Margin="3" />
		<Label Content="Item number" VerticalAlignment="Center" Margin="3" />
		<TextBox Name="ITNO" VerticalAlignment="Center" Margin="3" />
		<Label Content="Container" VerticalAlignment="Center" Margin="3" />
		<TextBox Name="CAMU" VerticalAlignment="Center" Margin="3" />

		<Button Content="Apply" IsDefault="True" VerticalAlignment="Center" Margin="3" Width="55">
			<Button.CommandParameter>
				<mashup:Event TargetName="WebService" TargetEventName="List">
					<mashup:Parameter SourceKey="WHLO" Value="{Binding ElementName=WHLO, Path=Text}" />
					<mashup:Parameter SourceKey="ITNO" Value="{Binding ElementName=ITNO, Path=Text}" />
					<mashup:Parameter SourceKey="CAMU" Value="{Binding ElementName=CAMU, Path=Text}" />
					<mashup:Parameter SourceKey="REPN" Value="{Binding ElementName=REPN, Path=Text}" />
					<mashup:Parameter SourceKey="WHSL" Value="{Binding ElementName=WHSL, Path=Text}" />
					<mashup:Parameter SourceKey="BANO" Value="{Binding ElementName=BANO, Path=Text}" />
				</mashup:Event>
			</Button.CommandParameter>
		</Button>
	</StackPanel>

	<mashup:DataListPanel Name="WebService" Grid.Row="1" Margin="3">
		<mashup:DataListPanel.Events>
			<mashup:Events>
				<mashup:Event SourceEventName="Startup" />
			</mashup:Events>
		</mashup:DataListPanel.Events>
		<mashup:DataListPanel.DataService>
			<mashup:DataService Type="REST">
				<mashup:DataService.Operations>
					<mashup:DataOperation Name="List">
						<mashup:DataParameter Key="REST.BaseAddress" Value="http://hostname/ItemSearchMashup.jsp?WHLO={WHLO}&amp;ITNO={ITNO}&amp;CAMU={CAMU}&amp;REPN={REPN}&amp;WHSL={WHSL}&amp;BANO={BANO}" />
						<mashup:DataParameter Key="REST.RemoveNamespace" Value="True" />
						<mashup:DataParameter Key="REST.XPath" Value="root/r" />
					</mashup:DataOperation>
				</mashup:DataService.Operations>
			</mashup:DataService>
		</mashup:DataListPanel.DataService>
		<ListView Name="Customers" ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
			<ListView.View>
				<GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
					<GridView.Columns>
						<GridViewColumn Header="Whs" DisplayMemberBinding="{Binding XPath=MLWHLO}" />
						<GridViewColumn DisplayMemberBinding="{Binding XPath=MLREPN}">
							<StackPanel>
								<Label Content="Recvng no" Margin="0" Foreground="White" />
								<TextBox Name="REPN" Margin="0" />
							</StackPanel>
						</GridViewColumn>

						<GridViewColumn Header="Item number" DisplayMemberBinding="{Binding XPath=MLITNO}" />

						<GridViewColumn Header="Name" DisplayMemberBinding="{Binding XPath=MMITDS}" />
						<GridViewColumn Header="Supplier" DisplayMemberBinding="{Binding XPath=LMSUNO}" />
						<GridViewColumn DisplayMemberBinding="{Binding XPath=MLWHSL}">
							<StackPanel>
								<Label Content="Location" Margin="0" Foreground="White" />
								<TextBox Name="WHSL" Margin="0" />
							</StackPanel>
						</GridViewColumn>

						<GridViewColumn DisplayMemberBinding="{Binding XPath=MLBANO}">
							<StackPanel>
								<Label Content="Lot number" Margin="0" Foreground="White" />
								<TextBox Name="BANO" Margin="0" />
							</StackPanel>
						</GridViewColumn>

						<GridViewColumn Header="On-hand" DisplayMemberBinding="{Binding XPath=MLSTQT}" />
						<GridViewColumn Header="Allocatble" DisplayMemberBinding="{Binding XPath=Allocatble}" />
						<GridViewColumn Header="Sts" DisplayMemberBinding="{Binding XPath=MLSTAS}" />
						<GridViewColumn Header="M dt" DisplayMemberBinding="{Binding XPath=LMMFDT}" />
						<GridViewColumn Header="Exp dt" DisplayMemberBinding="{Binding XPath=LMEXPI}" />
						<GridViewColumn Header="Sls dt" DisplayMemberBinding="{Binding XPath=LMSEDT}" />
					</GridView.Columns>
				</GridView>
			</ListView.View>
		</ListView>
	</mashup:DataListPanel>

</Grid>

That’s it!