Mashup – The “new modal Dialog window”

Previously this year I wrote a post regarding popups.  And now there is something so much better…
What I didn’t know then, was that there already existed a modal dialog window for exactly this kind of behaviour I wanted within the mashup in later release.
We recently had an upgrade of our environment, and there I suddenly was… Maybe it’s just me not keeping up with all the new features, and I guess there are others of you out there who also don’ know.
So I’d like to share a small example. You can also find an example in the mashup designer under common controls, if you have it.

What I find really nice, is that the dialog windows are own .xaml files, which means it’s being added really quickly if I have to re-use it somewhere else.

This is how it can look, in this case I used it for supplier search, which often can be good to have many places. It writes back from the Dialog.xaml to the primary.xaml.

Below is the code that had to be added in the primary mashup. I also added a ‘F4” gesture to open it.

<StackPanel Grid.Row="1" Grid.Column="3">
                  <mashup:Dialog Name="SupplierMyDialog" Uri="SupplierDialogBox.xaml" WindowHeight="600" WindowWidth="540" HorizontalAlignment="Left" />
                  <TextBox Name="Supplier" Text="{Binding ElementName=SupplierMyDialog, Path=CurrentItem[Supplier]}" MinWidth="80" MaxWidth="80">
                     <TextBox.InputBindings>           
                        <KeyBinding Key="F4" Command="mashup:MashupInstance.MashupCommand">          
                           <KeyBinding.CommandParameter>             
                              <mashup:Events>
                                 <mashup:Event SourceEventName="Click" TargetName="SupplierMyDialog" Debug="True">
                                    <mashup:Parameter TargetKey="SupplierNumber" Value="{Binding ElementName=Supplier, Path=Text}" />
                                 </mashup:Event>
                              </mashup:Events>          
                           </KeyBinding.CommandParameter>       
                        </KeyBinding>  
                     </TextBox.InputBindings> 
                  </TextBox>   
  </StackPanel>

And here is the complete code for the DialogBox itself.  The close button will target the supplier field with the text input.

Grid Height="600" Width="540" 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:clr="clr-namespace:System;assembly=mscorlib" xmlns:Services="clr-namespace:Mango.Services;assembly=Mango.Core" xmlns:ps="clr-namespace:PF.Client.Mashup;assembly=PF.Client">
   <Grid.Resources>
      <mashup:CurrentItemValue x:Key="CurrentItemValue" />
   </Grid.Resources>

   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="540" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition Height="80" />
      <RowDefinition Height="400" />
      <RowDefinition Height="50" />
      <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>

   <GroupBox Style="{DynamicResource styleGroupLineMashup}">
      <Grid Margin="0,0,0,8">
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="150" />
            <ColumnDefinition Width="80" />
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
            <RowDefinition Height="32" />
         </Grid.RowDefinitions>

         <TextBlock Text="Supplier:" Grid.Column="0" />
         <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1">
            <mashup:Dialog Name="SupplierMyDialog" Uri="SupplierDialogBox.xaml" Grid.Column="0" Grid.Row="0">
               </mashup:Dialog>         
            <TextBox Name="SupplierNumber" MinWidth="120" MaxWidth="120" HorizontalAlignment="Left" MaxLength="18" Text="" />

         </StackPanel>

         <Button Name="Button" Grid.Column="2" Content="Search">
            <Button.CommandParameter>
               <mashup:Events>
                  <mashup:Event TargetName="ItemMasterSupplierListBrowse" SourceEventName="Click" TargetEventName="Search" Debug="True">
                     <mashup:Parameter TargetKey="Query" Value="{Binding Path=Text, ElementName=SupplierNumber}" />
                  </mashup:Event>
               </mashup:Events>
            </Button.CommandParameter>
         </Button>
      </Grid>
   </GroupBox>

   <m3:ListPanel Name="ItemMasterSupplierListBrowse" Grid.Row="1" EnablePositionFields="False" EnableSortingOrder="False">
      <m3:ListPanel.Events>
         <mashup:Events>
            <mashup:Event SourceEventName="Startup">
               <mashup:Parameter TargetKey="IDCONO" />
               <mashup:Parameter TargetKey="IDSUNO" />
            </mashup:Event>

            <mashup:Event SourceName="ItemMasterSupplierListBrowse" SourceEventName="CurrentItemChanged" Target="{mashup:SetProperty ElementName=SupplierNumber, Path=Text}" Debug="True">
               <mashup:Parameter SourceKey="SUNO" TargetKey="Value" />
            </mashup:Event>
         </mashup:Events>
      </m3:ListPanel.Events>
      <m3:ListPanel.Bookmark>
         <m3:Bookmark Program="CRS620" Table="CIDMAS" KeyNames="IDCONO,IDSUNO" SortingOrder="1" IncludeStartPanel="True" />
      </m3:ListPanel.Bookmark>
   </m3:ListPanel>

   <Button Content="Close" Grid.Row="2">
      <Button.CommandParameter>
         <mashup:Events>
            <mashup:Event SourceEventName="Click" TargetEventName="Close">
               <mashup:Parameter TargetKey="Supplier" Value="{Binding ElementName=SupplierNumber, Path=Text}" />
            </mashup:Event>
         </mashup:Events>
      </Button.CommandParameter>
   </Button>
   
   <ui:StatusBar Name="StatusBar" Grid.Row="3" Grid.Column="0" />
</Grid>

Hope it can be to any help.

Regards
Ken Eric