Corey Roth [MVP]

Cloud Business Apps are a new project type that you will find in Visual Studio 2013 for SharePoint development.  What exactly are they?  They are the next evolution of LightSwitch using the app model.  If you’re not familiar with LightSwitch, it’s a light-weight developer tool inside Visual Studio that lets you create applications rapidly.  It allows you to create data stores and connect to external data using a designer.  I first saw them in the release candidate build of Visual Studio 2013 but couldn’t get very far with them since there was not much documentation at the time.  MSDN Magazine published an article on them recently and this gave me the information to dig more into them.  If you haven’t read that article yet go take a look.  I wanted to expand on it though with a step-by-step example and lots of screenshots.

To get started, look for the new Cloud Business App project type under Office/SharePoint in the New Project dialog.  In my example, we’re going to make a simple app that allows us to manage customers and their feedback.

Give the project a name and then you’ll go to the next step where you specify the site that you are going to develop your app on.  Like working with other types of SharePoint apps, keep in mind that you need to have an existing site collection using the developer site template.  Like working with other apps, you don’t need to have SharePoint installed locally.  You can work directly with your developer site hosted in SharePoint Online.  If you don’t have a developer site, you can click on the link to either get a trial or use your MSDN subscription.

When you click Finish, it will create a number of projects in Visual Studio in this order:

• Cloud Business App project – has configuration for the entire app itself
• HTMLClient project – contains the screens for your project
• Server project – contains your data model
• SharePoint App Project – entry point to your app

Ultimately, what you are building here is a provider-hosted app.  This just takes a lot of the pain out of the process. 

When you create your solution, you start out with a blank design surface where you can start working with your data.  We start by adding our data model and relationships.  Then we can start defining screens and the navigation between them.

We’re going to start by defining a customers table with some basic contact information.  Clicking the Create new table button opens the table designer.  You will need to rename the table to something meaningful and then you can add your properties.

You’ll see familiar SQL data types in the list plus some additional custom ones such as Email Address and Phone Number.  Selecting one of these types will provide some automatic validation in your forms.

In my example, I’ll add my remaining fields.

The power of the Cloud Business App is that you can relate data regardless of where it comes from.  Ultimately, the Customers will be stored in SQL, but I am going to track the feedback in a SharePoint list.  The list is simple and just contains Title, Description, and CustomerName fields.  Here is what the list looks like in SharePoint.

To add external data, click the Attach to External Data button on the Customers table design surface.

On the next step, we provide the URL to the SharePoint site that contains the list.  You can also specify specific credentials otherwise it will just use the user’s credentials.  Keep that in mind with your permissions on the list.

Now, select the lists that you want to include.  In my case, I am including the Customer Feedback list.

When you finish you will see a table designer for the SharePoint list.  This one is different though in that you cannot edit any of the fields.  It will also automatically create a relationship to the UserInformationList table so that you can get names of users as opposed to just their Ids.

Now what we need to do is add our relationship between the Customers SQL table and the CustomerFeedback SharePoint list.  Click the Relationship button to make this happen.  In this screen select the tables you are mapping and then specify the multiplicity.  In this case, I can have multiple feedback items per customer.  The last thing you need to specify is the common fields to use for the join.  In my case, I simply used the name of the customer.  Normally, you wouldn’t join this way but I was having issues using a number field in SharePoint and the auto-increment value in SQL.  The data types come across as int in SQL and double in SharePoint so it won’t let you map it.

Now that we have our data model defined, we can start adding screens to manipulate the data as well as navigation elements.  Go back to the Customers data model and then click the HTMLClient button.  This allows us to click the Add Screen button at the top.

This takes us to a wizard where we can choose what type of screen to add.  Let’s start with the Browse Data Screen which lets us view a list of all of the items in the table.

In the Screen Data dropdown, select the Customers table.  Click OK and we will be taken to a new designer that lets us customize how this screen works.

