This exercise will cover creating a basic application with a few different screens and how to navigate between them.  The data we will use for this exercise is the Site Usage data that you can view from Site Settings page.  This exercise starts with a mobile-enabled SharePoint feature already created, for more info on creating these see Your First Mobile-Enabled SharePoint Feature.

Testing Environment
We find that the easiest and most efficient test environment for your mobile applications is Apple Safari.  From the Advanced settings menu, you can enable the Developer menu where you can set the user agent to use when browsing the internet.  Safari also gives a very good representation of what the experience will be like on an iPhone.  Of course, before you go to deploy your applications to production, you will want to test on the devices your application will be running on.   When testing a new application, setting it as the default application in the Mobile Entrée Configuration can also speed up testing.

Getting Started with QueryList
All of the data and screens that get sent back to the user go through the QueryList method.  The EntreeScope parameter of this method contains data about the button that was clicked as well as form data (this will make more sense soon).  The output object is what gets built upon to be sent back to the user.  You will add ListGroups to the output and then ListItems to those groups (again, it will make more sense as you read on).

Let’s first add a title to our screen and set the ListStyle.  The ListStyle will dictate how the list groups will be displayed (with or without headers and padding).  Inside QueryList add the following lines:

output.ListTitle = "Site Usage Stats";

output.ListStyle = EntreeListStyles.list_groups;

Now deploy your solution and browse to the application, you should see something like this:

Go back to Visual Studio, you will now add some items to the screen.  Since we set our ListStyle to list_groups, you want to add a ListGroup with a title to display your items under.

EntreeListGroup lGrp = output.AddListGroup();

lGrp.ListHeader = "Page Stats";

The next thing to do is to grab the data from the Site Usage logs.

SPWeb web = SPContext.Current.Web;

DataTable dt = web.GetUsageData(SPUsageReportType.url, SPUsagePeriodType.lastMonth);

Now you can loop through the DataTable and add items to the screen.  You’ll notice we are using a ListItemStyle that has a Title value and a Count value.  This is a style that will render a title with a count to the left.

for (int i = 0; i < dt.Rows.Count; i++)

{

  EntreeListItemTitleCount t = lGrp.AddListItem<EntreeListItemTitleCount>();

  t.Title = dt.Rows[i]["Page"].ToString();

  t.Count = System.Convert.ToInt32(dt.Rows[i]["Recent Month"].ToString());
}

Now deploy your solution and navigate to your application, you should see something like this:

Adding ClickActions and Navigation
You have created a static list of page statistics.  The next step is to add an action to those items that allows you to drill into the data behind the numbers.  Non-detail and non-form ListItemStyles allow you to add a ClickActionObject to them.  The ClickActionObject contains information about where that click is supposed to take you.

Inside the for loop, just under the three lines for creating the list items, add the following code to add ClickActions to these items.

EntreeClickActionObject cla = output.CreateClickAction();

cla["pid"] = i.ToString();

cla["screen"] = "page_stats";

t.SetClickAction(cla);

The properties that you are adding to the ClickActionObject (pid and screen) will be available in the EntreeScope object when this button is clicked and QueryList gets called.

So now, we want to wrap all of the code we just wrote, except for the ListTitle and ListStyle, in an if() statement.  This if() will look for a “screen” property in the EntreeScope.  If it is set to “page_stats” we will want to render a drilled-down view of the page data.

I will lump the handling and rendering of this new page into 2 steps.  The first is to grab the page stats from the Site Usage logs and render them out based on the “pid” property that was sent from the ClickActionObject.

SPWeb web = SPContext.Current.Web;

DataTable dt = web.GetUsageData(SPUsageReportType.url, SPUsagePeriodType.lastMonth);

EntreeListGroup lGrp = output.AddListGroup();

int pid = System.Convert.ToInt32(EntreeScope["pid"]);

lGrp.ListHeader = "Stats for " + dt.Rows[pid]["Page"].ToString();

for (int i = 0; i < dt.Columns.Count; i++)

{

  EntreeListItemDetailNameValue l = lGrp.AddListItem<EntreeListItemDetailNameValue>();

  l.Name = dt.Columns[i].ColumnName;

  l.Value = dt.Rows[pid][dt.Columns[i].ColumnName].ToString();

}

The second step is to put in a back button.  You can add buttons to the top bar of the Mobile Entrée default styles.  This button is called an EntreeActionItem and also uses the ClickActionObject to define its actions.

EntreeActionItem ai = output.AddAction();

ai.ActionTitle = "Pages";

ai.Position = "left";

EntreeClickActionObject co = output.CreateClickAction();

co["screen"] = "pages";

co.SlideDirection = EntreeScreenSlideDirection.Back;

ai.SetClickAction(co);

Deploy your solution and test it.  You should now be able to drill into the page data as well as go back using the “Pages” back button you created.

You have now created a read-only application that represents a good bit of the knowledge you will need when developing any mobile application within the Mobile Entrée framework.