Enabling a button on CurrentItemChanged in a Mashup

One of the nice features in WordPress is that I can see what users search for on my blog. One of the searches last week was “xaml enable button after listpanel currentitemchanged”. In this case I think I know what the reader wanted to do so this post is about how to control IsEnabled on a button depending on the current item changed event.

I know how to do this in 10.0.0 and later. I might know how to do it before that but it would involve a converter and I’m not sure if we do have an object to bool converter (in 9.1.2).

In 10.0.0 we added support for a generic property setter using the mashup event framework. The example can be found in the Designer under Help -> Common -> Property Setter.

In my example I’ll add a M3 List, set up the start-up event and add a button that can be used to open another mashup or another program using a bookmark. But the button should not be enabled unless there is a CurrentItem selected in the list, probably becuase you want to get a value from the list and pass it on to whatever program or Url you would like to open.

The M3List panel exposes a CurrentItem property so I might be able to use that with a converter but I’ll show you how to to it with mashups events since that is easier to understand and will work in other scenarios with other mashup controls that has the CurrentItemChanged Event.

The result looks like this:

This is the xaml for the list and the button with the button being disabled until an item is selected in the list.

<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="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <m3:ListPanel Name="Customers" Margin="8">
    <m3:ListPanel.Events>
      <mashup:Events>
        <mashup:Event SourceEventName="Startup">
          <mashup:Parameter TargetKey="OKCONO" />
          <mashup:Parameter TargetKey="OKCUNO" />
        </mashup:Event>
        <mashup:Event SourceName="Customers" SourceEventName="CurrentItemChanged" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
          <mashup:Parameter TargetKey="Value" Value="True" />
        </mashup:Event>
        </mashup:Events>
    </m3:ListPanel.Events>
    <m3:ListPanel.Bookmark>
      <m3:Bookmark Program="CRS610" Table="OCUSMA" KeyNames="OKCONO,OKCUNO" />
    </m3:ListPanel.Bookmark>
  </m3:ListPanel>
  <Button Grid.Row="1" Margin="8" Name="MyButton" IsEnabled="False" Width="150">Open Another Program</Button>
  <Button Grid.Row="2" Margin="8" Name="RefreshButton" Content="Refresh List">
    <Button.CommandParameter>
      <mashup:Events>
        <mashup:Event TargetName="Customers" SourceEventName="Click" TargetEventName="List" />
      </mashup:Events>
    </Button.CommandParameter>
  </Button>
  <ui:StatusBar Name="StatusBar" Grid.Row="3" Grid.Column="0" />
</Grid>

To start with the button is disabled. I use the property setter below to set the property (IsEnabled) to True on CurrentItemChanged.

<mashup:Event SourceName="Customers" SourceEventName="CurrentItemChanged" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
   <mashup:Parameter TargetKey="Value" Value="True" />
</mashup:Event>

This works fine it the lists only loads once but if it is reloaded the row will get unselected which means that we need to set the “IsEnabled” to false as well. You can verify this by testing the XAML and pressing the refresh list. The Button will still be enabled and this is not what we want.

The solution is to use the Running event of the list. Before the data is loaded it will always go though the Running state.
We add another event like this:

<mashup:Event SourceName="Customers" SourceEventName="Running" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
  <mashup:Parameter TargetKey="Value" Value="False" />
</mashup:Event>

What the event framkework will do is that when the Running event occurrs it will take the MyButtonElement and set the property IsEnabled to False.

Easy when you know the syntax? Now you can apply this to all kinds of properties!

Here is the final XAML with all events, except what will actually happen when you press the button :-). You can use the LinkUri on the Click event to launch anything you want.

<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="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <m3:ListPanel Name="Customers" Margin="8">
    <m3:ListPanel.Events>
      <mashup:Events>
        <mashup:Event SourceEventName="Startup">
          <mashup:Parameter TargetKey="OKCONO" />
          <mashup:Parameter TargetKey="OKCUNO" />
        </mashup:Event>
        <mashup:Event SourceName="Customers" SourceEventName="CurrentItemChanged" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
          <mashup:Parameter TargetKey="Value" Value="True" />
        </mashup:Event>
        <mashup:Event SourceName="Customers" SourceEventName="Running" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
          <mashup:Parameter TargetKey="Value" Value="False" />
        </mashup:Event>
      </mashup:Events>
    </m3:ListPanel.Events>
    <m3:ListPanel.Bookmark>
      <m3:Bookmark Program="CRS610" Table="OCUSMA" KeyNames="OKCONO,OKCUNO" />
    </m3:ListPanel.Bookmark>
  </m3:ListPanel>
  <Button Grid.Row="1" Margin="8" Name="MyButton" IsEnabled="False" Width="150">Open Another Program</Button>
  <Button Grid.Row="2" Margin="8" Name="RefreshButton" Content="Refresh List">
    <Button.CommandParameter>
      <mashup:Events>
        <mashup:Event TargetName="Customers" SourceEventName="Click" TargetEventName="List" />
      </mashup:Events>
    </Button.CommandParameter>
  </Button>
  <ui:StatusBar Name="StatusBar" Grid.Row="3" Grid.Column="0" />