This interface looks a bit intimidating but is actually quite powerful once you start playing around with it.  At this point, we can actually run our app.  It won’t do much, but let’s take a look.  Press F5 to begin debugging.  When you deploy, you may get prompted for authentication.  You might also need to trust the app as well.

When you launch the app, you’ll see the Browse Customers screen.

Unfortunately, there is not much we can do at this point.  We still need to create views to edit and view the data.  Let’s do that next.  Go back to the HTMLClient of the Customers data model and click the Add Screen button again.  This time select Add / Edit Details Screen.  Notice how the wizard includes the CustomerFeedback table due to the relationship.  Select the checkbox next to it and complete the wizard.

This takes us to the editor for the screen itself.  Take notice that there is a Rows Layout for both the Customers table and the Customer Feedback.  Here we can configure how the form fields are displayed by dragging and dropping them.  There are a number of pre-defined layouts as well.  We’ll go into that more here in a bit. 

Repeat the same process for the View Details screen as well.  This gives us the screens we need to view and edit our data, but unfortunately we still don’t have any way to get to them.  We need to add navigation.  Go back to BrowseCustomers.lsml.  The screen is laid out using tabs and then in each tab you can specify different types of layouts to display the data.  Look for the Command Bar and select it.  Then click Add Layout Item –> Button. 

This takes us to a screen where we can add a button to navigate to the other screens.  We’ll start by adding a method to the Add / Edit screen.  Choose an existing method and look for Customers –> addAndEditNew.  Depending on the steps you took, the naming might vary slightly but it should be obvious which one you want.

Repeat the same process for the View Screen.  Now when we launch the app, we should have some shiny new buttons.  Here is what the screen looks like after I have added my first customer.

Let’s take a look at what the Add Customer form looks like.

This gives us a decent form and we even get a little validation.  If you noticed all of the buttons on the site, you might have noticed they seemed a bit tablet friendly.  That’s because they are.  This entire thing is implemented with responsive web design.  That means, we can shrink the browser width and the form resizes accordingly.

Notice how the second row of form fields automatically collapses into one vertical column.

Now let’s take a look at the View Details screen.  Since I defined the Web Site column with the appropriate field type, it automatically makes it a hyperlink.  Notice there is a tab there for Customer Feedback.

Clicking on it allows shows us the data from our SharePoint list in a summary view.

There we have it.  We have related data from SQL and SharePoint without writing a single line of code.  What if we want to make edit an existing customer.  To do that, go to BrowseCustomers.lsml and look for the Add button under the Customers list.

Choose the editSelected option to create a new button.

This gives us a new Edit Customer button when selecting a customer out of the list.

Wouldn’t it be nice if this browse customers screen showed some more information now?  That’s pretty easy to do.  Go back to BrowseCustomers.lsml again.  Click on the arrow next to list and you will see some options.  Try Table or Tile List (again sticking with the touch friendly theme).  Choosing custom control will allow you to define your own layout using code.

Once you choose one of the other layouts, you’ll have some new options available.  In the case, below I chose Table and it then lists all columns in the table.  We can then add and remove columns as desired.

Now when we refresh our browse customers page, we have the data presented in a grid.

Hopefully, this gives you a nice overview of what you can do with Cloud Business Apps.  There is lots more that I can show you, but this post is already quite long so I’ll save those things for a follow-up.  As you can see, Cloud Business Apps really aren’t hard to get started with.  Unfortunately, deploying them in a production scenario does seem a bit more involved.  Refer to the end of the MSDN article for help on setting up your certificates and the Azure web sites.  The nice thing is that they are built to run with Office 365 but they should work on-premises as well.

