As per usual, lots of excuses for not posting in a while.

I’ve recently managed to free up some time to start thinking about M3, JScripts and some of the new shinys that we purchased last year, namely Mashups, LES and DAF.

So what I have recently been tinkering with is Mashups and though a few things have been a little disappointing, others are very kewl.

Let me say, if you delving in to the world of Mashups, take some time to learn a little about WPF and XAML. You can download Microsoft Visual Studio 2010 or higher and create WPF projects and see how XAML works when dealing with controls and layouts.

Using XAML is fantastic – there is a lot of power you can tap in to and there is a vast amount of resources available on the web about doing innovative things with WPF and XAML and by extension Mashups.

I’ve been tinkering with two different ideas, getting data in to a Mashup from a WebService (more on that in another post) and creating a nice easy way for a user to select a customer, then an order and see the order lines of that order.

So, in order to ease the leg-work a little I used the List and Edit template from Lawson, this gave me a list of the customers which you could select and it will provide some key details for you to edit.

Using that as a basic, it was pretty easy to create a new MIListPanel calling the M3API OIS100MI::LstHead and link the CUNO together. Then it was pretty easy to create another MIListPanel and populate that by calling OIS100MI::LstLine and linking on the ORNO.

This yields something like this:

Which is pretty nifty – something useful created in a very short period of time.

However, having been a user there are a few things which would annoy me.

1). Order Date is eating more real-estate than it should for no good reason.
2). The Order Numbers aren’t in order.

Formatting the Order Date

So we don’t like seeing the time added on to the order date, it’s not really relevant and we’ll the time component isn’t populated anyway. So what I’d like to do is set it up so it removes the time component AND lines up the dates.

It’s been a while since I played around with XAML directly, but my googlefu was working. We need to set the StringFormat in our DisplayMemberBinding to something a little more friendly.

Checking our XAML the Mashup created we have the following entry:
<GridViewColumn Header=”Order date” DisplayMemberBinding=”{Binding [ORDT]}” />

A quick change to:
<GridViewColumn Header=”Order date” DisplayMemberBinding=”{Binding [ORDT], StringFormat=dd/MM/yyyy}” />

Now means that we get rid of the time component and the string format is going to always be 10 characters – so it will line up nicely in the column. Some of you may wonder why I didn’t just do
<GridViewColumn Header=”Order date” DisplayMemberBinding=”{Binding [ORDT], StringFormat=d }” />

That would be because on days < 10 the date string will only be 9 characters in length – which means the date won’t line up.

Changing the Sorting Order

Normally this would be pretty straight forward, we’d have a little XAML and a little bit of code in the background – however mortals like me don’t have the tools to add the code 😦

So this requires a little bit of thinking and some extensive googling I came across this post
http://www.galasoft.ch/mydotnet/articles/article-2007081301.aspx

Which talks about creating CollectionViewSource as a resource and illustrates just how powerful XAML is.

After a little bit of adaption I got it working.

