Mashups: Orders for a Customer – Sorting on the Order Number

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>
This entry was posted in M3 / MoveX, Mashups. Bookmark the permalink.

7 Responses to Mashups: Orders for a Customer – Sorting on the Order Number

  1. Hi Scott. Welcome back to posting. I like the Sort sample. Does it work on the result set (for example the top 100 records which is the MI default) or on the entire M3 table? In other words, is the sorting done server-side or client-side? Do you know?

    • potatoit says:

      Thanks, it’s good to get some posts back underway and to spend some time in the M3 world again.

      Unfortunately the sorting is only done on the client-side. So if you are only getting 100 records at a time then confusion will ensue.
      In this example I did set the customer list to be 9999 records so that is always an option 😉

      The other thing that I have been investigating (however encountered a ‘bug’ with Mashups?) is wrapping an SQL query in a Webservice. The query itself will define the sorting.

      Cheers,
      Scott

  2. Al Johnson says:

    Hi Scott. More good stuff. Looking at the post you reference, have you got the filtering aspect working as well? It would be really useful to pull data back from an API call, then filter based on the output fields.

    Cheers, Al.

    • potatoit says:

      Hi Al,

      filtering – I have vague recollections of a lady from Microsoft who was involved in the early design or at least demonstration of WPF who did some filtering in pure XAML. I’ll need to find her website again.

      You can always reload the data with the filters applied, not terribly efficient – this is something that I am working on with a webservice at the moment and got running with a vital clue provided by an Infor staff member. I just plan to clean it up, refactor and then post.

      And I am sure I saw something about filtering in Mashups Designer – I’ll need to take another good look there.

      Cheers,
      Scott

      • potatoit says:

        The ladies name was Bea Stollnitz – http://www.zagstudio.com/ there is lots of interesting XAML stuff in there, a lot backed with code but still useful to know. I’m pretty sure buried somewhere there was a pure xaml filter example…

  3. Eric Wayker says:

    Hello

    I am utilizing an MIListPanel object where I want trap the listed values in a collection object. The collection
    would be passed from the Mashup to a JScript via a button clicked event.

    The source Item binding would only contain a single value, like ORNO in your example.

    It looks like you might be able to use CollectionView.SourceCollection; but I’ve not been able to get that to work for me.

    Do you have any hints?

    Regards

    Eric

    • potatoit says:

      The MIListPanel is an IEnumerable property called “Items”, it also has a property called ListControl – assuming it’s the same as the MForms ListControl then it will point to a ListView from which you can get the .Items property.

      Cheers,
      Scott

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s