At MVP Summit this year, many of us were lucky enough to pick up a Surface 2 32 GB.  As many of you know, I have been a die hard supporter of my Surface RT and I think it runs great with Windows 8.1.  I simply love the connected standby and long battery life.  While your buddy’s Surface Pro isn’t notifying them of E-mail because it’s asleep, my Surface 2 chimes every time I get one (except during the new quiet hours :) ).  I also don’t have any desire to run Adobe Photoshop or Visual Studio on the device so sticking to the apps that are in the Windows Store works great for me.  I’m thoroughly impressed with the device.  Let’s take a look at some of the new features and differences and then you can decide if you want one for yourself.

Physical Differences

Meet the new Surface (2).  It looks similar on the front with a visible gray border from the casing.

The Surface 2 comes in it’s natural gray color with the word Surface prominently displayed on the back.  I hope this leads to fewer people having to ask what the device is since they never had a clue what my Surface RT was. :)  I don’t like the gray color as much as the black on the Surface RT but it’s not a deal break for me.  If you are used to the smooth finish of the RT, you will notice that the back of the Surface 2 isn’t quite as smooth. 

It features a two position kick-stand which I find highly useful when you have it sitting in your lap with a keyboard.  Here is the traditional angle offered by Surface RT.

Here is the new couch friendly angle great for using Xbox SmartGlass with your new Xbox One.

Camera

The Surface 2 has upgraded cameras (3.5 megapixel front and 5.0 megapixel rear).  I don’t think the camera is a huge selling point on any tablet device, but it’s a nice upgrade.  This is mainly because all I ever did with the cameras was take pictures using OneNote and occasionally use it with Skype.  The position of the camera and the ambient light sensor has varied some so if you have skinned your Surface RT, you’ll need a new one for your Surface 2.  Luckily, these are quite cheap at the Microsoft store (around $15).

Accessories

All of your Surface gen 1 accessories will still work including keyboards and power adapters.  This makes it easy to transition to Surface 2.  The connector on the power supply is slightly different.  When connected it now has a colored ring which makes it easier to tell it is plugged in.  It’s also a bit easier to get connected now as I often struggled when trying to plug in my Surface RT when in the dark.  You can see the ring there on the side of this picture taken in the dark.

You may have heard about the new colorful type keyboards.  They feature backlighting.  Here’s an example of the purple (no it’s not mine :) ) Type Keyboard 2 with the key lit in the dark.

Speed

One of the biggest issues among bloggers and reviewers in the last year with Surface RT was the speed of the device.  The device is particularly slow at times.  This is especially noticeable when you have a number of apps open, especially Outlook RT (which we got with Windows 8.1).  I have to say the Surface 2 is noticeably faster (night and day).  The device is generally snappy and the mail app runs pretty quickly as do other apps.  I can even keep Outlook RT running and the device doesn’t start to lag like I noticed before.  For the speed alone, this device is worth the upgrade if you want an RT device.

The memory in the device is still 2 GB.  This doesn’t prove to be a huge issue, but I do feel like the device can hit this value fairly quickly still when you have a lot of apps running.  When this happens you’ll find Windows tombstoning (closing) more background apps than you care for.

Transition

Windows 8.1 makes it so easy to move from one device to another!  When I first powered up the device and logged in it prompted me if I wanted to copy my settings from a previous device.  I opted to copy the settings and through the magic of the cloud, my start screen reappeared with all of my familiar tiles.  I only had to re-arrange a couple of tiles and it ended up looking exactly like my the start screen on my Surface RT.  It recognizes which apps you had installed before and you can click on just click on the icons to get them downloading.

One thing to note.  If you happen to buy your device when you are on the road, configuration at a hotel might be a minor issue.  Typically the WiFi at hotels requires you to sign-in, enter a code, or click a button before you are online.  The initial configuration experience doesn’t play well with this.  To get around it, I fired up my MiFi and did the configuration with that device.

Screen Resolution

