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!