Triggering a Work Flow in Process Server from a Mashup

In Lawson Smart Office 9.1.3 we introduced the TriggerPanel control. It is a Process Server control that can be used to trigger a form in a asynchronpous way. There is no return value from the call except the workitem id generated from Process Server. But it is still an easy way to create a form and submit an action to trigger a flow.

You can think about the TriggerPanel in two different scenarios. One where you have a standrad form and a submit button to trigger the flow and another scenario when there is a trigger of the form in response to another Mashup event, for example the loading of an S3 form.

Here is one usage scenario:

1. User launches Item Master Request mashup.
2. User fills in various fields pertaining to an IC Item Master record, and also some free text on why they are requesting this item.
3. User clicks submit.
4. Mashup sends all field data to a predetermined ProcessFlow service. Each piece of field data becomes a variable in ProcessFlow.
5. ProcessFlow recieves the data and acknowledges the receipt synchronously back to LSO.
6. The mashup displays a pop-up message “Request Submitted” based on the positive receipt information from ProcessFlow.
7. ProcessFlow routes all details of the request to the approporiate Approver as defined in the Flow.

And this is what it looks like:

And the xaml:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI" xmlns:ps="clr-namespace:PF.Client.Mashup;assembly=PF.Client" Name="itempanel">
  <Grid.Resources>
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <ps:TriggerPanel Name="PFForm" Service="LSO Mashup" Product="ERP" DataArea="">
  <GroupBox Header="Item Master Request Form" Margin="8">
  <Grid Margin="8">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="8" />
    <ColumnDefinition Width="200" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
  <RowDefinition Height="Auto" />
  <RowDefinition Height="4" />
  <RowDefinition Height="Auto" />
  <RowDefinition Height="4" />
  <RowDefinition Height="Auto" />
  <RowDefinition Height="4" />
  <RowDefinition Height="Auto" />
  <RowDefinition Height="4" />
  <RowDefinition Height="Auto" />
  <RowDefinition Height="*" />
  </Grid.RowDefinitions>

    <TextBlock Grid.Column="0" Grid.Row="0" Text="Vendor Item Number:" VerticalAlignment="Center" HorizontalAlignment="Left" />
    <TextBox Grid.Column="2" Grid.Row="0" Text="{Binding [VendorItem]}" />

    <TextBlock Grid.Column="0" Grid.Row="2" Text="Vendor Number:" VerticalAlignment="Center" HorizontalAlignment="Left" />
    <TextBox Grid.Column="2" Grid.Row="2" Text="{Binding [Vendor]}" />

    <TextBlock Grid.Column="0" Grid.Row="6" Text="Vendor Price:" VerticalAlignment="Center" HorizontalAlignment="Left" />
    <TextBox Grid.Column="2" Grid.Row="6" Text="{Binding [VendorPrice]}" />

    <Button Margin="0,8,0,0" Content="Request" Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Center" HorizontalAlignment="Right">
      <Button.CommandParameter>
               <mashup:Event TargetName="PFForm" TargetEventName="TriggerFlow">
               </mashup:Event>
            </Button.CommandParameter>
    </Button>

  </Grid>
  </GroupBox>
  </ps:TriggerPanel>
</Grid>

VendorItem, Vendor, VendorPrice are all variables in the flow. Criterias can be added as well.

There is a fill FillForm event in the triggerpanel that you can use to add values in from another form, say the current S3 form you are viewing.
In Smart Office 10.0.0 the TriggerPanel has more functionality – like calling a flow and getting data back. More on that will come.

Using a combobox to hide and show different forms
You can use a drop down to hide and show different forms as shown in the following example.

<Grid Margin="20" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI" xmlns:ps="clr-namespace:PF.Client.Mashup;assembly=PF.Client" Name="itempanel">
   <Grid.Resources>
  <mashup:ObjectToVisibilityConverter x:Key="visibilityConverter" />
   </Grid.Resources>

   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
   </Grid.RowDefinitions>

<WrapPanel Grid.Row="0">
   <Label Name="Label1" Content="Select Type of Request:" />
   <ComboBox Name="RequestTypeCombo" MinWidth="200" Width="200" SelectedValuePath="Tag" MaxWidth="300" SelectedIndex="0">
         <ComboBoxItem Content="Item" Tag="ItemForm" />
         <ComboBoxItem Content="Vendor Item" Tag="VendorItemForm" />
      </ComboBox>
</WrapPanel>