It doesn’t take long to get spoiled by the HD resolution (1920x1080).  You start to notice this in places like the Start screen and on the desktop.  When you go back to your Surface RT, you can really tell a difference.  Windows automatically makes adjustments to the scaling so things are easier to read on the desktop, but if you have good ideas you can tweak the device to run at normal scaling and see some very small icons.  Take a look at the screenshot of my desktop on the Surface 2.  Compared to the Surface RT, you can see that more tiles fit on the screen horizontally.

Here’s the same start screen on my Surface RT.  Notice how the last column of tiles gets cut off.  Even the background image is cut off in places.

If you run Remote Desktop, you can run at the full 1920x1080 screen resolution.  This allows you to see everything on the device, but I find that it’s a bit hard to use with touch because the pixels are so small.   It’s fine if you use a mouse or the touchpad on one of the keyboards.

Apps

The app story keeps getting better for the Windows Store.  At launch, we finally got Facebook and Flipboard.  These were big apps that people had been waiting for (although you could always use Facebook in the browser just fine).  Since, I have no desire to run Photoshop on my tablet (although you can run Photoshop Express :) ), I am quite happy with this device as a bridge between business productivity and fun and games.  I never have understood why people used this particular application to judge the success of the Surface.  It’s not like IOS can run it.

Storage

I opted for the 32 GB this time as that was what is available.  I also had a Surface RT 32 GB for a while and never really had an issue with storage.  Movies and videos can be offloaded to the SDXC card.  Documents can be stored in SkyDrive with the included free 200 GB of storage for 2 years.  I don’t suspect storage space will be an issue at all.

SDXC Slot

The Surface 2 features the same SDXC card slot but it has been moved down slightly making it easier to reach.  One thing to note about this slot is that when you slide the card in, it will actually click twice.  If you only hear it click once, then it will not be detected.  Push it in further, and you’ll hear another click and Windows should detect it.

Speakers

Another common complaint of the speakers of Surface RT is that they just aren’t that loud.  I never found this to be an issue since I always paired my Surface with a Jambox (or other Bluetooth speaker).  As far as speakers go, I would say Surface 2 is pretty comparable.  I did a few tests between the two devices and couldn’t tell any noticeable difference at max volume.  The Surface 2 adds an additional microphone.  This should help for conference calls using Skype when not using a headset.

Ports

The Surface 2 now features a USB 3.0 port whereas Surface RT only has a USB 2.0 port.  This is a nice improvement but I never found it to be a blocker on my Surface RT.  I haven’t found myself copying large files off of external hard drives or anything like that.  It’s still a nice upgrade.  Surface 2 still features a Micro HDMI port out.  I would like to see Surface and Surface Pro use the same port at some point.

Battery Life

The battery life with Surface RT was already ridiculously awesome.  I had no issue exceeding the quoted 8 hour battery life on a regular basis.  The story with Surface 2 is even better.  It’s quoted at 10 hours when playing video and I bet it can do even longer.  I have had no issues with battery at all yet.  The nice thing about RT devices is that they also charge rather quickly as well.  They can usually charge in just over 2 hours or so.

Issues

No device is perfect, but this one is pretty nice.  I have encountered a few minor issues but I have been able to work around them.  I noticed the first issue when I was on the airplane home.  I plugged my headphones in and couldn’t get any sound to work.  When visiting the Manage Audio Devices control panel, I would receive an error related to the drivers.  This has seemed to resolve itself though since I have gotten home.  Hopefully, it doesn’t happen again. 

The other issue I have also affected my Surface RT.  About once a week (maybe more), I find that Surface refused to turn on.  Pressing the Windows button will vibrate but pressing the Power button does not turn the screen on.  When this happens, you can hold the Power button for an extended period of time and it might turn on.  However, sometimes the only reliable way to get it to power back on is to plug it into external power and then hold the Power button for a bit.  I have only had this happen once on the Surface 2.  I was hoping this issue wouldn’t follow us to the new device but it looks like it may be there.  It’s not a huge deal, but it is a bit of an inconvenience.