And finally 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" xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase">
	<Grid.Resources>
	</Grid.Resources>

	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="500" />
		<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
	   <RowDefinition Height="Auto" />
		<RowDefinition Height="300" />
		<RowDefinition Height="*" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<StackPanel Orientation="Horizontal" Margin="8,16,8,8">
		<Label>Customer #</Label>
		<TextBox Name="SearchCustomerTextBox" Width="100" Margin="0" />
		<Button Content="{mashup:Constant Key=Search,File=Mango.UI}" Width="100" VerticalAlignment="Center" Margin="8,0,5,0">
			<Button.CommandParameter>
				<mashup:Events>
					<mashup:Event SourceEventName="Click" TargetName="CustomerList" TargetEventName="List">
						<mashup:Parameter TargetKey="CUNO" Value="{Binding ElementName=SearchCustomerTextBox, Path=Text}" />
					</mashup:Event>
				</mashup:Events>
			</Button.CommandParameter>
		</Button>

	</StackPanel>
	
	<m3:MIListPanel Name="CustomerList" Margin="8" Grid.Row="1">
		<m3:MIListPanel.Events>
			<mashup:Events>
				<mashup:Event SourceEventName="Startup" TargetEventName="List" />
				<mashup:Event TargetName="milpOrderHeaders" SourceEventName="CurrentItemChanged" TargetEventName="Clear" />
				<mashup:Event TargetName="milpOrderHeaders" SourceEventName="CurrentItemChanged" TargetEventName="List">
					<mashup:Parameter SourceKey="CUNO" TargetKey="CUNO" />
				</mashup:Event>
				<mashup:Event TargetName="milpOrderLines" SourceEventName="CurrentItemChanged" TargetEventName="Clear" />
			</mashup:Events>
		</m3:MIListPanel.Events>
		<m3:MIListPanel.DataSource>
			<m3:MIDataSource Program="CRS610MI" Transaction="LstByNumber" Type="List" InputFields="CUNO" OutputFields="CUNO,CUNM,CUA1,CUA2" MaxReturnedRecords="9999" />
		</m3:MIListPanel.DataSource>
		<ListView ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
			<ListView.View>
				<GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
					<GridView.Columns>
						<GridViewColumn Header="Customer number" DisplayMemberBinding="{Binding [CUNO]}" />
						<GridViewColumn Header="Customer name" DisplayMemberBinding="{Binding [CUNM]}" />
					</GridView.Columns>
				</GridView>
			</ListView.View>
		</ListView>
	</m3:MIListPanel>
	<m3:MIListPanel Name="milpOrderHeaders" Grid.Row="1" Grid.Column="1" Margin="8">
		<m3:MIListPanel.Events>
			<mashup:Events>
				<mashup:Event TargetName="milpOrderLines" SourceEventName="CurrentItemChanged" TargetEventName="Clear" />
				<mashup:Event TargetName="milpOrderLines" SourceEventName="CurrentItemChanged" TargetEventName="List">
					<mashup:Parameter SourceKey="ORNO" TargetKey="ORNO" />
				</mashup:Event>
			</mashup:Events>
		</m3:MIListPanel.Events>
		<m3:MIListPanel.Resources>
			<scm:SortDescription x:Key="sortOrder" PropertyName="[ORNO]" Direction="Descending" />
			<CollectionViewSource x:Key="sortedItems" Source="{Binding Items}">
				<CollectionViewSource.SortDescriptions>
					<scm:SortDescription PropertyName="[ORNO]" Direction="Descending" />
				</CollectionViewSource.SortDescriptions>
			</CollectionViewSource>
		</m3:MIListPanel.Resources>
		<m3:MIListPanel.DataSource>
			<m3:MIDataSource Program="OIS100MI" Transaction="LstHead" Type="Get" InputFields="ORNO,CUNO" OutputFields="ORNO,ORDT,STAT,CUOR,CUCD,ORSL,ORST,NTAM" MaxReturnedRecords="9999" />
		</m3:MIListPanel.DataSource>
		<ListView ItemsSource="{Binding Source={StaticResource sortedItems}}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
			<ListView.View>
				<GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
					<GridView.Columns>
						<GridViewColumn Header="Order number" DisplayMemberBinding="{Binding [ORNO]}" />
						<GridViewColumn Header="Order status" DisplayMemberBinding="{Binding [STAT]}" />
						<GridViewColumn Header="Customer order number" DisplayMemberBinding="{Binding [CUOR]}" />
						<GridViewColumn Header="Order date" DisplayMemberBinding="{Binding [ORDT], StringFormat=dd/MM/yyyy}" />
						<!-- <GridViewColumn Header="Order date" DisplayMemberBinding="{Binding [ORDT]}" /> -->
						<GridViewColumn Header="Lowest status - Customer" DisplayMemberBinding="{Binding [ORSL]}" />
						<GridViewColumn Header="Highest status - Customer" DisplayMemberBinding="{Binding [ORST]}" />
					</GridView.Columns>
				</GridView>
			</ListView.View>
		</ListView>
	</m3:MIListPanel>
	<m3:MIListPanel Name="milpOrderLines" Margin="8" Grid.Row="2" Grid.ColumnSpan="2">
		<m3:MIListPanel.DataSource>
			<m3:MIDataSource Program="OIS100MI" Transaction="LstLine" Type="List" InputFields="ORNO" OutputFields="ITNO,ITDS,ORQT,WHLO,NLAM,SAPR" />
		</m3:MIListPanel.DataSource>
		<ListView ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
			<ListView.View>
				<GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
					<GridView.Columns>
						<GridViewColumn Header="Item number" DisplayMemberBinding="{Binding [ITNO]}" />
						<GridViewColumn Header="Item description" DisplayMemberBinding="{Binding [ITDS]}" />
						<GridViewColumn Header="Ordered quantity" DisplayMemberBinding="{Binding [ORQT]}" />
						<GridViewColumn Header="Warehouse" DisplayMemberBinding="{Binding [WHLO]}" />
						<GridViewColumn Header="Salesprice" DisplayMemberBinding="{Binding [SAPR]}" />
						<GridViewColumn Header="Net line amount" DisplayMemberBinding="{Binding [NLAM]}" />
					</GridView.Columns>
				</GridView>
			</ListView.View>
		</ListView>
	</m3:MIListPanel>
	
	<ui:StatusBar Name="StatusBar" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>