MIListPanel with Open Event

In this post I will use a MIListPanel in order to list customers and then add an open event that will open CRS610 for the selected customer.
I’ll start by getting the Bookmark for the program I want to open on the double click in the list.

1. Start the program and select to create a bookmark on the canvas.
2. Open the shortcut and make a copy of the URL.

The url looks like this:


Note that %2c is URL encoded for , %2b is the url encode for +. I was on the MANGO customer record. I can see that the bookmark key has a bunch of trailing spaces.
I take the Bookmark URL and add a replacement variables for the copmpany and the customer. I will use that URL in my open event later.


I will use the List & edit Customers Template XAML as a starting point. Create new from template and remove the detail view and the event that triggers the detail.

Running the modifed example should give you this:

Now we need to add the Open event to the list.

1. Open the Settingwindow for MIListPanel, go to the events tab and select to create a new Event.

2. Select the open event on the CustomerList and expanf the Advanced section.

3. In the Advanced section set the Link Uri to:

Press OK. In this case we don’t need to to any field mapping. We have added replacement fields CONO and CUNO in the URL. If we need to do a mapping here then we can use the parameters and pass in values there.

Running the Mashup and double clicking the list (or enter when a row is selected) gives me the the following message:

So my CONO in the link did not get replaced. Why? Because CONO is not available in my list so when the event tries to resolve it CONO is nowhere to be found. I need to add yet another parameter to the event that is CONO or I can select to include CONO in the return data from the API (even if it is not visible in the UI.

The MIListPanel has the following fields set.
OutputFields=”CUNO,CUNM,CUA1,CUA2″ adding CONO to the list is a simple fix but knowing how to add values in to the event (perhaps from other sources via bindings) is a more useful skill so I’ll show you that solution instead.

In this case I’ll add a namespace form mforms and use the UserContext class in mforms.

1. Add namespace to the top Grid element.


2. Bind in the value in the event

<mashup:Event SourceName="CustomerList" SourceEventName="Open"
LinkUri="mforms://bookmark?program=CRS610&amp;tablename=OCUSMA&amp;keys=OKCONO%2c{CONO}%2cOKCUNO%2c{CUNO}&amp;option=2&amp;panel=F&amp;name=CRS610%2fF+Bookmark&amp;source=MForms"  >
               <mashup:Parameter SourceKey=”CONO” TargetKey="CONO" Value=”{x:Static mforms:UserContext.CurrentCompany}” />

Oh no. I get an exeption setting the Value. Why? Because CurrentCompany id an int. Now I can use a converter to convert this to a mashup string.

I need to use the ObjectToMashupStringConverter.
1. Add the Converter to the resources

   <mashup:ObjectToMashupStringConverter x:Key="ObjectToMashupStringConverter" />

2.Set the event parameters:

<mashup:Event SourceName="CustomerList" SourceEventName="Open"
LinkUri="mforms://bookmark?program=CRS610&amp;tablename=OCUSMA&amp;keys=OKCONO%2c{CONO}%2cOKCUNO%2c{CUNO}&amp;option=2&amp;panel=F&amp;name=CRS610%2fF+Bookmark&amp;source=MForms" Debug="True">
   <mashup:Parameter SourceKey="CONO" TargetKey="CONO" Value="{Binding Source={x:Static mforms:UserContext.CurrentCompany}, Converter={StaticResource ObjectToMashupStringConverter}}" />

We are done!

We have a list and we use the open event to open a link!
Note that the Open event in MIListPanel is available in 10.0.1 and later. (The same is true for the DataList). But for M3 list the open event can be used in earlier versions.

Here is full 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" xmlns:mforms="clr-namespace:MForms;assembly=MForms">
	<mashup:ObjectToMashupStringConverter x:Key="ObjectToMashupStringConverter" />

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

	<m3:MIListPanel Name="CustomerList" Margin="8" Grid.Row="1">
				<mashup:Event SourceEventName="Startup" TargetEventName="List">
				<mashup:Event SourceName="CustomerList" SourceEventName="Open" LinkUri="mforms://bookmark?program=CRS610&amp;tablename=OCUSMA&amp;keys=OKCONO%2c{CONO}%2cOKCUNO%2c{CUNO}&amp;option=2&amp;panel=F&amp;name=CRS610%2fF+Bookmark&amp;source=MForms">
					<mashup:Parameter SourceKey="CONO" TargetKey="CONO" Value="{Binding Source={x:Static mforms:UserContext.CurrentCompany}, Converter={StaticResource ObjectToMashupStringConverter}}" />
			<m3:MIDataSource Program="CRS610MI" Transaction="LstByNumber" Type="List" InputFields="CUNO" OutputFields="CUNO,CUNM,CUA1,CUA2" MaxReturnedRecords="200" />
		<ListView ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
				<GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
						<GridViewColumn Header="Customer number" DisplayMemberBinding="{Binding [CUNO]}" />
						<GridViewColumn Header="Customer name" DisplayMemberBinding="{Binding [CUNM]}" />
						<GridViewColumn Header="Customer address 1" DisplayMemberBinding="{Binding [CUA1]}" />
						<GridViewColumn Header="Customer address 2" DisplayMemberBinding="{Binding [CUA2]}" />

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

Leave a Reply

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

You are commenting using your 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