Category Archives: Mashup

ScriptUtil.LoadAssemblyFromUrl() is Obsolete

The ScriptUtil.LoadAssemblyFromUrl method was marked obsolete in v10.2.1.0 HF32. A workaround for M3 scripts using the method is to replace with the following code:

var assembly = Assembly.Load(WebReader.GetRequestBinary(url));

In between version 10.2.1.0.333 (HF32) and 10.2.1.0.385 (HF42) the obsolete method will
fail in silence and just return null.

This has been changed in 10.2.1.0.389 (HF43) and an InvalidOperationException will be thrown when calling the method.

JSON support in REST data service – Part III

Create, Update or Delete a User

In the third post we continue to use the fake online REST service to add operations to create, update and delete a user.

Mashup_REST_JSON_DELPATCHPUT

We add three DataOperation declarations to create, update and delete a user and set the OutputType to be JSON to easily show the request response in a textbox as a text string. The online service will return a correct response but no changes will actually be done in the service database, this is just for testing purposes.

<mashup:DataOperation Name="CreateUserPost">
    <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users" />
    <mashup:DataParameter Key="REST.InputJsonTemplate" Value="{StaticResource PostTemplate}" />
    <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
    <mashup:DataParameter Key="REST.HttpMethod" Value="POST" />
    <mashup:DataParameter Key="REST.InputType" Value="json" />
    <mashup:DataParameter Key="REST.OutputType" Value="application/json" />
</mashup:DataOperation>
<mashup:DataOperation Name="UpdateUserPost">
    <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users/{id}" />    
    <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
    <mashup:DataParameter Key="REST.HttpMethod" Value="PUT" />
    <mashup:DataParameter Key="REST.InputType" Value="json" />
    <mashup:DataParameter Key="REST.OutputType" Value="application/json" />
</mashup:DataOperation>
<mashup:DataOperation Name="DeleteUser">
    <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/posts/{id}" />
    <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
    <mashup:DataParameter Key="REST.HttpMethod" Value="DELETE" />
    <mashup:DataParameter Key="REST.OutputType" Value="application/json" />
</mashup:DataOperation>

We also add a button for each operation with a trigger event. All the property values for the current item the DataPanel will be added in the request body, so just declare the Parameter bindings for values that may change.

<Button DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="5" Content="Update User">
   <Button.CommandParameter>
      <mashup:Events>
         <mashup:Event TargetName="UserDetails" SourceEventName="Click" TargetEventName="UpdateUserPost">
         <mashup:Parameter TargetKey="email" Value="{Binding ElementName=CEmail, Path=Text}" Type="String" />
         <mashup:Parameter TargetKey="website" Value="{Binding ElementName=CWebsite, Path=Text}" Type="String" />
         <mashup:Parameter TargetKey="phone" Value="{Binding ElementName=CPhone, Path=Text}" Type="String" />
         </mashup:Event>
      </mashup:Events>
   </Button.CommandParameter>
</Button>

 

Here is the Mashup code if you would like to try it out.

