Mashup ComboBox for REST Web Service

Here’s a sample Mashup source code to display the result of a REST Web Service in a ComboBox.

Suppose you have a REST Web Service that returns the following XML:

 

Note: How to produce the above XML is outside the scope of this post. This particular XML is produced with a JSP querying the M3 table CMNCMP with JDBC.

In the Mashup Designer, we use the mashup:DataPanel control to call the REST Web Service. How to use that DataPanel is outside the scope of this post, but there is an example in the Mashup Designer > Help > Data Services.

Then, in the DataPanel we add our ComboBox, and in the ComboBox we use a ComboBox.ItemTemplate (similar to the ComboBox for M3 API results):

<ComboBox Name="TabComboBox" SelectedIndex="0" HorizontalAlignment="Left" ItemsSource="{Binding Items}">
    <ComboBox.ItemTemplate>
       <DataTemplate>
          <StackPanel Orientation="Horizontal">
             <TextBlock Text="{Binding XPath=CONO, Mode=OneWay}" />
             <TextBlock Text=" - " />
             <TextBlock Text="{Binding XPath=TX40, Mode=OneWay}" />
          </StackPanel>
       </DataTemplate>
    </ComboBox.ItemTemplate>
 </ComboBox>

The result looks like this:

 

 

The Mashup Designer looks like this:

The full XAML source code is of the :

<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">

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

	<mashup:DataPanel Name="Companies">
		<mashup:DataPanel.Events>
			<mashup:Events>
				<mashup:Event SourceEventName="Startup" />
			</mashup:Events>
		</mashup:DataPanel.Events>
		<mashup:DataPanel.DataService>
			<mashup:DataService Type="REST">
				<mashup:DataService.Operations>
					<mashup:DataOperation Name="List">
						<mashup:DataParameter Key="REST.BaseAddress" Value="http://hostname/Thibaud3bis.jsp" />
						<mashup:DataParameter Key="REST.RemoveNamespace" Value="True" />
						<mashup:DataParameter Key="REST.XPath" Value="Companies/Company" />
					</mashup:DataOperation>
				</mashup:DataService.Operations>
			</mashup:DataService>
		</mashup:DataPanel.DataService>
		<ComboBox Name="TabComboBox" SelectedIndex="0" HorizontalAlignment="Left" ItemsSource="{Binding Items}">
			<ComboBox.ItemTemplate>
				<DataTemplate>
					<StackPanel Orientation="Horizontal">
						<TextBlock Text="{Binding XPath=CONO, Mode=OneWay}" />
						<TextBlock Text=" - " />
						<TextBlock Text="{Binding XPath=TX40, Mode=OneWay}" />
					</StackPanel>
				</DataTemplate>
			</ComboBox.ItemTemplate>
		</ComboBox>
	</mashup:DataPanel>
</Grid>

That’s it!

Published by

thibaudatwork

M3 Technical Consultant

2 thoughts on “Mashup ComboBox for REST Web Service”

  1. This solution was great for getting Yes/No functions in M3 handled as a Output/Input option within my Mashup like below.
    Thanks!
    Rene

                                <ComboBox Grid.Row="6" Grid.Column="2" HorizontalAlignment="Left" Margin="0" Padding="0" Width="70" Name="cbPhantom" SelectedIndex="{Binding [OVTP]}" SelectedValuePath="OVTP_selected">
                                    <ComboBoxItem Content="0 - No" />
                                    <ComboBoxItem Content="1 - Yes" />
                                </ComboBox>
    

    Liked by 1 person

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s