</Grid>

13 thoughts on “Enabling a button on CurrentItemChanged in a Mashup

  1. Karin

    You can’t do it with events in 9.1.2. If you are using the M3List you cannot do it att all. Instead of having the button disabled I suggest that you add a JScript that always select the first row if there is no selection. You can find the example in one of the previous posts. The other way I was thinking about was using the CurrentItem property on the M3List, but that property came in 9.1.3.

    If you are using a MIList or a DataList with a DataService you can use the SelectedItem and bind it using our Mango.UI.Utils.IsNotNullOrEmptyConverter so that it converts null to false for your IsEnabled property.

    Example:
    IsEnabled=”{Binding Path=SelectedItem, ElementName=listViewCountries, Converter={StaticResource notNullConverter}}”

    Declare the util namespace like this:

    xmlns:util=”clr-namespace:Mango.UI.Utils;assembly=Mango.UI”

    Add the converter:

    I have a full example so I might do a new post with just a quick XAML.

    Reply
  2. Pingback: Enable a button on a selected item « Developing for Lawson Smart Office

  3. thibaudatwork

    Karin, thanks for the great post. I tried the example but I get an error. I copied the source code from your post using the “copy to clipboard” icon of the SyntaxHighlighter. I pasted it in the Mashup Designer. When I save the XAML file I get the error message “Cannot create unknown type ‘{clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI}SetProperty’.” I have Smart Office Version: 9.1.3.1.7. Your post mentions it should work for 9.1.3. Am I missing something?

    Reply
  4. karinpb Post author

    Strange, you are on 9.1.3 FP1. I thought this was done for 9.1.3. Seems like it was not until 10.0.0. Please check the mashup designer. Do you have Help -> Common -> Property Setter?

    If not you don’t have it. Or actually that error message is the text book case for not having it. I’ll update my post.

    Sorry!

    Reply
    1. thibaudatwork

      Karin, I don’t have the Property Setter example in the Common menu of that Smart Office 9.1.3.1.7. I just have Converters, Data Manipulation, Tab Control, Window, Visibility. Thanks for the verification. I’ll wait for the next version then.

      Reply
  5. Marianne Ihlen

    Hi!
    I would like to have a button that opens a M3 program when I click on it, and I want it to use values from the marked line in the list as input values.

    I have managed to create a button that opens a program with no start values using mforms automation, but how do I do if I want it to also bring start values, like current item change but via a button?

    I have two cases, the first is to have a button in a mashup that executes a related option. The second is to have a button that runs a program which isn´t related, like the “M3P3”-jscript is doing.
    Do you have any solutions for this? Is it possible?

    Reply
    1. karinpb Post author

      Hi,
      An example that executes an option (in a Mashup) is found on the About page in this comment from Peter. http://lawsonsmartoffice.com/about/#comment-269.

      As for the MForms automation link in a Mashup I would try the LinkUri property together with variable substitution. Se for example http://lawsonsmartoffice.com/2011/09/19/creating-a-mashup-with-a-webbrowser-control/. The current value from the selected list is entered in the event as well.

      One issue that you might get it that the values that are sent in the XML has to be xml encoded but the XML has to be URLencoded. The recommended way would be to use a bookmark together with the LinkUri property but the Automation XML might work as long as the data does not have &,>,<, or space for example.

      You use the event replacement {fieldName} to add data from the current selected item on a row.

      Reply
  6. Gunilla Andersson

    Hi!
    Is it possible to have a button that will be enabled/disabled depending on values on the marked lines? I have managed to create a button that is disabled from start, then it will be enabled only if I click on a line with a certain ordertype (I have used conditions on the CurrentItemChange event). So far so good!

    But my problem is that when I click on another line in the list, the button isn´t updated.

    This is my code for the “button”-events on the listpanel (Listpanel=PlannedOrders):

    Can you see what I have missed? The function we are heading for is a possibility to have a button enabled only for certain order types.

    Reply
  7. Gunilla Andersson

    Seems like I can´t post code. But anyway, I have used the current item change and running events described in the post. Maybe they don´t work if I want the button to be enabled/disabled depending on a value in the list on the record marked?

    Reply
  8. Pingback: Mashup – Enable a button based on status and CurrentItemChanged | Developing for Infor Smart Office

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