<Grid Margin="15,10,15,15" 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:sys="clr-namespace:System;assembly=mscorlib">
   <Grid.RowDefinitions>
      <RowDefinition Height="1*" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="1*" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="1*" />
      <ColumnDefinition Width="10" />
      <ColumnDefinition Width="1*" />
   </Grid.ColumnDefinitions>
   <Grid.Resources>
      <x:String x:Key="PostTemplate"><![CDATA[      
               { 
                 "name": "{name}",
                 "username": "{username}",
                 "email": "{email}",
                 "address": {
                    "street": "{street}",
                    "suite": "{suite}",
                    "city": "{city}",
                    "zipcode": "{zipcode}",
                    "geo": {
                       "lat": "0.0",
                       "lng": "0.0"
                    }
                 },
                 "phone": "{phone}",
                 "website": "{website}",
                 "company": {
                    "name": "{companyName}",
                    "catchPhrase": "{companyCatchPhrase}",
                    "bs": "{companyBs}"
                 }                 
               }
            ]]></x:String>
   </Grid.Resources>
   <mashup:DataListPanel DockPanel.Dock="Top" Name="UsersList" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
      <mashup:DataListPanel.DataService>
         <mashup:DataService Type="REST">
            <mashup:DataService.Operations>
               <mashup:DataOperation Name="List">
                  <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users/" />
                  <mashup:DataParameter Key="REST.OutputType" Value="DataItem" />
                  <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
               </mashup:DataOperation>
            </mashup:DataService.Operations>
         </mashup:DataService>
      </mashup:DataListPanel.DataService>
      <mashup:DataListPanel.Events>
         <mashup:Events>
            <mashup:Event SourceEventName="Startup" TargetEventName="List" />
            <mashup:Event SourceName="UsersList" TargetName="UserDetails" SourceEventName="CurrentItemChanged" TargetEventName="Get">
               <mashup:Parameter SourceKey="id" TargetKey="userId" Type="Numeric" />
            </mashup:Event>
         </mashup:Events>
      </mashup:DataListPanel.Events>
      <DockPanel LastChildFill="False">
         <ListView DockPanel.Dock="Top" Name="ListViewCompany" ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
            <ListView.View>
               <GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
                  <GridView.Columns>
                     <GridViewColumn Header="Company" DisplayMemberBinding="{Binding [company].[name]}" />
                     <GridViewColumn Header="City" DisplayMemberBinding="{Binding [address].[city]}" />
                     <GridViewColumn Header="Name" DisplayMemberBinding="{Binding [name]}" />
                     <GridViewColumn Header="Email" DisplayMemberBinding="{Binding [email]}" />
                     <GridViewColumn Header="Longitude" DisplayMemberBinding="{Binding [address].[geo].[lng]}" />
                     <GridViewColumn Header="Longitude" DisplayMemberBinding="{Binding [address].[geo].[lng]}" />
                  </GridView.Columns>
               </GridView>
            </ListView.View>
         </ListView>
      </DockPanel>
   </mashup:DataListPanel>
   <mashup:DataPanel Grid.Row="0" Grid.Column="2" Grid.RowSpan="1" Name="UserDetails">
      <mashup:DataPanel.DataService>
         <mashup:DataService Type="REST">
            <mashup:DataService.Operations>
               <mashup:DataOperation Name="Get">
                  <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users/{userId}" />
                  <mashup:DataParameter Key="REST.OutputType" Value="DataItem" />
                  <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
               </mashup:DataOperation>
               <mashup:DataOperation Name="CreateUserPost">
                  <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users" />
                  <mashup:DataParameter Key="REST.InputJsonTemplate" Value="{StaticResource PostTemplate}" />
                  <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
                  <mashup:DataParameter Key="REST.HttpMethod" Value="POST" />
                  <mashup:DataParameter Key="REST.InputType" Value="json" />
                  <mashup:DataParameter Key="REST.OutputType" Value="application/json" />
               </mashup:DataOperation>
               <mashup:DataOperation Name="UpdateUserPost">
                  <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users/{id}" />
                  <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
                  <mashup:DataParameter Key="REST.HttpMethod" Value="PUT" />
                  <mashup:DataParameter Key="REST.InputType" Value="json" />
                  <mashup:DataParameter Key="REST.OutputType" Value="application/json" />
               </mashup:DataOperation>
               <mashup:DataOperation Name="DeleteUser">
                  <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/posts/{id}" />
                  <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
                  <mashup:DataParameter Key="REST.HttpMethod" Value="DELETE" />
                  <mashup:DataParameter Key="REST.OutputType" Value="application/json" />
               </mashup:DataOperation>
            </mashup:DataService.Operations>
         </mashup:DataService>
      </mashup:DataPanel.DataService>
      <mashup:DataPanel.Events>
         <mashup:Events></mashup:Events>
      </mashup:DataPanel.Events>
      <Grid Margin="10,0,10,0">
         <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="0" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="0" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="0" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="0" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="24" />
            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <DockPanel Grid.Row="1" LastChildFill="False">
            <TextBlock DockPanel.Dock="Left" Text="Company" Width="55" Margin="5" VerticalAlignment="Center" />
            <TextBox DockPanel.Dock="Left" Name="CCompany" Width="220" Margin="5" Text="{Binding [company].[name]}" />
         </DockPanel>
         <DockPanel Grid.Row="3">
            <TextBlock DockPanel.Dock="Left" Text="Name" Width="55" Margin="5" VerticalAlignment="Center" />
            <TextBox DockPanel.Dock="Left" Name="CName" Width="220" Margin="5" Text="{Binding [name]}" />
            <TextBlock DockPanel.Dock="Left" Text="UserName" Width="60" Margin="0,0,10,0" VerticalAlignment="Center" />
            <TextBox DockPanel.Dock="Left" Name="CUserName" Margin="5" Text="{Binding [username]}" />
         </DockPanel>
         <DockPanel Grid.Row="5">
            <TextBlock DockPanel.Dock="Left" Text="Email" Width="55" Margin="5" VerticalAlignment="Center" />
            <TextBox DockPanel.Dock="Left" Name="CEmail" Width="220" Margin="5" Text="{Binding [email]}" />
            <TextBlock DockPanel.Dock="Left" Text="Website" Width="60" Margin="0,0,10,0" VerticalAlignment="Center" />
            <TextBox DockPanel.Dock="Left" Name="CWebsite" Margin="5" Text="{Binding [website]}" />
         </DockPanel>
         <DockPanel Grid.Row="7" LastChildFill="False">
            <TextBlock DockPanel.Dock="Left" Text="Phone" Width="55" Margin="5" VerticalAlignment="Center" />
            <TextBox DockPanel.Dock="Left" Name="CPhone" Width="220" Margin="5" Text="{Binding [phone]}" />
         </DockPanel>
         <DockPanel Grid.Row="9">
            <TextBlock DockPanel.Dock="Left" Text="Catch" Width="55" Margin="5" VerticalAlignment="Center" />
            <TextBox DockPanel.Dock="Left" Name="CCatch" Width="220" Margin="5" Text="{Binding [company].[catchPhrase]}" />
            <TextBlock DockPanel.Dock="Left" Text="BS" Width="60" Margin="5" VerticalAlignment="Center" />
            <TextBox DockPanel.Dock="Left" Name="CBS" Margin="5" Text="{Binding [company].[bs]}" />
         </DockPanel>
         <DockPanel Grid.Row="11">
            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="5" Content="Add User">
               <Button.CommandParameter>
                  <mashup:Events>
                     <mashup:Event TargetName="UserDetails" SourceEventName="Click" TargetEventName="CreateUserPost">
                        <mashup:Parameter TargetKey="name" Value="{Binding ElementName=CName, Path=Text}" Type="String" />
                        <mashup:Parameter TargetKey="companyName" Value="{Binding ElementName=CCompany, Path=Text}" Type="String" />
                        <mashup:Parameter TargetKey="userName" Value="{Binding ElementName=CUserName, Path=Text}" Type="String" />
                        <mashup:Parameter TargetKey="email" Value="{Binding ElementName=CEmail, Path=Text}" Type="String" />
                        <mashup:Parameter TargetKey="website" Value="{Binding ElementName=CWebsite, Path=Text}" Type="String" />
                        <mashup:Parameter TargetKey="phone" Value="{Binding ElementName=CPhone, Path=Text}" Type="String" />
                        <mashup:Parameter TargetKey="companyCatchPhrase" Value="{Binding ElementName=CCatch, Path=Text}" Type="String" />
                        <mashup:Parameter TargetKey="companyBs" Value="{Bindng ElementName=CBS, Path=Text}" Type="String" />
                     </mashup:Event>
                  </mashup:Events>
               </Button.CommandParameter>
            </Button>
            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="5" Content="Update User">
               <Button.CommandParameter>
                  <mashup:Events>
                     <mashup:Event TargetName="UserDetails" SourceEventName="Click" TargetEventName="UpdateUserPost">
                        <mashup:Parameter TargetKey="email" Value="{Binding ElementName=CEmail, Path=Text}" Type="String" />
                        <mashup:Parameter TargetKey="website" Value="{Binding ElementName=CWebsite, Path=Text}" Type="String" />
                        <mashup:Parameter TargetKey="phone" Value="{Binding ElementName=CPhone, Path=Text}" Type="String" />
                     </mashup:Event>
                  </mashup:Events>
               </Button.CommandParameter>
            </Button>
            <Button DockPanel.Dock="Top" HorizontalAlignment="Right" Margin="5" Content="Delete User">
               <Button.CommandParameter>
                  <mashup:Events>
                     <mashup:Event TargetName="UserDetails" SourceEventName="Click" TargetEventName="DeleteUser">
                        <mashup:Parameter TargetKey="id" Value="{Binding ElementName=UsersList, Path=CurrentItem[id]}" />
                     </mashup:Event>
                  </mashup:Events>
               </Button.CommandParameter>
            </Button>
         </DockPanel>
      </Grid>
   </mashup:DataPanel>
   <DockPanel Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" VerticalAlignment="Stretch">
      <TextBlock DockPanel.Dock="Top" Text="Server Response:" Width="140" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Left" />
      <TextBox Name="ServerResponse" DockPanel.Dock="Top" Text="{Binding ElementName=UserDetails, Path=DataContext[json]}" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Top" TextWrapping="Wrap" AcceptsReturn="True" />
   </DockPanel>
