Mashup – Browsing with F4 through a popup

Last week Thibaud invited me to share some of our M3 ideas from a customer’s point of view.
The invitation was accepted, hoping to make the community grow beyond just Infor.
I will be sharing some of our knowledge and experience on the subject mashup, and this is my first post.

One of the first thing the end-users requested after releasing our first mashups was the F4/browse functionality missing.
A few request for help was sent, but the main feedback was that this is not possible from a mashup and had to be part of a SDK application.
Unfortunately this was out of my range and a work around had to be made.
After spending quite some time googling/reading I came across the popup class.
“A Popup control displays content in a separate window relative to an element or point on the screen. ”

This is a simple example using the F4 command to open the popup and then allowing you to browse and write back with CurrentItemChanged.

Before:
F4

After:
F4Browse

Real world example, but this time with a button controlling the popup.

ExampleBrowse

And here is the code:

<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.Resources>
	</Grid.Resources>

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

	<StackPanel Grid.Row="0" Margin="8,8,0,0" Orientation="Horizontal">
			<StackPanel.InputBindings>
        		 <KeyBinding Key="F4" Command="mashup:MashupInstance.MashupCommand">
					 <KeyBinding.CommandParameter>
						<mashup:Events>
							<mashup:Event Target="{mashup:SetProperty ElementName=BrowseLocation, Path=IsOpen}">
								<mashup:Parameter TargetKey="Value" Value="True" />
							</mashup:Event> 	
						</mashup:Events>
					</KeyBinding.CommandParameter>
				</KeyBinding>
      	</StackPanel.InputBindings>

			<TextBlock Text="Location:" />
			<TextBox Name="Location" Width="50" Height="20" Margin="5,0,0,0" />	

	</StackPanel>

	<StackPanel HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0">

		<Popup Name="BrowseLocation" Width="600" Height="450" Popup.StaysOpen="False">
			<Border Background="White">
				<Grid>
					<Grid.RowDefinitions>
						<RowDefinition Height="400" />
						<RowDefinition Height="50" />
					</Grid.RowDefinitions>
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="600" />

					</Grid.ColumnDefinitions>
					<m3:ListPanel Name="ListLocation" Grid.Column="0" Grid.Row="0" EnableBasicOptions="False" IsDefaultActionEnabled="False" EnableRelatedOptions="False">
						<m3:ListPanel.Events>
							<mashup:Events>
								<mashup:Event SourceEventName="Startup">
									<mashup:Parameter TargetKey="MLCONO" />
									<mashup:Parameter TargetKey="MLFACI" DefaultValue="100" />
									<mashup:Parameter TargetKey="MLWHSL" />
								</mashup:Event>

								<mashup:Event SourceName="ListLocation" SourceEventName="CurrentItemChanged" Target="{mashup:SetProperty ElementName=Location, Path=Text}">
										<mashup:Parameter TargetKey="Value" SourceKey="WHSL" />
								</mashup:Event>
							</mashup:Events>
						</m3:ListPanel.Events>
						<m3:ListPanel.Bookmark>
							<m3:Bookmark Program="MMS010" Table="MITPCE" KeyNames="MSCONO,MSWHLO,MSWHSL" SortingOrder="1" />
						</m3:ListPanel.Bookmark>
					</m3:ListPanel>

					<Button Name="Close" Content="Close" Grid.Row="1" Grid.Column="0">
								<Button.CommandParameter>
									<mashup:Events>
										<mashup:Event Target="{mashup:SetProperty ElementName=BrowseLocation, Path=IsOpen}" SourceEventName="Click">
											<mashup:Parameter TargetKey="Value" Value="False" />
										</mashup:Event>
									</mashup:Events>
								</Button.CommandParameter>
					</Button>	
				</Grid>
			</Border>
		</Popup>
	</StackPanel>
</Grid>

Regards
Ken Eric

6 thoughts on “Mashup – Browsing with F4 through a popup”

  1. Thank you Ken Eric for sharing.
    I have a followup question. In the code you have a stackpanel with the textbox “Location” and the stackpanel binding to bind the F4 popup.

    But if you have two or more fields/textboxes in the same stackpanel, and want to have a different pop-up for each textbox – how to solve this?

    Like

    1. Have you tried adding the KeyBinding directly on the TextBox Like this?

      		<TextBox Name="Location" Width="50" Height="20" Margin="5,0,0,0" Style="{DynamicResource styleTextBoxBrowse}">	
      			<TextBox.InputBindings>
              		 <KeyBinding Key="F4" Command="mashup:MashupInstance.MashupCommand">
      					 <KeyBinding.CommandParameter>
      						<mashup:Events>
      							<mashup:Event Target="{mashup:SetProperty ElementName=BrowseLocation, Path=IsOpen}">
      								<mashup:Parameter TargetKey="Value" Value="True" />
      							</mashup:Event> 	
      						</mashup:Events>
      					</KeyBinding.CommandParameter>
      				</KeyBinding>
            	</TextBox.InputBindings>
            </TextBox> 
            

      Like

    1. Hi Amine. With H5 Client it’s possible to do key binding and F4 Browse but probably not by conversion of the XAML since I don’t think Infor is supporting all of XAML to Web Mashup, that would be impossible. You probably have to write your JavaScript for it. With JavaScript most everything is possible.

      Like

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 )

Google+ photo

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

Connecting to %s