Setting up a SearchPanel using the Mashup Designer

A quick refresher on setting up a SearchPanel.

Before creating a SearchPanel, you will need a ListPanel which can be used for searching.

In this case, we are using OIS300 as an example.

Here is an example of the settings for ListPanel.

Now set up the Startup Event for the ListPanel

It’s now time to create a SearchPanel. To do this, select SearchPanel from Controls (under the Application Tab)

When the settings window opens, enter a name for SearchPanel.

Under the Events tab, input details:

In some version of mashup designer, there may not be a SearchPanel control in Controls – Application tab. In this case, we need to manually create TextBox and Search Button. The full xaml code as follow:

<StackPanel Orientation=”Horizontal” Grid.Column=”0″ Grid.Row=”0″>
<TextBox Name=”SearchTextBox” />
<Button Name=”SearchButton” Content=”Search”>
<Button.CommandParameter>
<mashup:Events>
<mashup:Event TargetName=”Crs610List” SourceEventName=”Click” TargetEventName=”Search”>
<mashup:Parameter TargetKey=”Query” Value=”{Binding ElementName = SearchTextBox, Path = Text }” />
</mashup:Event>
</mashup:Events>
</Button.CommandParameter>
</Button>
</StackPanel>

The interesting part in this is Value=”{Binding ElementName = SearchTextBox, Path = Text }” . This means we bind the Query’s value to the Text of SearchTextBox. Every time we click the search button, the value of Query always equals content of SearchTextBox. (For more details, please see Data Binding from MSDN.)

Now all the controls are ready and the whole screen looks like this. (The layout settings aren’t mentioned in this article, you can adjust the layout as you wish).

For technical users who would like to utilise some advanced search options in mashups, see Advanced Searches in Mashups