</Grid>

 

JSON support in REST data service – Part II

Post the User Post with a JSON Template

In the previous part we used the REST data service to fetch a set of users in JSON format and present them in a list view and as a JSON text string. In this example we call the same service to get related user information and send a request to add new information. The fake online service we use returns a correct JSON response but will not create anything in the database of the service. Smart Office 10.2.1.0.367 HF38 is required.

 

Mashup_REST_JSON_POST

First we define another data operation to create a user post by sending a JSON request,

<mashup:DataOperation Name="CreateUserPost">
    <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/posts" />
    <mashup:DataParameter Key="REST.InputJsonTemplate" Value="{StaticResource PostTemplate}" />
    <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
    <mashup:DataParameter Key="REST.HttpMethod" Value="POST" />
    <mashup:DataParameter Key="REST.InputType" Value="json" />
    <mashup:DataParameter Key="REST.OutputType" Value="application/json" />
</mashup:DataOperation>

and we also add a Send button containing an event that collects required values and trigger the CreateUserPost operation.

<Button DockPanel.Dock="Top" HorizontalAlignment="Right" Margin="5" Content="Send">
   <Button.CommandParameter>
            <mashup:Events>
                 <mashup:Event TargetName="PostComment" SourceEventName="Click" TargetEventName="CreateUserPost">
                 <mashup:Parameter TargetKey="title" Value="{Binding ElementName=PostTitle, Path=Text}" />
                 <mashup:Parameter TargetKey="body" Value="{Binding ElementName=PostBody, Path=Text}" />
                 <mashup:Parameter TargetKey="userId" Value="{Binding ElementName=UsersList, Path=CurrentItem[id]}" />
             </mashup:Event>
         </mashup:Events>
    </Button.CommandParameter>
</Button>

A press of the Send button collects the parameters and creates a JSON parameter body to be part of the server request. The body will look like this.

{
   "title": "test",
   "body": "test",
   "userId": "2",
}

Notice that the userId is a string but for the service we call, assume it must be a numeric value. Imagine that we need to customize the body for the service request since the default one will not do the trick.

Let’s create a template for the body that will result in the following JSON.

{
   "title": "test",
   "body": "test",
   "userId": 2,
}

First we add the template as a resource in the Mashup code within a CDATA block.

<Grid.Resources>   
      <x:String x:Key="PostTemplate"><![CDATA[      
               { 
                 "title": "{title}",
                 "body": "{body}",
                 "userId": {userId}
               }
            ]]></x:String>
   </Grid.Resources>

Next step is to add a template reference in the data operation declaration using the InputJsonTemplate parameter .

<mashup:DataOperation Name="CreateUserPost">
    <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/posts" />
    <mashup:DataParameter Key="REST.InputJsonTemplate" Value="{StaticResource PostTemplate}" />

Done! This is all that is needed to customize the server request body instead of getting the default one generated.

The full Mashup code if you would like to try it out.