Now that I have a Surface 2, I have noticed that my Surface RT is not staying charged.  If I leave it unplugged, the next day it will be completely dead.  I’m not really sure the cause (maybe power settings), but I suspect it is dying of jealousy due to the new kids\ on the block. :)

Wants

I think the one thing I want from Surface Pro (no not the x86/x64 apps) is the stylus.  Although I don’t see myself using a stylus a lot, I would love to see that functionality make it’s way to the RT line of devices.  I was hoping that would make it into this version, but who knows there is always the next revision.

Summary

There is a reason why the next generation of Surface is flying off the shelves.  They are nice devices.  If you aren’t looking for a highly productive business device that can do some great consumer tasks, this device is for you.  If you have expectations of turning it into a developer tool or running your 15 year old software then go buy a Pro.  If you have been holding off to buy a Surface, go buy a Surface 2 now.  I have even heard the most skeptics of colleagues, bloggers, and tech writers totally pull a 180 on this device.  This is a device to be had!

Follow me on twitter: @coreyroth.

If you have been following my posts lately, you might have noticed I have been dissecting the inner workings of the Hashtag Profile page (HashTagProfile.aspx).  I started with using search to query hashtag data and then yesterday I posted on how to query for trending tags.  The last component of this page is how to get the related terms of the hashtag.  As a reminder of what this does, it allows you to associate terms in the term store with a hashtag.  Whenever that term is used, it gets associated with the hashtag.  You can see the related tags in the screenshot below.

Figuring this out took a bit of digging.  Remember that hashtags are nothing but terms themselves.  Ultimately what I discovered is that each term in the term store has the ability to add associations.  Unfortunately, the method to access these associations is marked internal meaning we can’t access it.  Luckily, I found that this really just gets stored in a custom property of the term.  Let’s take a look at what you need to do.

For simplicity, I used the server-side object model using a console application.  It should be possible to do this with JavaScript too though.  I suspect you can access the same information using SP.Taxonomy.Term.localCustomProperties.

Start by adding references for the following:

• Microsoft.SharePoint.dll
• Microsoft.SharePoint.Taxonomy.dll

In our class itself, we’ll need the following namespaces.

I am going to get access to the term store in my case using an SPSite object for any given site collection on the site.

Inside, the using block, I get a TaxonomySession and TermStore object.

Now we need to get access to the term in the hashtag.  You can get this in a variety of ways but I am simply going to use the GUID which I took from the URL of the HashTagProfile.aspx page. Otherwise, you can access a Group object first and then find the term you are looking for that way.

This gives us a delimited string with the GUID of each associated term and the owner.  Here is what it looks like.

"973bdb1b-eb9f-4f8b-8512-6440b0913b4f||0#.w|sharepoint\\sp_setup||4c1ad4aa-77f6-40de-bd16-210cad44d0b3||0#.w|sharepoint\\sp_setup"

The delimiter to use is “||”.  Using string.Split() we can get the GUIDs we need and then look up the names of the terms.

We are only interested in the terms, so we will loop through them with an increment of 2.

Here we just use the GetTerm() method using the GUID we have parsed to print out the name of the term.

When the code executes, it looks like this.

Here is what the entire code snippet looks like together.

If you have been wanting to customize this functionality, I hope that you find today’s example useful.

Last week, I posted on how to query items matching a hashtag.  Today, I want to extend that concept further and talk about how to determine which tags are trending.  What I am specifically talking about today is the functionality in the “Trending #tags” section of the Newsfeed page.

You can see the list there on the bottom right.  It lists each tag and provides the number of times it was used in the last week.  Once you know how to query for this information, it’s actually quite simple.  However, it took quite a bit of digging for me today to figure it out.  How did I do it?  Well I knew it was search based, so I wanted to capture the query that the built-in web part was using.  To do this, I went back to my on-premises environment and changed the diagnostic logging settings under SharePoint Server Search –> Query to Verbose.

