A quick & easy LightSwitch app for SharePoint (Brian Moore)

A quick & easy LightSwitch app for SharePoint (Brian Moore)

Rate This
  • Comments 29

I'm a Program Manager on the SharePoint features for LightSwitch. I'll be honest... it's taken me a while to warm up to SharePoint development. Prior to this release, my only exposure to SharePoint was with SharePoint 2010 and earlier. Perhaps you can relate, but I don't get it. Why do people like SharePoint? Or SharePoint development? I have to install SharePoint on my dev box and installing and running SharePoint anywhere (dev box or data center) is not a hobby I want. SharePoint makes me learn about web parts and app models that are all "different". And besides, plain ol' ASP.NET and javascript seem to be able to do what I want them to… I just don't get it.

But working on this release has made me look a bit harder at what must have been a chip on my shoulder. Or maybe it's SharePoint 2013. With SharePoint 2013 I no longer have to install SharePoint on my dev box - using Office 365 I don't have to install it at all. I don't have to learn a bunch of new concepts, in SharePoint 2013, there are just "apps" - these are web apps where ASP.NET and javascript will serve me just fine. I don't have worry about how users install my app and I don't have to host it myself. I went to a few meetings with customers and most had not seen SharePoint 2013 yet but they love SharePoint. And when you show them 2013 they love that too. And many of them use it all day, every day. So there must be a reason for these average salary figures (scroll down to the "Salary by Microsoft Technology Expertise" table - look for SharePoint) even if *I* don't get it.

So I'm starting to "get it". SharePoint 2013 development is, well, nice… (seriously that was the first word that came to mind). Maybe because it's not actually "SharePoint development" - it's just web development. I can take an existing web app and turn it into a SharePoint app with little effort - in LightSwitch, you click a button. The object model is complete and handy, LightSwitch added stuff there too, and I can put an app I build into the catalog and users are off and running.

So how does one get off and running with SharePoint development? There's a lot of good documentation on the web (you could spend days) but if you know LightSwitch or you know web development you probably don't need to start there. Basically, when you write an app for SharePoint 2013, you'll publish that app to a catalog. Anything a SharePoint user installs comes from that catalog so if you've seen stores or catalogs from Windows 8, Windows Phone, Xbox, etc you get the idea. When developing though, Visual Studio lets you skip all that and you can just debug your app as if it's already installed on your site. So to get started:

Step 1

Get an Office 365 subscription or trial - through MSDN or just through http://dev.office.com. Ms. Massi has covered this in an earlier post so I'll just link to that:

Get Started Building SharePoint Apps in Minutes with LightSwitch

But stop at the part about getting the HTML Client Preview. You can also use an on-prem SharePoint 2013 site if you have one.

Step 2

Get CTP4 of Visual Studio Update 2, which contains the LightSwitch HTML Client and SharePoint functionality. (If you installed the previous HTML Client Preview 2 read: Important! Upgrading from Preview 2 to CTP 4)

DOWNLOAD: Visual Studio 2012 Update 2 CTP 4

Step 3

Build your app for SharePoint.

Since this is our first SharePoint app let's keep it simple. First, go to your SharePoint site and add a list we can use in the app. On your SharePoint Dev Site go to Site Contents > add an app:

Find the Contacts app in the list and click to install the app.

 When prompted for a name, use "Customers".

 Now let's go create a new LightSwitch HTML project.

 Let's enable SharePoint so we can attach to that list on Office 365. You can access the project's SharePoint properties via the project properties.

When you enable SharePoint you'll be prompted for the dev site, just provide the site you created when you signed up for Office 365. To make sure this is your dev site, you can click the validate button. When you validate, you'll be prompted for your credentials to access the site. If you don't validate, you'll be prompted for creds when you F5 your app.

Next, let's attach to the list we created for our Customers. Right-click on the server node and choose Add data source…

 In the Attach Data Source Wizard choose SharePoint and click Next. On the next screen, enter the URL of your dev site e.g. https://mydevsite.sharepoint.com and click Next. You'll be prompted for your credentials to access the data service on the SharePoint site. After entering the credentials you'll see a tree of available lists to choose from. Select the Customers list we created above and click Finish.

 Now right-click on the HTMLClient node in Solution Explorer and choose Add screen…

For Screen Data choose the Customers list and click OK.

In the screen designer, let's customize the view slightly. Under the list node, change the layout to Rows layout and delete all the fields except first and last name.

Press F5 and run your app. The first time you run the app, you'll be prompted for creds if you haven't previously validated the SharePoint site (even though you entered creds to get to the SharePoint list). Also, since this is the first time the app has been run, the app package will need to be installed on the SharePoint site. LightSwitch will do this for you, but it will take longer the first time because of installation. It won't need to be installed again unless you make changes to the SharePoint app itself so it will be faster next time.

Before installing the app, SharePoint will ask you if you "trust it" - check to make sure it looks like your app (i.e. the name) and once trusted you won't be prompted again unless the app needs to be reinstalled.

Once the home screen appears it will be empty unless you entered some Customers via the SharePoint list. Regardless, you've just run the app on SharePoint… You're now a SharePoint developer.

Also, notice the Back to site link at the top? That's the SharePoint chrome control that fits into your app automatically on SharePoint so users can always get back to the SharePoint site with one click. Ok, let's finish this app.

