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:
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.
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
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:
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.
Program Manager, LightSwitch