<Grid Margin="15,10,15,15" 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:sys="clr-namespace:System;assembly=mscorlib">
	<Grid.RowDefinitions>
		<RowDefinition Height="1*" />
		<RowDefinition Height="10" />
		<RowDefinition Height="1*" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="1*" />
		<ColumnDefinition Width="10" />
		<ColumnDefinition Width="1*" />
	</Grid.ColumnDefinitions>
	<Grid.Resources>
		<x:String x:Key="PostTemplate"><![CDATA[		
					{ 
					  "title": "{title}",
					  "body": "{body}",
					  "userId": {userId}
					}
				]]></x:String>
	</Grid.Resources>
	<mashup:DataListPanel Name="UsersList" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
		<mashup:DataListPanel.DataService>
			<mashup:DataService Type="REST">
				<mashup:DataService.Operations>
					<mashup:DataOperation Name="List">
						<mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users/" />
						<mashup:DataParameter Key="REST.OutputType" Value="DataItem" />
						<mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
					</mashup:DataOperation>
				</mashup:DataService.Operations>
			</mashup:DataService>
		</mashup:DataListPanel.DataService>
		<mashup:DataListPanel.Events>
			<mashup:Events>
				<mashup:Event SourceEventName="Startup" TargetEventName="List" />
			</mashup:Events>
		</mashup:DataListPanel.Events>
		<ListView Name="ListViewCompany" ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
			<ListView.View>
				<GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
					<GridView.Columns>
						<GridViewColumn Header="Company" DisplayMemberBinding="{Binding [company].[name]}" />
						<GridViewColumn Header="City" DisplayMemberBinding="{Binding [address].[city]}" />
						<GridViewColumn Header="Name" DisplayMemberBinding="{Binding [name]}" />
						<GridViewColumn Header="Email" DisplayMemberBinding="{Binding [email]}" />
						<GridViewColumn Header="Longitude" DisplayMemberBinding="{Binding [address].[geo].[lng]}" />
						<GridViewColumn Header="Longitude" DisplayMemberBinding="{Binding [address].[geo].[lng]}" />
					</GridView.Columns>
				</GridView>
			</ListView.View>
		</ListView>
	</mashup:DataListPanel>
	<mashup:DataPanel Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" Name="PostComment">
		<mashup:DataPanel.DataService>
			<mashup:DataService Type="REST">
				<mashup:DataService.Operations>
					<mashup:DataOperation Name="ListUserPost">
						<mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/posts/?userid={userId}" />
						<mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
					</mashup:DataOperation>
					<mashup:DataOperation Name="CreateUserPost">
						<mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/posts" />
						<mashup:DataParameter Key="REST.InputJsonTemplate" Value="{StaticResource PostTemplate}" />
						<mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
						<mashup:DataParameter Key="REST.HttpMethod" Value="POST" />
						<mashup:DataParameter Key="REST.InputType" Value="json" />
						<mashup:DataParameter Key="REST.OutputType" Value="application/json" />
						<!-- Change to DataItem to use return data -->
					</mashup:DataOperation>
				</mashup:DataService.Operations>
			</mashup:DataService>
		</mashup:DataPanel.DataService>
		<mashup:DataPanel.Events>
			<mashup:Events>
				<mashup:Event SourceEventName="Startup" TargetEventName="List" />				
			</mashup:Events>
		</mashup:DataPanel.Events>
		<Grid Margin="10,0,10,0">
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto" />
				<RowDefinition Height="10" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="10" />
				<RowDefinition Height="Auto" />
			</Grid.RowDefinitions>
			<DockPanel Grid.Row="0">
				<TextBlock DockPanel.Dock="Left" Text="Post a comment as" Margin="0,0,5,0" />
				<TextBlock DockPanel.Dock="Left" Text="{Binding ElementName=UsersList, Path=CurrentItem[name]}" />
			</DockPanel>
			<DockPanel Grid.Row="2">
				<TextBlock DockPanel.Dock="Top" Text="Title" Margin="5" />
				<TextBox DockPanel.Dock="Top" Name="PostTitle" Margin="5" />
				<TextBlock DockPanel.Dock="Top" Text="Content" Margin="5" />
				<TextBox DockPanel.Dock="Top" Name="PostBody" Margin="5" />
				<Button DockPanel.Dock="Top" HorizontalAlignment="Right" Margin="5" Content="Send">
					<Button.CommandParameter>
						<mashup:Events>
							<mashup:Event TargetName="PostComment" SourceEventName="Click" TargetEventName="CreateUserPost">
								<mashup:Parameter TargetKey="title" Value="{Binding ElementName=PostTitle, Path=Text}" />
								<mashup:Parameter TargetKey="body" Value="{Binding ElementName=PostBody, Path=Text}" />
								<mashup:Parameter TargetKey="userId" Value="{Binding ElementName=UsersList, Path=CurrentItem[id]}" />
							</mashup:Event>
						</mashup:Events>
					</Button.CommandParameter>
				</Button>
			</DockPanel>
			<DockPanel Grid.Row="4">
				<TextBlock DockPanel.Dock="Top" Text="Server Response:" Width="140" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Left" />
				<TextBox Height="120" DockPanel.Dock="Top" Text="{Binding [json]}" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" VerticalContentAlignment="Top" TextWrapping="Wrap" AcceptsReturn="True" />
			</DockPanel>
		</Grid>
	</mashup:DataPanel>
</Grid>

 

JSON support in REST data service – Part I

In Smart Office 10.2.1.0.367 HF38 there is support for JSON when calling a REST data service from a Mashup. In this blog post I’m going to use a fake online REST service to demonstrate how it’s done.

The response data from the REST service call can be converted into a DataItem hierarchy or as a JSON string. This example will fetch a listing of users from the service and present them in a Mashup ListView and in a TextBox as a JSON string, side-by-side.

Mashup_REST_JSON_LIST

The Mashup XAML syntax will be the same as before when doing a REST service call. All you need to do now is set the REST.AcceptHeader parameter to application/json.
The REST.OutputType determines if the data response is available to the Mashup as an object hierarchy or as a JSON string. Use the value ‘DataItem’ to get DataItem hierarchy or set ‘application/json’ for a JSON string. If REST.OutputType is not set the default will be a DataItem hierarchy.

<mashup:DataListPanel.DataService>
    <mashup:DataService Type="REST">
        <mashup:DataService.Operations>
            <mashup:DataOperation Name="List">
                <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users/" />
                <mashup:DataParameter Key="REST.OutputType" Value="DataItem" />
                <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
            </mashup:DataOperation>
        </mashup:DataService.Operations>
    </mashup:DataService>
</mashup:DataListPanel.DataService>

To set the first column in the ListView to the company name use the binding below.

DisplayMemberBinding="{Binding [company].[name]}"

To access the JSON string when that is set as output type simply bind to ‘json’.

Text="{Binding [json]}"

Here is the complete Mashup code if you would like to try it out.

