How to create a mashup using Presto Wires

 In my previous post I walked you through the steps on creating an App without writing a single line of code. We used data from USGS site as it is. We sometimes might want to perform some operations like mashing data from different sources, grouping data, performing arithmetic operations on the data, etc.

Today I will show you how to create a mashup using Presto Wires without writing any code. We will use 2010 Report to Congress on White House Staff data from Socrata.

Let me first show you what the final App looks like.

Now let’s get started. we will first go to and grab the API URL. The URL provided by Socrata is in JSON format but we will use XML. Just change the extension of the link from .json to .xml.

Now let’s go to Presto and open up Presto Wires.

Let’s add a Direct Invoke block from the Blocks tab and drag it on the canvas. This block is used to invoke a web resource that is not registered with Presto. Set the resource URL in the block properties pane (bottom left). Click Run to make sure everything works fine.

You should be able to see the result in the Preview pane (bottom right).

Now, let’s get the list of all the White House staff receiving a salary more than $150K yearly.

We will add a Filter block for that.

Let’s specify the filter condition. Connect the Direct Invoke block to the Filter block as an input.  In the block properties for Filter, click the left field of the condition and it will show you the list of all available data from Direct Invoke. Select the salary element. Then set the operation to >= and enter 150000.00 in the right field of the condition. To apply the condition, click Run. You should now see the filtered data in the Preview pane.

Now add an Aggregate block to perform caculcations on this data based on employee positions. This will show how much salary goes to particular postions in the White House staff. Same as before, click in the Group By Key for the Aggegate properties to specify the field on which to aggregate the data (employee position in our case) and what operation to perform on what data (Summation of Salary in our case). See the completed Aggregate block below:

Now let’s add a Sort block (shown below) which will sort the data based on salary. We will use this to display the list of employees in decreasing order of their salary.

Now add a Merge block to combine the data from the Aggregate and Sort blocks. Finally, connect the merged result to the Output for the mashup. This represents the final result of the mashup.

Select the Output block and click Run to make sure we are getting the expected data.

Next, save the mashup so we can create an App that uses this data.

Make sure you turn the mashup ON before leaving Wires.

Use the search box in the main menu or use Browse to search for the mashup we just created. Once you've found the mashup, click on it to go to the mashup's artifact page. This is where you work with the mashup, grant permissions for other users to work with the mashup and create basic Apps based on this mashup.

First, assign permission to Presto_Authenticated group to use the mashup in the Security tab. This lets any user who is logged into Presto Hub run this mashup.

Now let’s run the mashup in the Preview tab and  create a basic App that uses this data.

Before we can create an App, we have to create at least one view for the mashup. We will create a grid view that will display the list of employees in a table in decreasing order of their salary. We will also create a bar chart view which shows how much total salary goes to each position in the White House staff (e.g., $nnn goes to security advisor(s)).

As I showed in my previous article, click on Add view and select Grid View. You can remove fields, reorder the columns, change columns titles and so on till the view looks the way you want it. Save the view.

Next, let's add a bar chart which shows how much total salary is given to all the employees at a given position. Click Add View again and choose the Bar Chart. See the basic configuration for a bar chart below:

Now that we have a couple of views,  let’s create a basic App by clicking Create App as we did last time. There are no input properties for the App, but you can choose different layouts for the two views. Save the App once you like what you see.

Now we will submit this App to the App Store so other users can use this app. Find the App using Browse or Search and open the App's artifact page. Click the App Store Status tab to submit this App:

Check out this mashup and App on Presto Cloud.