When you have a M3 list in a Mashup a common scenario is that you would like to have the first row selected so that any dependant mashup control can react to CurrentItemChanged.

This is for example a scenario when you open the Mashup from a panel with JScript so that you pass in a Customer id, CUNO. You want to load related information right away. This requirement is something that we will consider for future versions to have an option to say, ‘select first line on startup’.

But until then there is a workaround that involves using a JScript to set the selected item in the list. I’ll do an example with a mashup that loads CRS610 and reacts to CurrentItemChanged to load related data in a MIPanel.

The events hooks everything together and I’ll have a Startup event and a CurrentItemChanged event.

This is what the final result looks like.

Ok, I have a few personalizations in my list so your mashup will not look exact the same.

This is the Mashup 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">
  <Grid.Resources>
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <m3:ListPanel Name="customers" Margin="8" IsListHeaderExpanded="True">
    <m3:ListPanel.Events>
      <mashup:Events>
        <mashup:Event SourceEventName="Startup">
          <mashup:Parameter TargetKey="OKCONO" />
          <mashup:Parameter TargetKey="OKCUNO" />
        </mashup:Event>
      </mashup:Events>
    </m3:ListPanel.Events>
    <m3:ListPanel.Bookmark>
      <m3:Bookmark Program="CRS610" Table="OCUSMA" KeyNames="OKCONO,OKCUNO" />
    </m3:ListPanel.Bookmark>
  </m3:ListPanel>
  <m3:MIPanel Name="detailPanel" Grid.Row="1" Margin="8">
    <m3:MIPanel.Events>
      <mashup:Events>
        <mashup:Event SourceName="customers" TargetName="detailPanel" SourceEventName="CurrentItemChanged" TargetEventName="Get">
          <mashup:Parameter SourceKey="OKCUNO" TargetKey="CUNO" />
        </mashup:Event>
      </mashup:Events>
    </m3:MIPanel.Events>
    <m3:MIPanel.DataSource>
      <m3:MIDataSource Program="CRS610MI" Transaction="GetBasicData" Type="Get" InputFields="CUNO" OutputFields="CUNM,CUA1,CUA2,CSCD,STAT" />
    </m3:MIPanel.DataSource>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="8" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="16" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="8" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="16" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <Label Content="Customer name:" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" />
      <TextBox MaxLength="36" Text="{Binding [CUNM]}" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
      <Label Content="Customer address 1:" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" />
      <TextBox MaxLength="36" Text="{Binding [CUA1]}" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
      <Label Content="Customer address 2:" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" />
      <TextBox MaxLength="36" Text="{Binding [CUA2]}" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
      <Label Content="Country code:" Grid.Row="0" Grid.Column="4" HorizontalAlignment="Left" VerticalAlignment="Center" />
      <TextBox MaxLength="3" Text="{Binding [CSCD]}" Grid.Row="0" Grid.Column="6" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
      <Label Content="Customer status:" Grid.Row="1" Grid.Column="4" HorizontalAlignment="Left" VerticalAlignment="Center" />
      <TextBox MaxLength="2" Text="{Binding [STAT]}" Grid.Row="1" Grid.Column="6" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
    </Grid>
  </m3:MIPanel>
</Grid>

Now the first line is per default not selected once the list is loaded. So we add the following JScript (deploy it) and connect it to CRS610MI. More about

import System;
import System.Windows;
import System.Windows.Controls;
import MForms;
import Mango.UI.Utils;
import Mango.UI.Services.Mashup.Events;
import System.Windows.Threading;

package MForms.JScript {
      class FocusFirstLineMashup {
            var list, item  = 0;
            public function Init(element: Object, args: Object, controller : Object, debug : Object) {
                  debug.WriteLine("Script Initializing.");
                  if(element != null) {
                        debug.WriteLine("Connected element: " + element.Name);
                  }

                  var content : Object = controller.RenderEngine.Content;

                  list = controller.RenderEngine.ListControl.ListView;
                  if(IsMashup(controller.RenderEngine.ListControl.ListView)) {

                        if(list != null & list.SelectedItems.Count == 0){
                              var setSelectedDelegate : Action = SetFirstRowSelected;
                              list.Dispatcher.BeginInvoke(DispatcherPriority.Input, setSelectedDelegate);
                        }
                  }
            }
            private function IsMashup(element : Object) {
                  var type = Type.GetType("Mango.UI.Services.Mashup.MashupInstance,Mango.UI");
                  return Helpers.FindParent(element, type) != null;
            }

            private function SetFirstRowSelected(){
              list.SelectedIndex=0;
            }
      }
}

The real trick here is to dispatch the call that sets the selected index. This is a good trick to test when setting focus on controls as well becuase you might not be able to set focus but if you dispatch it to later on the UI thread it might work just fine. Also notice that I used a check to see if a JScript is running in a Mashup.