<Grid Margin="15,10,15,15" 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:sys="clr-namespace:System;assembly=mscorlib">
   <Grid.RowDefinitions>
      <RowDefinition Height="1*" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="1*" />
      <ColumnDefinition Width="10" />
      <ColumnDefinition Width="1*" />
   </Grid.ColumnDefinitions>
   <mashup:DataListPanel DockPanel.Dock="Top" Name="UsersList" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
      <mashup:DataListPanel.DataService>
         <mashup:DataService Type="REST">
            <mashup:DataService.Operations>
               <mashup:DataOperation Name="List">
                  <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users/" />
                  <mashup:DataParameter Key="REST.OutputType" Value="DataItem" />
                  <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
               </mashup:DataOperation>
            </mashup:DataService.Operations>
         </mashup:DataService>
      </mashup:DataListPanel.DataService>
      <mashup:DataListPanel.Events>
         <mashup:Events>
            <mashup:Event SourceEventName="Startup" TargetEventName="List" />
         </mashup:Events>
      </mashup:DataListPanel.Events>
      <DockPanel LastChildFill="False">
         <ListView DockPanel.Dock="Top" Name="ListViewCompany" ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
            <ListView.View>
               <GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
                  <GridView.Columns>
                     <GridViewColumn Header="Company" DisplayMemberBinding="{Binding [company].[name]}" />
                     <GridViewColumn Header="City" DisplayMemberBinding="{Binding [address].[city]}" />
                     <GridViewColumn Header="Name" DisplayMemberBinding="{Binding [name]}" />
                     <GridViewColumn Header="Email" DisplayMemberBinding="{Binding [email]}" />
                     <GridViewColumn Header="Longitude" DisplayMemberBinding="{Binding [address].[geo].[lng]}" />
                     <GridViewColumn Header="Longitude" DisplayMemberBinding="{Binding [address].[geo].[lng]}" />
                  </GridView.Columns>
               </GridView>
            </ListView.View>
         </ListView>
      </DockPanel>
   </mashup:DataListPanel>
   <mashup:DataPanel Grid.Row="0" Grid.Column="2" Name="JsonString">
      <mashup:DataPanel.DataService>
         <mashup:DataService Type="REST">
            <mashup:DataService.Operations>
               <mashup:DataOperation Name="List">
                  <mashup:DataParameter Key="REST.BaseAddress" Value="https://jsonplaceholder.typicode.com/users/" />
                  <mashup:DataParameter Key="REST.AcceptHeader" Value="application/json" />
                  <mashup:DataParameter Key="REST.OutputType" Value="application/json" />
               </mashup:DataOperation>
            </mashup:DataService.Operations>
         </mashup:DataService>
      </mashup:DataPanel.DataService>
      <mashup:DataPanel.Events>
         <mashup:Events>
            <mashup:Event SourceEventName="Startup" TargetEventName="List" />
         </mashup:Events>
      </mashup:DataPanel.Events>
      <Grid Margin="10,0,10,0">
         <TextBox Text="{Binding [json]}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" AcceptsReturn="True" VerticalContentAlignment="Top" TextWrapping="Wrap" />
      </Grid>
   </mashup:DataPanel>
</Grid>

Mashup Converter with Zero Focus

In Smart Office 10.2.1.0.367 HF 38 there is a new value converter that converts a number to a string label focusing on zero; equals, above or below.

Mashup_Converter_Zero

The default behavior for the value converter is:

value < 0 returns NA
value = 0 returns No
value > 0 returns Yes
otherwise for non numeric input it returns an empty string

 Text="{Binding ElementName=InputValue, Path=Text, Converter={utils:AboveBelowZeroConverter}}"

 

The return labels for negative, zero and positive values can be customized by adding the ConverterParameter in the data binding containing three strings separated by _ or – characters. If the parameter is incorrect formatted the converter falls back to the default values and logs the issue if the log is in DEBUG mode.

Setting the following ConverterParameter will change the return labels to become Negative, Zero, Positive.

 Text="{Binding ElementName=InputValue, Path=Text, Converter={utils:AboveBelowZeroConverter}, ConverterParameter=Negative_Zero-Positive}"

 

Here is a the full code for you to try the converter out.

<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:utils="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI">
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="10" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   <TextBlock Grid.Row="0" Text="Test of AboveBelowZeroConverter. Default: Return NA for negative values, No for zero and Yes for positive values, otherwise empty string" Margin="10" />
   <DockPanel Grid.Row="2" Margin="10" LastChildFill="False">
      <TextBlock DockPanel.Dock="Left" Text="Enter a value:" Margin="5" />
      <TextBox DockPanel.Dock="Left" Name="InputValue" Height="24" Width="60" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
      <TextBlock DockPanel.Dock="Left" FontSize="16" Foreground="Green" Text="{Binding ElementName=InputValue, Path=Text, Converter={utils:AboveBelowZeroConverter}}" Margin="5" />
   </DockPanel>
   <DockPanel Grid.Row="3" Margin="10" LastChildFill="False">
      <TextBlock DockPanel.Dock="Top" Text="Custom return value. Set binding 'ConverterParameter=negative zero-positive' (Three strings separated by _ or - character, if invalid converter falls back to default)" Margin="5" />
      <TextBlock DockPanel.Dock="Top" FontSize="16" Foreground="Green" Text="{Binding ElementName=InputValue, Path=Text, Converter={utils:AboveBelowZeroConverter}, ConverterParameter=Negative_Zero-Positive}" Margin="150,5,5,5" />
   </DockPanel>
</Grid>

 

 

 

Snooping my Mashup for Missing Data

Sometimes when you’re developing a Mashup it happens that the data you’re expecting to appear in a databound control is not showing up. There’s a small developer tool named Snoop that will help you examine the runtime visual tree of a Windows Presentation Foundation (WPF) user interface.

Snoop WPF Spy utility

Download

Launch Smart Office and open the Mashup Designer. In this post we use an example from the Help menu named Document found in the Infor Document Management category.

ISOIDMMashupEx

Run the example, save it and search for any Document Type e g CLM_Document. Depending on the available data, it will look something like this in the running Mashup.

ISOIDMMashupExRunning

Now it’s time to launch the Snoop utlitity tool. It has a slim and narrow window. ISOSnoop

Drag the Snoop hair-cross (marked yellow) and drop it on your Mashup window. A new window will open and present the visual tree representation of the user interface in the left-hand panel and the details of the selected UI element in the right-hand panel. Below the details panel there’s a preview panel to render and show the selected UI element (if actived with the power button).

