M3 ideas


Home | Pages | Archives


Mashup – The “new modal Dialog window”

November 30, 2013 1:51 pm

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.

SupplierDialogBox2

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

 

Posted by kgilja

Categories: Infor Smart Office Mashups

Tags: , ,

2 Responses to “Mashup – The “new modal Dialog window””

  1. […] Mashup – The “new modal Dialog window” […]

    Like

    By Site map – M3 ideas on May 9, 2017 at 12:25 pm

  2. Loved reeading this thank you

    Like

    By Metronome Token on July 8, 2023 at 2:35 pm

Leave a Reply



Mobile Site | Full Site


Get a free blog at WordPress.com Theme: WordPress Mobile Edition by Alex King.