I then started a trace with ULS Viewer and went to the Newsfeed page to see what was going on.  After some digging, I noticed a query as highlighted below.

That query specifically was something like this:

ContentTypeId:0x01FD* write>="2013-11-06 21:46:30Z" -ContentClass=urn:content-class:SPSPeople

Specifically this query is looking for specific content types (you’ll see which ones shortly) and it uses the write keyword to get everything that has happened in the last week.  Lastly, it excludes people results.  Interesting, so what does it look like when I paste the query into my Search Center?

Interesting.  Those don’t look like trending tags at all!  In fact, what we are looking at are posts and replies fro the social feed.  Interesting.  Take a look at that Tags refiner on the left though.  Those tags look familiar!  Going back and looking at what the out-of-the-box web part, it turns out that they match and they are even in the same order.  Could it be?

Edit the refinement panel and take a look at the refiners in use and you’ll see that the values in refiners match exactly to what the out-of-the-box web part gives us.

This gives us what we need to work with as a developer.  If you wanted to use it with REST, you would use a query like this:

https://server/_api/search/query?querytext='ContentTypeId:0x01FD* write>="2013-11-06 21:46:30Z" -ContentClass=urn:content-class:SPSPeople'&refiners='Tags'

Here we also need to specify that we want it to give us a refiner using the refiners query string parameter.  Specify a value of Tags and make sure it is enclosed in single quotes.  You’ll notice in the Refiners element, we get each the name of each trending tag in convenient SharePoint Term form with the GUID as well as the RefinementCount. 

From here, you should be able to manipulate this data to display however you want.  You can also tweak the query now to exclude or include other entries as desired.  One thing to note here is that this means that trending tags is solely based off of the newsfeed.  Tagging documents with an associated enterprise keyword as I mentioned in my previous blog post won’t affect what is trending.

I’ve been digging deeper into the SharePoint 2013 social API a bit more lately and I was particularly interested in social tags (hashtags).  In particular I wanted to find a way to see what social feed items have been tagged to a given hashtag similar to what we see on the page HashTagProfile.aspx on your personal site.

This particular page does a number of things.  It shows all social feed items associated with the hashtag.  It also allows a tag administrator to associate this tag with an item in the term store.  This allows any document tagged to that particular item to be associated with the hashtag.  The SEE ALL link got me interested because I noticed it was a search query. 

Here’s an example of what the query looks like.

NOT(ContentTypeId:0x01FD4FB0210AB50249908EAA47E6BD3CFE8B* OR ContentTypeId:0x01FD59A0DF25F1E14AB882D2C87D4874CF84* OR ContentTypeId:0x012002* OR ContentTypeId:0x0107* OR WebTemplate=COMMUNITY)owstaxIdMetadataAllTagsInfo:#03d247305-a0aa-46cc-8842-1806debbe1ae OR owstaxidmetadataalltagsinfo:#02890c1bc-0732-41b3-8466-52faf158d406

Breaking that query down, basically it excludes a few content types as well as the community site.  The key part of the query I found to be is the owstaxIdMetadataAllTagsInfo managed property.  You will notice there are two of them there.  It turns out, the first GUID returns all conversations associated with the hashtag.  The second GUID returns all documents associated with the Enterprise Keyword.  Take a look.

Next the results for the documents associated with the Enterprise Keywords.

If you want to see both together you just combine the query.

This works well, but I really wanted a simpler way to just see the social feed items associated with the hashtag itself.  I really didn’t want to have to go and retrieve the GUID for the underlying term first.  Luckily, Search is smart and you don’t have to.  Just put the human readable term in your query with owstaxIdMetadataAllTagsInfo and it does the rest.

owstaxIdMetadataAllTagsInfo:"#MarketingCampaign"

This actually provides more results than HashTagProfile.aspx does or when querying by GUID.  I am not really sure why there is a difference but these results seem to be more complete.  Try it out for yourself.