Press down the CTRL- and SHIFT- key simultaneously while you drag the mouse over the Mashup window. The control beneath the mouse will be selected and decorated with a red border and the corresponding element in the Snoop visual tree view will be highlighted and selected. Navigation can also be done directly in the tree-view by selecting UI element nodes.

ISO IDM Snoop

ISOIDMMashupExAttrSelected

Let’s examine the bound data for the document attribute panel. Use the mouse or locate and select the LangAttrList (ListBox) in the visual tree. Scroll down in the Properties list until you find ItemsSource property for the ListBox control.

ISO IDM Snoop ItemsSource

It’s now possible to drill-down into the data collection with a double-click on the value of ItemsSource, in this example [System.Windows.Data.CompositeCollection]. Now you see that the collection contains 1 item: this[0]. You can continue to drill-down with a double-click on the value this[0] to see the details of the item or navigate back up by clicking the up-arrow button (marked yellow).

ISO IDM Snoop Drill-down and up

In this case the ListBox will apply a template for each document attribute found in a collection item. Select the attrTemplate under the ListBoxItem to show its properties. In most template cases the data will be in the DataContext property of the element. Select the Data Context tab for a dedicated view of the property, in this case the DataContext is a piece of XML.
Note that there’s a Binding Errors column in the properties list that will show an error message if the data binding declaration for a UI element property is wrong and the data source can’t be found.

ISO IDM Snoop Data Context

We’ve only scratched the surface of the Snoop tool functionality but it’s the basics needed to investige why your data is not showing up.

MIPanel enhancements for the Mashup Designer

Smart Office Hot Fix 12 was just released (10.2.0.88). We have some new features and in this post I’ll cover a changes to the MIPanel that will make it easier to chain calls together. The new features for the MIPanel are:

  • New events: CompletedSuccessfully and CompletedWithError
  • New properties: ShowMessagesInDialog and ShowMessagesInStatusBar
  • New result property that you can bind to: MIPanel.ErrorInfo. This property will contain error information from the first failed transaction. It has ErrorMessage, ErrorCode, ErrorField, Transaction and Program.

Properties

For those of you who have use conditions on events you can now consider using the new events. An example scenario would be updating item information and if that transaction is successful you would like to run another transaction. In that case you can trigger the second update based on CompletedSuccessfully instead of UpdateCompleted.

Item update

Please note that I have some hard coded values in the example. I did have to configure MandatoryInputFields since I’m not changing the item number as the behavior of the MIPanel is to only send updated data to an MITransaction. The use of the event is pretty straight forward. For numeric input I used the NumericTextBox. You will not find it in the Designer UI but it is part of Smart Office so you can use it if you edit the XAML. Here is the 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.ColumnDefinitions>
		<ColumnDefinition Width="1*" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
		<RowDefinition Height="1*" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<m3:MIPanel Name="ItemDetail" Grid.Row="0" Margin="0,15,0,0">
		<m3:MIPanel.Events>
			<mashup:Events>
				<mashup:Event SourceEventName="Startup" TargetEventName="Get">
					<mashup:Parameter TargetKey="ITNO" Value="AC-001" />
					<mashup:Parameter TargetKey="FACI" Value="010" />
				</mashup:Event>
			</mashup:Events>
		</m3:MIPanel.Events>
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="10" />
				<ColumnDefinition Width="200" />
				<ColumnDefinition Width="15" />
				<ColumnDefinition Width="*" />
			</Grid.ColumnDefinitions>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto" />
				<RowDefinition Height="5" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="5" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="5" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="10" />
				<RowDefinition Height="Auto" />
			</Grid.RowDefinitions>
			<Label Content="Item number:" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0" Padding="0" />
			<TextBox MaxLength="15" Text="{Binding [ITNO]}" IsEnabled="false" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
			<Label Content="Name:" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0" Padding="0" />
			<TextBox MaxLength="30" Text="{Binding [ITDS]}" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
			<Label Content="Description 2:" Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0" Padding="0" />
			<TextBox MaxLength="60" Text="{Binding [FUDS]}" Grid.Row="4" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
			<Label Content="Avergage cost:" Grid.Row="6" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0" Padding="0" />
			<ui:NumericTextBox MaxLength="10" Name="inputAPPR" Text="{Binding [APPR]}" Grid.Row="6" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" />
			<Button Name="SaveButton" Content="Update" Grid.Row="8" Grid.Column="2" HorizontalAlignment="Right">
				<Button.CommandParameter>
					<mashup:Events>
						<mashup:Event TargetName="ItemDetail" SourceEventName="Click" TargetEventName="Update" Debug="True">
							<mashup:Parameter TargetKey="ITNO" Value="{Binding [ITNO]}" />
							<mashup:Parameter TargetKey="FUDS" Value="{Binding [FUDS]}" />
							<mashup:Parameter TargetKey="ITDS" Value="{Binding [ITDS]}" />
						</mashup:Event>
					</mashup:Events>
				</Button.CommandParameter>
			</Button>
		</Grid>
		<m3:MIPanel.DataSources>
			<m3:MIDataSourceList>
				<m3:MIDataSource Program="MMS200MI" Transaction="Get" Type="Get" InputFields="ITNO" OutputFields="ITNO,ITDS,FUDS" />
				<m3:MIDataSource Program="MMS200MI" Transaction="GetItmFac" Type="Get" InputFields="FACI,ITNO" OutputFields="APPR" />
				<m3:MIDataSource Program="MMS200MI" Transaction="UpdItmBasic" Type="Update" InputFields="ITNO,ITDS,FUDS" MandatoryInputFields="ITNO" />
			</m3:MIDataSourceList>
		</m3:MIPanel.DataSources>
	</m3:MIPanel>
	<m3:MIPanel Name="SecondUpdatePanel">
		<m3:MIPanel.Events>
			<mashup:Events>
				<mashup:Event SourceName="ItemDetail" SourceEventName="CompletedSuccessfully" TargetEventName="Update" Debug="True">
					<mashup:Event.Conditions>
						<mashup:Conditions>
							<mashup:Condition SourceValue="{Binding ElementName=inputAPPR, Path=Text}" TargetValue="{Binding ElementName=ItemDetail, Path=[MMS200MI.GetItemFac.APPR]}" Operator="NotEqual" />
						</mashup:Conditions>
					</mashup:Event.Conditions>
					<mashup:Parameter SourceKey="ITNO" />
					<mashup:Parameter TargetKey="FACI" Value="010" />
					<mashup:Parameter SourceKey="APPR" />
				</mashup:Event>
			</mashup:Events>
		</m3:MIPanel.Events>
		<m3:MIPanel.DataSource>
			<m3:MIDataSource Program="MMS200MI" Transaction="UpdItmFac" Type="Update" InputFields="FACI,ITNO,APPR" />
		</m3:MIPanel.DataSource>
	</m3:MIPanel>

	<ui:StatusBar Name="StatusBar" Grid.Row="3" Grid.Column="0" />