<ps:TriggerPanel Name="ItemForm" Service="LSO Mashup" Product="ERP" DataArea="CP901" Grid.Row="1" Visibility="{Binding ElementName=RequestTypeCombo, Path=SelectedValue,ConverterParameter=ItemForm, Converter={StaticResource visibilityConverter}}">
      <GroupBox Header="Item Master Request Form" Margin="8">
         <Grid Margin="8">
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="130" />
               <ColumnDefinition Width="8" />
               <ColumnDefinition Width="200" />
               <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="4" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="4" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="4" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="4" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <TextBlock Grid.Column="0" Grid.Row="0" Text="Item Number:" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <TextBox Grid.Column="2" Grid.Row="0" Text="{Binding [Item]}" />

            <TextBlock Grid.Column="0" Grid.Row="2" Text="Description:" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <TextBox Grid.Column="2" Grid.Row="2" Text="{Binding [Description]}" />

            <TextBlock Grid.Column="0" Grid.Row="6" Text="Stock UOM:" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <TextBox Grid.Column="2" Grid.Row="6" Name="UOM" Text="{Binding [UOM]}" />

            <Button Margin="0,8,0,0" Content="Request" Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Center" HorizontalAlignment="Right">
               <Button.CommandParameter>
                  <mashup:Event TargetName="ItemForm" TargetEventName="TriggerFlow">
               </mashup:Event>
               </Button.CommandParameter>
            </Button>
         </Grid>
      </GroupBox>
   </ps:TriggerPanel>

   <ps:TriggerPanel Name="VendorItemForm" Service="LSO Mashup" Product="ERP" DataArea="CP901" Grid.Row="1" Visibility="{Binding ElementName=RequestTypeCombo, Path=SelectedValue,ConverterParameter=VendorItemForm, Converter={StaticResource visibilityConverter}}">
      <GroupBox Header="Vendor Item Request Form" Margin="8">
         <Grid Margin="8">
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="130" />
               <ColumnDefinition Width="8" />
               <ColumnDefinition Width="200" />
               <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="4" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="4" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="4" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="4" />
               <RowDefinition Height="Auto" />
               <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <TextBlock Grid.Column="0" Grid.Row="0" Text="Vendor Item Number:" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <TextBox Grid.Column="2" Grid.Row="0" Text="{Binding [VendorItem]}" />

            <TextBlock Grid.Column="0" Grid.Row="2" Text="Vendor Number:" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <TextBox Grid.Column="2" Grid.Row="2" Text="{Binding [Vendor]}" />

            <TextBlock Grid.Column="0" Grid.Row="6" Text="Vendor Price:" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <TextBox Grid.Column="2" Grid.Row="6" Text="{Binding [VendorPrice]}" />

            <Button Margin="0,8,0,0" Content="Request" Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Center" HorizontalAlignment="Right">
               <Button.CommandParameter>
                  <mashup:Event TargetName="VendorItemForm" TargetEventName="TriggerFlow">
               </mashup:Event>
               </Button.CommandParameter>
            </Button>
         </Grid>
      </GroupBox>
   </ps:TriggerPanel>
</Grid>

The trick that hides and shows the different forms is this binding to the Visibility property on the Grid that contains the form. Notice how it binds to a value on the ComboBox.

Visibility="{Binding ElementName=RequestTypeCombo, Path=SelectedValue,ConverterParameter=ItemForm, Converter={StaticResource visibilityConverter}}"

The name of the combobox is RequestTypeCombo and the path to the selected value is “SelectedValue” the value for the combo is the value of the Tag property in ComboBoxItem. The converter parameter is used for the check contition. If the selected value is ItemForm the VisibilityConverter will return visible.

These examples all triggers the workflow by pressing a button but you could just as well call it from an event like I do in the following example.

If you have any comments or questions on the TriggerPanel just add a comment!

6 thoughts on “Triggering a Work Flow in Process Server from a Mashup

  1. Pingback: Comparison of solutions to trigger PFI flows « M3 ideas

  2. Josh

    What about being able to format the return message from Process Flow?

    Maybe I would not want to tell the user what the service name was, or what Work Unit was created. Sometimes I would want to tell the user something simple like “Thank you for your submission, the AP Clerk will get back to you shortly”.

    Thanks

    Reply
    1. karinpb Post author

      Hi Josh,
      This is currently not possible but I do see the need for it so I’ll add it as a request for coming versions.
      Thanks for the input!

      Reply
    2. karinpb Post author

      The option to set a specific success message and success message header instead of the reply from Process Server has been added for the TriggerPanel in Lawson Smart Office 10.0.4. There are two new properties that will be available in the Properties tab of the Mashup Designer. Please note that the two properties will not be availabe in screen where you do must of the configuration but only in the advanced properties tab that is part of the Mashup Designer.

      Reply
  3. Heiko

    Hi Karin,
    regarding this Binding:
    Visibility=”{Binding ElementName=RequestTypeCombo, Path=SelectedValue,ConverterParameter=ItemForm, Converter={StaticResource visibilityConverter}}”
    – is there any documentation about which values are supported as “ConverterParameter” (and the corresponding converter Objects) as ItemForm seems to be a built-in Property of the framework?

    Reply
    1. karinpb Post author

      Hi Heiko,
      The first you should check is the SDK documentation that you can find under the Help menu in the Mashup Designer. The class name of the converter is ObjectToVisibilityConverter , which you can see in the resource part.

      Specific supported Command parameters should be documented by the developer. The documentation only contains this:
      “Takes any object and converts it to a Visability.Collapsed or Visability.Visible. The converter will convert true and “True” to Visible. However the parameter object can be a string. In that case the converter will return visible if the parameter and the object is qual. The same is true for any object but the scenario for the converter is when you have a combobox and the selection will determine if the control should be visible.”

      In this specific case ItemForm is just a string – the name of a control. The Converter compares “ItemForm” with the selected value of the combobox. If you check the combobox you can see that it has two options (set by the Tag property). If the binding equals ItemForm then the result is Visisble. But note that the parameter can be any value since it is an object.

      For an overview of available converters seach for Converter in the SDK (API) Documentation.

      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