How to: Create a SharePoint 2013 App for Office 365
Prerequisites
- Visual Studio 2012 or later. Get Visual Studio 2013 for free.
- Office Developer Tools.
- Office 365 account or SharePoint 2013 server installed locally.
Creating an SharePoint Developer Site Collection
To test and debug SharePoint apps we need to have a Developer Site Collection in Office 365. Go to your SharePoint site as an administrator and choose Admin from the apps shortcut.
From the Office 365 admin center, click Admin/SharePoint.
In the SharePoint admin center screen, choose New/Private Site Collection.
Give the site a name, choose a URL and make sure you choose the site template as "Developer Site".
Once you created it, you are now able to test from Visual Studio.
Creating the App
Open Visual Studio 2013 and create a new SharePoint app.
In the next dialog, enter the URL of your SharePoint site that you created earlier and select the radio button that reads “SharePoint-hosted”.
Hit Finish and you now have created your first app for SharePoint 2013.
Note: After clicking finish it will ask for credentials, please provide your Office 365 account credentials.
Visual Studio 2013 creates app project for you and open Default.aspx page.
You can see in Default.aspx Visual Studio adds some required references to JavaScript files. What we are interested in for now is App.js.
The JavaScript written in App.js is straight forward, as you would see we have context and user variables defined as global variables, context will hold the current client context our app is running on and user will hold the current user object.
We have jQuery dom ready function which calls getUserName() method and display the current user title in the html element named ‘message’ defined in Default.aspx page.
Please go to JavaScript API reference for SharePoint 2013 to deep dive.
Understanding app project structure
As you see in image above, we have 4 folders added as module:
- Content [mainly holds static content like style sheet used in our app].
- Images [as the name suggests, holds images used in app].
- Pages [will contains pages used in the app].
- Scripts [stores all the scripts used in the app].
You can configure some app settings here, like I changed the app Title, you can change it to whatever you are liking, you can change the app Name too, but make sure it will not contains spaces. You could change the version number, app icon and the app start page. Start page is what end users see when your app runs.
You could also set app permissions by going to Permissions tab, as you can see I have set the permission for reading Web scope.
Testing and debugging your app for SharePoint
To test/debug the app, press F5, it will build the app and deploy to SharePoint 2013 site. Enter your Office 365 credentials in the browser that Visual Studio 2013 open for debugging.SharePoint 2013 will ask you to trust the app, trust it! What are you waiting for?
and you will see the app running in SharePoint itself with full page rendering.
When running app, Visual Studio 2013 may have hit breakpoint(s) that you set in App.js, if not then set it and see Visual Studio will wait for you there.
I am done now, I hope you like it. I can’t imagine what you can build with Apps for SharePoint. If you have any questions or comments then please let me know, I am happy to answer.
References:
Dependency Injection in ASP.NET MVC 3 using Ninject
Since the release of ASP.NET MVC 2, I am learning Dependency Injection in ASP.NET MVC. I used Microsoft Unity and realized the need for it to simplify ways to handle the dependencies between objects.
I have seen a lot of open source developers using Ninject as a dependency injector and I think I’ll give it a try. In Rob Conery’s MVCStarter, I have seen good implementation of IoC setup using Ninject 2.0 it was good but I have too many works done in MVC application’s Global.asax.cs file. I didn’t like that configuration but I’ve no choice.
With the release of ASP.NET MVC 3 BETA [currently in RC 2] they have made significant changes to the IoC support, please look at Brad Wilson's post, for service location/dependency resolution with MVC, they introduced new interface: System.Web.Mvc.IDependencyResolver. You have to implement this interface within your application and register it with System.Web.Mvc.DependencyResolver’s static method SetResolver(IDependencyResolver resolver).
In Scott Guthrie's post, I have downloaded and study the Ninject implementation of dependency injection and happy with the neat code he wrote. no use of Ninject MVC extension: Ninject.Web.MVC, it is due to the new IoC support in ASP.NET MVC 3.
There are some questions asked regarding it on stackoverflow, So I decided to write a brief post on how to use Ninject 2 in ASP.NET MVC 3.
Prerequisites
you will need to download the latest build of Ninject from here. I download this Ninject-2.1.0.91-RC2-release-net-4.0.zip. You also need the latest release of ASP.NET MVC 3 [RC 2]. If you download the project at the end of this post then you don’t need to download Ninject binaries it’s been provided in the project itself.
Let’s start
Create new project: File –> New –> Project
You can download the ready to run project at the end of this post.
Select ASP.NET MVC 3 Web Application as shown below:
After clicking OK you would see new ASP.NET MVC 3 Project dialog asking you to select Template, View Engine and you want Unit Test project or not.
Now you have your new ASP.NET MVC 3 Web Application project ready.
For demonstrating dependency injection we need some sort of interfaces and their concrete implementations, so in that regard I will add a new interface named IMessageService and it’s implementation MessageService in the new Services folder to the project root.
Here is the interface IMessageService:
and MessageService:
Now setting up project to introduce dependency injection, this is the time to add a reference to Ninject.dll that you have downloaded as described earlier, if you are lazy like mine then download the project linked at the end of this post.
Now open up Global.asax.cs and add the using Ninject; statement to add a Ninject reference, from ASP.NET MVC 3 Beta and above we have to implement IDependencyResolver for DI work, so It can be implement like this:
Now in the Application_Start(), we want to hook our DI related stuff. for simplicity, like Scott Guthrie did, I’ll add a method which do it all like that:
ok, in the method above I created a standard kernel which is implemented in the Ninject.dll and bind our service to it’s concrete implementation, say whenever the application encounters the IMessageService then it will automatically creates a new instance of MessageService damn simple isn’t it, don’t forget to call above method in Application_Start().
To test it, open up HomeController and change it like that:
First, I add a private readonly field _messageService that holds our service instance on the fly. I also add a class constructor which takes single parameter of type IMessageService and then set it to our private field.
In Index() ActionResult method I called the GetMessage() and we are done, look I didn’t create a new instance of MessageService class anywhere it will automatically created by our DI container.
Now run your application by pressing F5 or Ctrl+F5 you will see:
you see the message above it comes from our MessageService class’s GetMessage() method which I called in HomeController.
Hope you understand how DI works in ASP.NET MVC 3 with Ninject without the need of Ninject.Web.Mvc extension, thanks to the Phil Haack and team.
Now for your comfort, download the ready to run project right now.
Note: I have been learning coding best practices since my early development years, so if you found that I made a mistake here and there then please express it in comments below, I appreciate that and will learn from you.
Enjoy!
Take snapshot from webcam using Silverlight 4 Webcam API
I have Webcam attached to my Laptop, but I’m not able to capture still images from it on Windows 7. I tried Youcam from Cyberlink it’s good but not freely available then I decide to build my own application for capturing images from my webcam.
As we know that Silverlight 4 has Webcam, Microphone and other good APIs built in so I decided to build my application with Silverlight 4, so in this post I’ll show you how you can capture images from your webcam and save it.
So let’s start by creating new Silverlight Application by opening Visual Studio 2010 or Visual Web Developer 2010 Express which is freely available, click File –> New Project
In the New Project dialog, select Silverlight in Installed Templates section from the Left pane and select Silverlight Application, as you hit ok button a new dialog appears asking you “if you want to create new ASP.NET Web application or ASP.NET MVC application”. See the screenshot below:
As shown above the dialog is straight forward and easy to understand, just have settings as shown and hit ok button, you now have Silverlight application ready to work with.
Our application will look like this when completed in the designer:
What are we waiting for let design the application first in the xaml designer. The application UI is very simple you see in the screenshot I have two comboBox on top, one for holding VIDEO devices and second for AUDIO devices available in the machine, we can fill these two comboBox within our code, in the center of the UI you see white large box which is for displaying our Webcam live feed, I add three buttons for different purposes, “Start Camera” is used to enable webcam, this same button is also used to disable webcam, “Capture Image” is used to capture current frame from the live webcam feed which is in raw format as WriteableBitmap, finally last button “Save Image” is used to save captured frame in jpg format. On the bottom of the application there is a ListBox which holds our captured raw frames from the webcam, which is bind to ObseravableCollection<WriteableBitmap>.
To design exactly as shown above, just copy and paste the following xaml markup in your MainPage.xaml file
<UserControl x:Class="SilverlightDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="600">
<Grid x:Name="LayoutRoot" Background="#FF333333">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Foreground="White" FontSize="18" HorizontalAlignment="Center">Silverlight 4 Webcam and Microphone Demo</TextBlock>
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<TextBlock Foreground="White" Margin="5" Text="Available VIDEO Sources" Grid.Column="0" Grid.Row="0"></TextBlock>
<ComboBox x:Name="VideoSources" Grid.Column="0" Grid.Row="1" Margin="5">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FriendlyName}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBlock Foreground="White" Margin="5" Text="Available AUDIO Sources" Grid.Column="1" Grid.Row="0"></TextBlock>
<ComboBox x:Name="AudioSources" Grid.Column="1" Grid.Row="1" Margin="5">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FriendlyName}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Border CornerRadius="8" Grid.ColumnSpan="2" Grid.Row="2" Width="500" Height="400">
<Border.Effect>
<DropShadowEffect Color="White" Direction="0" ShadowDepth="0" BlurRadius="15"/>
</Border.Effect>
<Rectangle x:Name="Webcam" Fill="White" Margin="5" Width="500" Height="400"/>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Row="3">
<Button x:Name="StartStopWebcam" Content="Start Camera" Width="100" Height="35" Margin="5" Click="StartStopWebcam_Click"/>
<Button x:Name="CaptureWebcam" Content="Capture Image" Width="100" Height="35" Margin="5" Click="CaptureWebcam_Click" />
<Button x:Name="SaveImage" Content="Save Image" Width="100" Height="35" Margin="5" Click="SaveImage_Click" />
</StackPanel>
</Grid>
<ScrollViewer Width="500" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden">
<ListBox x:Name="Snapshots">
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Margin="5" Stretch="UniformToFill" Height="70"/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</ScrollViewer>
</StackPanel>
</Grid>
</UserControl>Our UI is complete and we can move on to our code, open the MainPage.xaml.cs file, we first start declaring two global variable like that:
CaptureSource _captureSource;
ObservableCollection _images = new ObservableCollection(); we define _captureSource to hold the instance of CaptureSource which is used to interact with AUDIO/VIDEO devices. _images variable is used to holds all captured frames from the webcam and will be the item source for the above said ListBox.
for declaring ObservableCollection<T> type you need to have using System.Collections.ObjectModel;
we also have to declare one public property named SelectedSnapshot, which holds the current captured frame from the live webcam feed and used to save image as jpg:
private WriteableBitmap selectedSnapshot;
public WriteableBitmap SelectedSnapshot
{
get { return selectedSnapshot; }
set { selectedSnapshot = value; }
}We then add Loaded event handler in the default constructor, see the code below:
public MainPage()
{
InitializeComponent();
Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
// Get list of the VIDEO Sources and bind
VideoSources.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();
// Get list of the AUDIO Sources and bind
AudioSources.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();
// Select the default devices
if (VideoSources.Items.Count > 0)
VideoSources.SelectedIndex = 0;
if (AudioSources.Items.Count > 0)
AudioSources.SelectedIndex = 0;
// Creating CaptureSource
_captureSource = new CaptureSource();
// Handle CaptureImageAsync Completed event handler
_captureSource.CaptureImageCompleted += (s, ev) =>
{
ProcessImage(ev.Result);
};
// Bind snapshots
Snapshots.ItemsSource = _images;
// Disable the capture button, it'll be enabled when capture source is ready
CaptureWebcam.IsEnabled = false;
SaveImage.IsEnabled = false;
}above method is very simple, which is used to initialize some of our application parts, we first set the item source of AUDIO/VIDEO comboBox, which are filled by getting all the devices available in the user’s machine. I also create a new CaptureSource instance, after that I handled CaptureImageCompleted event handler which is fired after capturing raw image by calling CaptureSource’s CaptureImageAsync() method. Finally I bind the ListBox to captured frames collection by setting it’s ItemSource property to _images.
In the above code you might think of ProcessImage(ev.Result) method, I have this method for processing raw captured frame, the code in that method is simple and does nothing but add the captured frame to _images collection and set the SelectedSnapshot property to the current captured frame.
private void ProcessImage(WriteableBitmap bitmap)
{
_images.Add(bitmap);
SelectedSnapshot = bitmap;
SaveImage.IsEnabled = true;
}Move on to the “Start Camera” button click event, first I check the State property of the CaptureSource instance if it’s not started then I set the AUDIO/VIDEO Device to the CaptureSource instance from the available devices then I declared a variable of type VideoBrush which is used to paint the video content and set it’s source to CaptureSource instance and finally set it to the Fill property of Rectangle which paints the live video feed from the webcam.
To access the AUDIO/VIDEO devices on the user’s machine we need to have permission, we can request the user’s permission by calling the following code:
// Request user permission
if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
{
if (_captureSource.VideoCaptureDevice != null)
{
_captureSource.Start();
StartStopWebcam.Content = "Stop Camera";
CaptureWebcam.IsEnabled = true;
}
}When the above code is executed a dialog window is popup and asking for your permission to access the AUDIO/VIDEO devices, See screenshot below:
By clicking Yes you allowed application to access AUDIO/VIDEO devices, just after having permission we can see the live webcam feed in the center of the UI, Let’s see how can I look?
Ok once we started capturing we can stop it with the same button which stops capturing from the webcam. you noticed that “Capture Image” button is now activated after starting the webcam which takes snapshot from the current frame and displayed it in ListBox below, “Capture Image” button click event has the following code:
// Verify the device is started
if (_captureSource.VideoCaptureDevice != null && _captureSource.State == CaptureState.Started)
{
// Capture the current frame
_captureSource.CaptureImageAsync();
}
}In the code above I just checked the State property of the CaptureSource instance which must be Started if so then I called the CaptureImageAsync() method, which initiates an asynchronous image capture request. After taking snapshot “Save Image” button is activated which is used to save captured raw bitmap in jpg format on the local storage media, there is no built in function to do so that’s why I’m taking advantage of .NET Image Tools which have fine API for working with raw images. I have included the required binaries in the project itself so you don’t have to download it, but you can if you want complete set like documentation and other encoders [PNG, BMP, GIF].
To work with Image Tools we first need to reference the required assemblies which are listed below:
- ICSharpCode.SharpZipLib.Silverlight.dll
- ImageTools.dll
- ImageTools.IO.Jpeg.dll
- ImageTools.Utils.dll
Above assemblies are included in the project within the Lib folder which is available for download see the link below. Ok we now ready to save our webcam snapshots, first we need to have using statements in the top of the code file like following:
using ImageTools; using ImageTools.IO.Jpeg;
In “Save Image” button click event I have following code which actually save the raw image in jpg format:
// Gets the current captured raw bitmap
var rawImage = SelectedSnapshot;
// If image is selected in the Snapshots ListBox then set it as a save target
if (Snapshots.SelectedItem != null)
rawImage = (WriteableBitmap)Snapshots.SelectedItem;
if (rawImage != null)
{
// Init the Save File Dialog
SaveFileDialog saveDialog = new SaveFileDialog();
saveDialog.Filter = "JPG Files (*.jpg, *.jpeg)|*.jpg;*.jpeg|All Files (*.*)|*.*";
saveDialog.DefaultExt = ".jpg";
saveDialog.FilterIndex = 1;
// Show save dialog to the user
if ((bool)saveDialog.ShowDialog())
{
using (Stream stream = saveDialog.OpenFile())
{
// Convert raw captured bitmap to the image that Image Tools understand with the extension method
var image = rawImage.ToImage();
// Declare jpeg encoder
var encoder = new JpegEncoder();
// Set the image quality
encoder.Quality = 90;
// Finally encode raw bitmap and save it as a jpg image
encoder.Encode(image, stream);
// Close the stream
stream.Close();
}
}
}The code above again is very simple and I commented it well so I don’t think to described it for you, if you any problem then discuss it in the comments. I am done here, hope you like it.
Finally, you can download the full source code below:
jQuery UI AutoComplete Widget with ASP.NET MVC
In this post I am showing you how to use jQuery UI Autocomplete widget with ASP.NET MVC. The Autocomplete widget provides suggestions when you type some text into the text field. This is very useful when you provide search box to find data, so lets start using it in Fresh ASP.NET MVC website.
Overview
From the jQuery UI website, Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:
- an Array with local data
- a String, specifying a URL which returns Json formatted data
- a Callback
What you will need?
To use jQuery UI widgets you will need jQuery UI library, you can download the latest version from here. Please make sure that you select the Autocomplete checkbox in the widgets section while downloading.
After unzip, the library folder structure looks something like this:
From here we are interested in CSS and JS Folder. CSS folder contains the theme files [images and stylesheet] which you selected while downloading, in JS folder you will find JavaScript files which are required to work with jQuery UI.
Setting up project
I am assuming that you have Visual Studio 2010 Express or higher installed along with SQL Server 2008 Express or higher. I am using Visual Web Developer 2010 Express and SQL Server 2008 R2 Express on my machine both are freely available from Microsoft. I like Microsoft products very much.
Open Visual Web Developer 2010 Express from start menu and create new ASP.NET MVC 2 Empty Web Application project from the installed templates, you now have a working project.
Now add jQuery UI library to the newly created project.
Add images folder and jquery-ui-1.8.2.custom.css file from the CSS folder to the Content folder in the project then add both JavaScript files from JS folder to the Scripts folder.
Your solution explorer window may look like this:
In this MVC application I’ll use AdventureWorks LT 2008 R2 database to show data in jQuery UI Autocomplete widget. To work with the database I’m also adding ADO.NET Entity Data Model [edmx] file in the Models folder, I am adding only Customer table from the AdventureWorks LT 2008 R2 database.
Lets add our Data Model in the project, right click on the Models folder and select add new item, select ADO.NET Entity Data Model from the list of items in the Add New Item dialog and name it AdventureWorksDB.edmx. Follow the wizard and add connection to the AdventureWorks LT 2008 R2 Database or any other database that you have on your machine and add table that you want to work with, but you have to change some code according what you have selected.
If you done exactly as described then we have our Data Model ready to work in the Models folder.
Now add Controller in the project, just right click on the Controller folder and click Add Controller, name the controller as you want I name it HomeController:
Now we have to add HomeController’s Action method which returns Json formatted data of Customers Object from the AdventureWorks database.
Here is the Action Method which is called by the Autocomplete widget and returns Json formatted data.
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetCustomers(string term)
{
AdventureWorksEntities db = new AdventureWorksEntities();
var customers = from cust in db.Customers.Where(c => c.LastName.StartsWith(term))
select cust.LastName;
customers = customers.Distinct();
return Json(customers, JsonRequestBehavior.AllowGet);
}
}
In the above code for the HomeController there are two Action methods, Index() which is created by default and GetCustomers(string term) which is used to get Json formatted data. In the GetCustomers(string term) you see we passed parameter “term” of string type, which is passed as a Request variable from the Autocomplete widget and is used to get data based on it.
Before working with the Entity Data Model we first need to add a using C# statement in the HomeController to get reference to the Models just like that:
using YOURPROJECTNAME.Models;
Move to the GetCustomers(string term) Action method, I declared a variable db of type AdventureWorksEntities which have all our Data Objects programmed in it by the Entity Framework, I then defined a variable customers and shape the required data by using LINQ to Entities, remove duplicate entries by calling Distinct() Extension method and finally return customers as a Json.
Ok, we now have our Controller ready for the Autocomplete widget, finally we have to add a View for the Index() Action method, to add a view simply right click anywhere in the HomeController’s Index() Action method and click Add View context menu item this is the easiest way to add View. Follow the options as shown in the image below for Add View.
I didn’t add any Master View page to the project yet that’s why I didn’t checked Select master page checkbox, if you have one added already then you can check it.
Visual Web Developer adds Index View as Index.aspx in the Views/Home folder and opened it for editing. In the Index.aspx view page add the following code in the head section which are required to add Autocomplete suggestion feature to the text fields.
<link href="../../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />After adding above references add the following HTML code in the body section which adds a label and text input control which acts as a Autocomplete widget.
<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<label for="customers">Find:</label>Finally add the following javascript code in the head section to bind the Autocomplete widget to the text input field.
<input type="text" id="customers" />
<script type="text/javascript">
$(function () {
$('#customers').autocomplete({
source: '<%= Url.Action("GetCustomers") %>',
minLength: 2
});
});
</script>
We are done here with Autocomplete widget, now build and run the application by pressing F5. If all goes well then you are presented with application running in the default internet browser, to test Autocomplete widget just type two or more letters in the input field and the results will show instantly. see the screenshot below:
I hope you have successfully implement Autocomplete widget as described above. jQuery UI Autocomplete widget has a few options to set as desired, you can have a look on it by going here.
Hope this works!
Welcome to my blog
Happy Coding!
