Selecting the first row in a M3 list to trigger CurrentItemChanged

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.

2 thoughts on “Selecting the first row in a M3 list to trigger CurrentItemChanged

  1. Patsy

    Accomplished an auto select on the first row of a startup list by adding a second event with SourceName=”CurrentList” , SourceEventName=”Running”, TargetEventName=”Apply”. Now looking for a way to auto select the first row on a list panel that has been triggered from a CurrentItemChanged event on a previous panel. With the many enhancements that have been made for mashups since this post, has an option been added that does not require a JSCRIPT? The logic used to auto select at startup does not seem to work.

    Reply

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 )

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