</Grid>

Unfortunately the Documentation in the Mashup Designer is not updated with the new properties etc as there has been no update to the Mashup Designer. You can always find the latest API documentation in the Smart Office SDK.

Please note that these events applies to update transactions. You set the type of the transaction on the MIDataSource. We will automatically try and determine the type based on the transaction name.

For a full listing of changes made on this release, refer to Lawson KB 1626878 / M3 KB 1623430.

Creating your own inline web Mashup control

Web Mashups have been around for a while but this is the first post on the topic thanks to our latest author Stefan W. He plans to write a series on Web Mashups so enjoy.

Sometimes the controls available in the Mashup Designer are not satisfying the needs for the mashup you are building. In these times the Smart Office SDK has come in handy but, applications written with Smart Office SDK are not available when running your mashup in web. When using the Mashup SDK for web application development you have the opportunity to include the mashup interface in your components and thus make it available for usage in a mashup application. This, however requires you also to provide an application system profile in the mashup administration client. If you do not wish to provide your components as a whole application or not have any web service to host your components there is a possibility to provide the components as embedded components hosted within the mashup itself.

This can all be done through the Mashup Designer by following these simple steps. In this example I want my mashup to speak out the selected line in a m3 list using the Web Speech Api functionality build in to several browsers.

First of all. I have a simple application that shows m3 items in a list and the details of the selected item underneath.

webmashups1

In the project properties I choose to create a new (embedded) Application.

webmashups2

The designer will suggest a name for the new file and to have it put in the project folder. I choose to accept this and press OK.

This application can now be used to embed one or several external components into my project.

Next, I want to place my new component into the mashup. The textToSpeach component that I am going to make will not use any UI so I cose to simply put it into the bottom of the mashup page away from the other controls. I use the MashupWebControl found under Common Controls and drag it into my mashup.

webmashups3

In the settings window of the MashupWebControl you can choose to use a control either from an application deployed to the mashup server or to use/add one from the embedded application we just created. In this case I choose to go with the embedded.

webmashups4

Next, I want to create a new control so I put a name to it in the New Control input field and press Create.

A new html page is automatically created and put into my project resources. I also choose to provide some initial parameters to my new control so I enter them in the key-value list before I press OK on the settings dialog.

By opening my new html file I can now see that it has been prepopulated with the script tags and linking that it needs to behave as a proper web mashup control. Now, all we have to do is to put some functionality and behavior into the control interface methods.

webmashups5

I start by putting some code into the onInitialized callback function to initialize my new control with the parameters that I defined in the control settings.

I use the mashupContext parameter to retrieve the default values.


infor.mashup.client.onInitialized = function (mashupContext) {
            try {        
                // Initialize your control and maybe save "mashupContext" for later use
                lang = mashupContext.getValue('lang');
                rate = mashupContext.getValue('rate');
                pitch = mashupContext.getValue('pitch');
                volume = mashupContext.getValue('volume');
                
                // Set the status to initialized when the control is ready to respond to events
                infor.mashup.client.setStatus(infor.mashup.client.Status.INITIALIZED);
            } catch(e) {
                // Notify the framework that this control failed
                infor.mashup.client.setStatus(infor.mashup.client.Status.FAILED);
            }
        };

I also want my new control to handle some mashup events in order to trigger the speech synthesizer when I select a line in the m3 list so I go back to the application definition I created before in the project properties and select Edit.

webmashups6

I choose to create a target event, Speak, that I can trigger from outside the control to have it speak whatever I wish. I do this by simply copying the event from the commented code in the file.

<?xml version="1.0" encoding="UTF-8"?>
<application description="My Application">
  <controls>
    <!-- An example of an embedded mashup control registration. This is only supported in Web mashups. -->
    <!-- For the "type" attribute the following values are valid: "control", "extension" and "static", see Web SDK documentation for more information -->
    <control name="Speaker" description="" type="control" relativeUrl="Speaker.html" allowAdditionalParameters="false">
      <parameters />
      <events>
        <sourceEvents />
        <targetEvents>
            <event name="Speak" description="This event will speak out my thoughts"/> 
        </targetEvents>
      </events>
    </control>
  </controls>
</application>

Now that I have my event it is time to put in some code for that as well in the mashup control so I go back to the html file and put in the code needed to make the browser speak.

I want to do this when the Speak event is triggered so I put the code into the onLoad function. Parameter values for the event are provided through the theEvent parameter. By looping over all parameters and concatenating them I make the speaker to speak several parameters in the same sentence which makes it sound more accurate.

