Basics for SharePoint 2013 app development
The biggest innovation in SharePoint 2013 is the app-architecture. With this innovation it is possible to install applications (apps) on a SharePoint. This applications can be developed by yourself or you can buy them in the SharePoint Store. They are totally detached of the SharePoint and got their own area. They can contain own lists, have own sites with custom code and they have their own interfaces. But it is possible to communicate with the SharePoint.
After naming your app a new masks opens. This mask is asking for a development enviroment and an host type. In the enviroment field enter your development SharePoint. In the host field you can choose between SharePoint-hosted and Provider-hosted. The difference is that the Provider-hosted apps are running in an Azure server. This got his own pros and contras, but for the beginning it is easier to start with a SharePoint-hosted solution, because the authentification is easier. After filling these two fields you can click on 'Finish' and Visual Studio beginns to create the neccessary files. This files are directly ready to use. The created example code creates a simple output, which says hello to the current user.
For this output are two files interesting. One file is Default.aspx, which you can find under 'Pages'. It is a ASP.Net file and will be called by the browser when the app is started. This file is just for the interface and not for any logical operations. Of course some of you would say it is possible, because you can add HTML and JavaScript to ASPX pages. And that is true, but it is not the best practise. For logical operations you can make use of the JavaScript files that you bind into your page.
The first lines in the file are making sure the file is compatible to SharePoint. After that comes an area to bind style and code files (CSS and JavaScript). If you need a reference to a file you need to add it here. The next area is the titlearea and right after this area comes the content area. Into the content area you can add your interface however you want it. The example code looks like this:
This code creates a div container with some text in it. In the App.js file this text will be changed. You can find the App.js file in the 'Scripts' category. In this file you can see how you can use the Client Side Object Model (CSOM) for JavaScript (some people call it JSOM). The code builds a query for the current user and starts it. After that the result will be displayed.
This function makes use of JavaScript and jQuery. It changes the text in the paragraph called message. If you start the app like it is it will look like this:
Apps in SharePoint 2013 are for a persmission concept in a seperated area. This seperation between SharePoint and apps generates Cross Site Scripting errors if you want do access SharePoint data from your app. So no injection is possible and no unallowed access to your SharePoint data is possible. But in some cases is is neccessary to access to the SharePoint. For this you need to ask for the permissions. You can set up which permission you need in the AppManifest.xml file. In the 'Permissions' tab you can add requests for whatever you need. On SharePoint-hosted apps you can take the SP.RequestExecutor.js library to access the requested data. How this works will be shown in a later post.
My first app
To develop an app you need Visual Studio 2012 or above and a development SharePoint. To begin start Visual Studio as administrator and click 'New project...'. A mask opens where you can choose a template. Go to 'Templates' → 'Visual C#' → 'Office/SharePoint' → 'Apps' and select 'App for SharePoint'.For this output are two files interesting. One file is Default.aspx, which you can find under 'Pages'. It is a ASP.Net file and will be called by the browser when the app is started. This file is just for the interface and not for any logical operations. Of course some of you would say it is possible, because you can add HTML and JavaScript to ASPX pages. And that is true, but it is not the best practise. For logical operations you can make use of the JavaScript files that you bind into your page.
The first lines in the file are making sure the file is compatible to SharePoint. After that comes an area to bind style and code files (CSS and JavaScript). If you need a reference to a file you need to add it here. The next area is the titlearea and right after this area comes the content area. Into the content area you can add your interface however you want it. The example code looks like this:
1 2 3 4 5 6 7 | <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> <div> <p id="message"> initializing... </p> </div> </asp:Content> |
This code creates a div container with some text in it. In the App.js file this text will be changed. You can find the App.js file in the 'Scripts' category. In this file you can see how you can use the Client Side Object Model (CSOM) for JavaScript (some people call it JSOM). The code builds a query for the current user and starts it. After that the result will be displayed.
1 2 3 | function onGetUserNameSuccess() { $('#message').text('Hello ' + user.get_title()); } |
This function makes use of JavaScript and jQuery. It changes the text in the paragraph called message. If you start the app like it is it will look like this:
Things you should know
If you want to sell an app in the store or if you want to use it in your company enviroment you should make sure it looks good. To complete this goal there are some arrangements. One important thing is the icon of the app. It will be listed in the appchoise (under 'Add an app') and because of this it should be atractive. To change the picture go to 'Images' and replace the file called 'AppIcon.png'. Important is that the icon got to be quadratic and the resolution has to be 96x96 pixel. On the same place where the icon will be displayed the name and description of your app will be displayed. You can change them in the AppManifest.xml file. An additional measure for a nice feeling is the presentation of the feature. Every SharePoint application is represented by a feature and features are listed in the SharePoint settings. In the settings you can activate or deactivate features. That mean applications are aviable or not. To let every user know what is behind your feature you should give it a nice name and description.Apps in SharePoint 2013 are for a persmission concept in a seperated area. This seperation between SharePoint and apps generates Cross Site Scripting errors if you want do access SharePoint data from your app. So no injection is possible and no unallowed access to your SharePoint data is possible. But in some cases is is neccessary to access to the SharePoint. For this you need to ask for the permissions. You can set up which permission you need in the AppManifest.xml file. In the 'Permissions' tab you can add requests for whatever you need. On SharePoint-hosted apps you can take the SP.RequestExecutor.js library to access the requested data. How this works will be shown in a later post.
Comments
Post a Comment