In this post I’ll create a Mashup with the DataListPanel. Data will be retreived from the Bing search web service. Then I’ll format the result in the list with a datatemplate, a clickable uri and use the the Open event to launch a web page and I show you how to show a clickable Uri. The Open Event is available in Lawson Smart Office 10.0.1.

Prereq: In order to use the Bing search API (for testing) you need to register and get your own application ID as identifier. In my Mashup this ID is replaced with “BingApplicationID”. Register to get your ApplicationID

The final mashup will look like this:

Start by adding the DataListPanel to your mashup. Select Data Service “WS” and press the configure button.

Select the operation you would like to run and save.

Now the configuration looks like this:

Add a search field and hook up the events.

The final result is a list with columns that bind to the data returned from the Web Service.

Use the tool://wstest or the configuration tool in the Designer to investigate what kind of data is returned. I took some time to ficure out what parameters had to be sent to do a simple we search with this web service. There are lots of different ways that you can search.

The Uri is displayed with the following template:

<Grid.Resources>
 <DataTemplate x:Key="templateLink">
       <TextBlock>
         <ui:TaskHyperlink Foreground="Black" NavigateUri="{Binding Path=Url}">
             <TextBlock Text="{Binding Path=Url}" />
          </ui:TaskHyperlink>
       </TextBlock>
   </DataTemplate>
  </Grid.Resources>

The ui namespace is defined as: xmlns:ui=”clr-namespace:Mango.UI.Controls;assembly=Mango.UI”. TaskHyperlink is useful when you whant to have links that launch other applications, such as mforms, mashups or web content.

Here is the complete XAML, just remeber to put in your ApplicationID.

<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.Resources>
 <DataTemplate x:Key="templateLink">
         <TextBlock>
            <ui:TaskHyperlink Foreground="Black" NavigateUri="{Binding Path=Url}">
               <TextBlock Text="{Binding Path=Url}" />
            </ui:TaskHyperlink>
         </TextBlock>
   </DataTemplate>
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <StackPanel Orientation="Horizontal"><TextBlock Text="Bing for:" VerticalAlignment="center" /><TextBox Name="searchText" Width="200" />
  <Button Content="Search" IsDefault="True" Style="{DynamicResource styleButtonPrimaryMashup}">
      <Button.CommandParameter>
        <mashup:Events>
          <mashup:Event TargetName="searchControl" SourceEventName="Click" TargetEventName="Get">
            <mashup:Parameter TargetKey="parameters.Query" Value="{Binding ElementName=searchText, Path=Text}" />
          </mashup:Event>
        </mashup:Events>
      </Button.CommandParameter>
    </Button></StackPanel>
  <mashup:DataListPanel Grid.Row="1" Name="searchControl">
    <mashup:DataListPanel.Events>
      <mashup:Events>
        <mashup:Event SourceEventName="Open" LinkUri="{Binding SelectedItem.Url, ElementName=ListView}">
        </mashup:Event>
      </mashup:Events>
    </mashup:DataListPanel.Events>
    <mashup:DataListPanel.DataService>
      <mashup:DataService Type="WS">
        <mashup:DataService.Operations>
          <mashup:DataOperation Name="Get">
            <mashup:DataParameter Key="WS.Wsdl" Value="http://api.search.live.net/search.wsdl" />
            <mashup:DataParameter Key="WS.Address" Value="http://api.search.live.net/soap.asmx" />
            <mashup:DataParameter Key="WS.Operation" Value="Search" />
            <mashup:DataParameter Key="WS.Contract" Value="BingPortType" />
            <mashup:DataParameter Key="parameters.Query" Value="Kista" />
<!--You need to register and get your own id on order to run the web service-->
            <mashup:DataParameter Key="parameters.AppId" Value="BingApplicationID" />
            <mashup:DataParameter Key="parameters.Sources." Value="Web" />
          </mashup:DataOperation>
        </mashup:DataService.Operations>
      </mashup:DataService>
    </mashup:DataListPanel.DataService>
    <ListView Name="ListView" Margin="8" ItemsSource="{Binding Web.Results}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
      <ListView.View>
        <GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
          <GridView.Columns>
            <GridViewColumn Header="Title" DisplayMemberBinding="{Binding Title}" />
            <GridViewColumn Header="Description" DisplayMemberBinding="{Binding Description}" />
            <GridViewColumn Header="Url" CellTemplate="{StaticResource templateLink}" />
          </GridView.Columns>
        </GridView>
      </ListView.View>
    </ListView>

  </mashup:DataListPanel>
  <ui:StatusBar Name="StatusBar" Grid.Row="2" Grid.Column="0" />

</Grid>

Now, I would probably not have this result in a columned view like this but in a nice list.