infor.mashup.client.onLoad = function (theEvent) {
            try {        
                // Set the status to busy when the control is working, no events will be sent to the control
                infor.mashup.client.setStatus(infor.mashup.client.Status.BUSY);
                var stringValues = "";
                theEvent.parameters.forEach(function(param) {
    
                    // Load the control with the data specified in "theEvent" parameter
                    if(param.value) {
                        stringValues += param.value;
                    }
                });
                
                if(stringValues) {
                    var msg = new SpeechSynthesisUtterance(stringValues);
                    if(lang) { msg.lang = lang; }
                    if(rate) { msg.rate = rate; } 
                    if(pitch) { msg.pitch = pitch; } 
                    if(volume) { msg.volume = volume; } 
                    window.speechSynthesis.speak(msg);
                }
                
                // Set the status to running when the control is ready to respond to events again
                infor.mashup.client.setStatus(infor.mashup.client.Status.RUNNING);
            } catch(e) {
                // Notify the framework that this control failed
                infor.mashup.client.setStatus(infor.mashup.client.Status.FAILED);
            }
        };

Having my new event I can now go back to my control settings and select to trigger the event whenever the current item is changed in the m3 list. I want my control to speak out the name of the current item but also put a little context to it, so I put in some extra parameters to wrap the item name in a nicely way.

webmashups7

And that’s it. I now have a nice little control that can speak through my browser. This control will work in chrome, safari, android, and any IOS 7+ browser which are the browsers that have implemented the Web Speech Api.

Thank you Stefan (kallekaka) for this article.

Function expressions in variable replacements

This post is an introduction to the enhancements made to the variable replacement functionality in Smart Office 10.2. The variable replacement syntax now supports function expressions that adds the possibility to modify values during a variable replacement.

Function expressions are currently supported in many places that uses variable replacements. Some examples are M3 toolbox shortcuts, Mashup parameters and links, Mashup controls such as WebBrowser and FileBrowser and data service parameters. Smart Links do not support function expressions in the current 10.2 release but this has been addressed and support for function expressions in Smart Links will ship in the next fix pack for Smart Office 10.2. Continue reading

Icons and icon buttons

When the new style for Smart Office was introduced in version 10.1.0 we also added a new set of icons. There are now almost two hundred icons that can be used on buttons, menus or to convey information in an application. In addition to the new icons a couple of controls were added to make it easy to use the icons. These new controls are the Icon, IconButton and CommandBarButton in the Mango.DesignSystem namespace. Continue reading

Mashup – Enable a button based on status and CurrentItemChanged

I’ll show you how to enabled a button on a current item changed event in a Mashup list. The scenario is as follows: You have a list of planned orders and you want to add a button to execute a related option but only if the order status has a specific value. I’ll show you how to set a property value in an event and how to execute a related option using a button. The real case scenario here would be planned work orders in MOS197 but for simplicity if you don’t use that module I’ll simulate the checks by using a much simpler program and one of my favorites, CRS610. The hard part is to reset the IsEnabled for the button to be false so that it does not keep its state as we select different rows in the list. Continue reading

How to use the keyboard in a Mashup

Do you want to add keyboard support in a Mashup? In this blog I’ll show how to get a keyboard key to invoke an event and how to user keyboard shortcuts to switch beteen tabs. I’ll talk about focus and how to user accelerator keys to jump to an input field and some other nice to know topics for Mashup and feature development. Continue reading

Inline personalizations in M3 Mashups

The Inline personalizations functionality in M3 Mashups can be used to deploy personalizations as part of a Mashup. Instead of relying on the personalizations for the regular programs you can create custom personalizations that are only used in Mashups and that do not affect the other personalizations.

Support for inline personalizations was added in Smart Office version 10.0.5.0 but there have been some fixes so this functionality should only be used with Smart Office 10.0.5.1 or later.

Continue reading

Building a Mashup UI – Margins and alignment explained

I’ve spent the last few months working with the UX 3.0, Infor’s new design guide lines for all Infor 10x applications, applying it for Smart Office. It has given me great insight in how I like to build a UI. I’m talking about what controls to use and why, how to think and how to align controls. In this post I’ll focus on Mashup development but this approach can be used in any WPF application. I highlight some issues and how to solve them.
Continue reading

Custom list templates in M3 Mashups

Support for custom list templates in M3 Mashups was added in Smart Office version 10.0.3. The requirement was to be able to display lists in a more compact way, similar to a card view list. The settings dialog for the M3 ListPanel control now have the option to choose two different List styles called Standard and Template. The Template List style lets you to create a custom list template that defines how the list rows are displayed in the list. Continue reading

M3 Price simulation – building a Mashup with two lists that trigger a third list

In this post I’ll show you how to use bindings together with a M3 Listpanel as well as conditions in Mashups Events to solve a scenario when you have two different M3 lists, for example one listpanel CRS610 and one listpanel MMS002 and you want to use information from thess panels to trigger a new listpanel (OIS320). Continue reading

Connecting a Mashup to a role or user in 10.0.5

In Smart Office 10.0.5 we introduced support for connecting Mashups to roles. This is something that we should have implemented from day one but there are a few reasons why we haven’t. First of all Smart Office is a platform for different applications, we did not want to create yet another custom tool where you manage and create LSO roles. M3 have their roles, S3 has there roles, roles are related to Security and there is another team who handles Security. We were pushing for a common solution for Lawson. The Smart Office server has moved to the Grid (9.1.3).

Authentication is handled by the Session Provider in the grid and in the grid it is possible to connect users to roles. The session provider can be connected to for example IFS, Infor Federated Services, were you set up claims and claim rules. Continue reading

LSO and Grid Application Discovery Service

In LSO 9.1.3 we moved the server to the Grid. There is a discovery service for LSO SDK applications (features) and Mashups that have a need to communicate with a Lawson Grid application. The discovery service reduces the configuration that needs to be added to the feature or mashup, e.g. no System Profile information needed in the manifests. This also means that there will be less work for the installer/administrator to configure installed applications. The discovery service can be used to retrieve the base URL to the Lawson Grid Application. Continue reading

Printing from a Mashup

In Smart Office 10.0.4 a new Mashup control was added that adds basic printing supports to Mashups. Before you get too excited it should be noted that this functionality is more like print screen and it does not support pagination or output formatting. The new PrintControl supports printing of parts of the Mashup or the entire Mashup window. The output can be sent to a printer, a print preview window or to a file. Continue reading