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 1 and type the answer here:
  • Post
  • @ParasDaftary

    If you haven't already, kick off a thread in the forums (social.msdn.microsoft.com/.../threads) that's a good place for more "complex" discussions.

  • I have been following this thread. My take:

    We really shouldn't have threads like this. It violates not only the spirit but literally the letter of Lightswitch (remember the famous Gartner article on the Citizen Developer) that was supposed to define the Lightswitch raison d'etre?

    The original design philosophy was to allow the knowledge domain expert to use his expertise to create applications. Since the days of tab cards, the basic reason application development was difficult and costly, was because most developers only expertise was writing code. A developer without a knowledge domain expert to guide him, was only good figuratively for endless variations of "hello world".

    Lightswitch was supposed to mitigate this sometimes endlessly iterative process, and at least help both the developer and the knowledge domain expert meet closer in the development process.

  • @Ramon,

    I'm not sure what you mean by "shouldn't have threads like this". All of the comments are positive and encouraging to see people use LightSwitch to fill a need to build custom SharePoint apps quickly. We always have had the philosophy to build a rapid dev environment for building business apps -- and now we're bringing that philosophy to SharePoint.

    Cheers,

    -Beth

  • I just rebuilt my machine Window 7 dev client just to try this guide.  Fresh Win 7 x64 patched up, visual studio 2012. o365 dev tools and visual studio 2012 update 3. from ie 10, I can connect to my spo 2013 dev site collection with a cloud account who has site admin. I created the contact list.  

    In VS 2012, created a new lightswitch project, enabled sharepoint and validated the site.

    but when I attempt to connect a datasource.

    In VS it spins and spins and finally  There was a problem accessing the web resource. Server returned error code: 504.

    In Fiddler:  GET mydev.sharepoint.com/.../listdata.svc$metadata

    504 Fiddler - Receive Failure (text/html)

    I am on a Developer subsite on a production o365 tenant.

    Am I missing something  here? Maybe VS 2012 Update 3 has an issue?

    Thanks!

  • Update: Found my issue with not being able to connect to SPO 2013.  My company uses ADFS and custom login page . To get past the issue I had to make sure to use a Cloud account (instead of ADFS).

    However, now that the solution is deployed on SPO 2013.  I get this error:

    CustomControl Error: customer_render() method not found

  • Found my data connection problem, must use an o365 cloud account.

    Solution deployed and running now. But some issues/questions.

    1. I'm getting this error: CustomControl Error: customer_render() method not found

    2. How do I deploy the solution to a production site collection?  when I run the solution from SPO, I see this url  https://localhost:44301/Hhttps://localhost:44301/HTMLClient/default.htm  will it always look this way?

    3. Is the solution Silverlight or html5?

  • @jc - some comments:

    #1 - I'm not sure on this it will depend a bit on your project make-up - probably best to start a forum post on this one

    #2 - for your "production" app you need to upload it to the app catalog for your tenant and then install the app from there - you can see a walk through for that here: blogs.msdn.com/.../publishing-lightswitch-apps-for-sharepoint-to-the-catalog.aspx

    #3 - html5

  • Hello Brian,

    our company has migrated to SP through Office 365 E3 plan and we are preparing to build a structured data logic using (enforced) lists relationships. The question is if we will still be able to develop lightswitch html5 client on top of that (as a UI) at a later stage or do we have to develop all the tables logic within lightswitch and upload it to SP right from the start?

    I kind of miss this information in your blog since it is discussing a single list.

    Thanks for your help in advance!

  • @Boian - Whether you use SP or the intrinsic store really depends on how "complex" you think your resulting schema will be...  There are some differences in support between intrinsic and SP (probably worthy of it's own blog post) but nothing that I know of that will prevent you from using SP as the data source.

    That said - I would make your decision based on how you need to consume the data.  If you need to consume the data from SP, then a groups of lists hosted on SP makes the most sense.  You could also look at using BDC though that's a bit more involved.  If the app's data is only consumed by the app it will be better to use the intrinsic store.

    In either case you will be able to write an HTML5 client over the data using the LightSwitch development experience - you just may have to write more business logic to gain parity.  I'd also add, that if you have a rich schema in SharePoint, that you'll want to make your app a SharePoint app if at all possible, so the user's identity can be passed to SharePoint when editing the lists (rather than a single user for all edits).

    HTH

  • Hi Brian,

    thanks for the fast reply!

    I feel much more confident now, since our schema won't be so complex, but I simply was not quite sure with, say, field types compatibility between the two platforms.

    SharePoint App sounds good and I hope we can still achieve it at a later stage with the Lightswitch RAD, judging from this promoted way from Beth Massi that also takes care of authentication:

    blogs.msdn.com/.../get-started-building-sharepoint-apps-in-minutes-with-lightswitch.aspx

    Regards

  • For someone just getting started with this LightSwitch/SharePoint/HTML "stuff", this article was very well explained, & very easy to follow. Thanks Brian!

  • Hi,

    I am using the Visual Studio Lightswtitch Update 2 version. I have created a site on Office 365. But I am unable to validate SharePoint site with visual studio. I got an error. Please check error on this thread

    social.msdn.microsoft.com/.../validation-error-while-connecting-a-lightswitch-2012-with-sharepoint

  • Superb !! step by step much helped me to learn and understand the LightSwitch

    Thanks Brain.

  • Thanks Beth for this helpful review.

    I want to ask you how I can add a client web part inside 'Cloud Business Application' and attach it to an existing Screen not Web Page.

    Thank you

Page 2 of 2 (29 items) 12