Close the browser and go back to LightSwitch. In the screen designer for the Browse screen select the Command Bar node and Add… a new button.

Choose an existing method and use addAndEditNew and then navigate to a new screen. Click OK and then on the Add New Screen dialog, just accept the defaults and click OK. When the screen designer opens, let's remove some fields from the screen to simplify a bit. Remove everything but Last Name, First Name, Email Address and Mobile Number so your design looks like the screenshot below.

Before we F5 again, let's make a quick change to our Customers entity to provide some structure to the SharePoint data. Change the EmailAddress and MobileNumber property types to Email Address and Phone Number respectively, so your design looks like the one below:

Now when you F5 the app you'll see a button to add a new customer and the email address and mobile number fields will have some validation, courtesy of LightSwitch. Go ahead and add a few customers.

 

You can see them in the list on the home screen.

So now that you can add customers, you need to come up with a screen to edit them…. Or do you? Let's close the browser and go back to the screen designer for the Browse screen. Select the List node and in the Properties for the screen, click on the hyperlink for Item Tap under the Actions section.

In the Edit ItemTap Action dialog chose the exiting method editSelected and for Navigate To: choose the Add Edit Customer screen we've already created.

Now when you run the app, you can tap on an existing customer and edit the details.

Let's take a look at one last thing. Go back to your SharePoint site and look at your Customers list. Select any customer you created in your app and look at the details. You can see that LightSwitch uses your SharePoint identity to make changes to the list. Something you would probably expect but it's new in this release.

That's all for now, but if you're ready for a more detailed walkthrough, you can find that here:

LightSwitch SharePoint Tutorial

In futures posts, we'll cover more SharePoint features like publishing your app to a non-developer site to put it into "production", using the SharePoint object model and customizing the chrome control. If there's something else you'd like to see with your SharePoint apps, let me know.

Brian Moore

Program Manager, LightSwitch

Leave a Comment
  • Please add 1 and 3 and type the answer here:
  • Post
  • Great article!

    Ms. Massi has been talking to me about SharePoint and I am excited too. I plan to also do some articles in the future.

  • Great stuff. This is what I need to get started with SharePoint development!

  • Very good post!!! thanks for share

  • I'm not a Sharepoint "Guy" [yet], but LS team did a smart move by connecting themeselves to Sharepoint, now MSFT can't just shutdown LS, the way they did SL. The HTML and Sharepoint move, is the thicket to LS future.

    The new look & feel is very Win8 and future looking. The next version of LS, will bring in a new set opportunities to extend many .Net apps to Mobile/tablets and HTML client.

    Thank you team..

    ..Ben

  • Hi Brian,

    This is aobolutely fun browsing this post - actually I started working with light switch after this, tell me can I develop ERP or crm type application with it or only light customer screen etc,

    Sarah

    browse cloud

    www.sqlservermanagementstudio.net/.../microsoft-sql-azure.html

  • @Sarah - sorry I was on holiday for a bit...

    You can use the SilverLight client for a rich, data-entry type of application (which will also work on SharePoint).  The HTML client is targeted more for mobile devices in this release.  Look as some of the older blog posts and you'll see some examples of screens that can be built.

  • I am trying to follow along and create a Lightswitch HTML project on a DEV VM and connect to my Office365 sharepoint sites, but I get an error when I try to set the datasource - ''mysite/_vti_bin/listdata.svc" is not a valid datasource. I can browse to the listdata.svc url using a browser on the same machine and get a valid response so I am not sure why VS is returning error - any help is appreciated!

  • Hi Rob,

    Did you enable SharePoint before trying to attach to the O365 list?  LightSwitch can only attach to O365 if SharePoint is enabled and the SharePoint site is set to that O365 site.

  • Chris - found my answer - I was trying to use specified user credentials -  Found my answer here: social.msdn.microsoft.com/.../be3a632f-97b2-441e-b86a-1871e91f7841

    Thanks for replying!

  • Chris - thanks for the reply - I found my answer in the msdn forms (you actually provide the answer) - I was using the specified user credentials not automatically choose

  • Having a problem registering SharePoint as a datasource.  When I try to it says that I need to install some Office tools and then does nothing after I say install.  Then Visual studio does not work right until I do a hard reboot.  I tried restarting but was stuck forever trying to do the restart.  I tried to re-install the CTP but was told it cannot find it????

  • Hi John,

    It sounds like you don't have the office tools installed.  First install VS2012 Update 2:

    msdn.microsoft.com/.../htmlclient

    Then install the Office tools:

    www.microsoft.com/.../webpi.ashx

    If you are having more issues, we can troubleshoot in the forum:

    social.msdn.microsoft.com/.../threads

    HTH,

    -Beth

  • Very looking forward to create my first LightSwitch app for SharePoint!

    BUT

    After installing the both: VS2012 Update 2 and OfficeTools for VS2012 I can't find any LightSwitch project template in VS.

    Did I miss something?

  • Alexey - if you're still having trouble kick off a post in the forum - post a picture of your new project dialog and we'll see if we can figure out what's going on.

  • Hi Guys

    Sorry to move in bit off direction. I am looking for more productive ways utilising LightSwtich screen by duplicating screen if I have to create same application at Enterprise Level.

    I am building some application which require quite identical screen and data manipulation from an existing lightswitch application.

    If someone could let me know useful way to build clone application using LightSwitch would be great.

Page 1 of 2 (29 items) 12