Creating a DirectSmile Cross Media mobile application that consumes a Data Relation

This is the third post of a series of blog posts about new Data Relations feature in DirectSmile Cross Media.

In the last two posts I described how to create a Data Relation programmatically and showed how to test the Data Relation using the Data Relation Test Environment. In this post I will show how to create a mobile PURL website that consumes the Data Relation to let us search for movies in the Amazon store.

The sample campaign will contain of two mobile pages. The first page provides a search field for a title and a list of movies. If we select one of the movies from the list we will be redirected to page that shows the details of the movie, like the synopsis and the cast.

Setting up the campaign

First I open the Designer and select Create new campaign. I call the campaign MovieSearch and start with the default database. Later on I’ll drop that and replace it with a tiny database that suites better my needs.

image

In the following dialog I select a Static mobile page and name it Search.

image

Adding the Data Relation

Now I replace the default database with a short, but more meaningful, database. I’m using a CSV file I created with Microsoft Excel. That “database” contains a single table with a single column called title, and some movie titles to play with.

image

After replacing the database we can add our Data Relation. To add a Data Relation I select Add Data Relation from the Database menu.

image

Then I select the Amazon Movie Search Data Relation from a list of available Data Relations. Because of the plugin structure this list can contain more or less different Data Relations by the way.

image

After I have selected to Data Relation I will be asked to provide the values for the preassigned parameters, in our case the Amazon Developer credentials and a default value for the search title.

image

Finally I can change the name of Data Relation or the table where to store the Data Relation in, but there is no need to change this and close the wizard.

image

Now, that the Data Relation is assigned, my Designer window looks like this.

image

In the bottom of the Designer window you can find the Data Relation, showing already some results, because we predefined the title parameter with the search title Green Lantern.

Adding some controls

First I need a text box to enter movie titles. I set the caption to Movie Title and assign the value of the text box to [[Title]] database field.

image

Next I add a button that does the search, in other words it will query the Data Relation with the search term typed into the search text box.

image

Interesting here is, that we don’t want to leave this mobile page when we hit the button, but we want to show a list of search results instead. We do that by utilizing the Register new User function and link to the same page again.

Finally we add a data list control and select of Data Relation as data source.

image

In the moment we don’t have a second page to show the details to the movie, but that will be the next setp. So far, we assign the AmazoonSearchResult.Name property to the caption to show the movie title and select the AmazonSearchResult:MediumImageUrl property as the value of the data list image. The Link value doesn’t matter in the moment and I select just the same value like this:

image

Although that we didn’t do very much, the result is already quite impressing and our preview looks like this:

image

Details page

Now we need to add a second page, this time a personalized mobile page, to show the details of the selected movie. I call this second page SearchResults.

image

This page contains just a bunch of controls showing the values from our Data Relation data source for a specific movie. Typically an image that shows the movie, the title, the cast and director and more…

image

Now that we have our details page, we can go back to the Search page and customize the link property of the data list item.

image

I configure the link to be internal, check the submit button and select Submit Data to ensure that the data of the selected movie is transfer to the second page, which also select to SearchResult.html.

Finally, to avoid that our first page call produces an error, because we don’t deliver a title, we define a default value for the title property in the data relation, like this:

image

That filter takes the value of the Title field if it’s not empty or it takes “Batman” if the Title field value is empty.

Previewing the application

Previewing the campaign is easily done by clicking the world icon in the uppor right corner of the designer. If your browser does not open a new window, please check if your browser is blocking pop-up windows and allow pop-ups for this Designer’s domain.

image

Hey, that looks good so far. We can type in a title and search Amazon for a list of Futurama movies.

image

And if we click on one of the list items the SearchResults page is called and shows the movie details.

I hope this is helpful to get started with DirectSmile Cross Media Data Relations.

Have fun,

Oliver

About Oliver Dehne
Father of two little boys, good boys. Sometimes I like coding, trying to be a good developer.

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 )

Connecting to %s

%d bloggers like this: