Tuesday, June 2, 2015

SharePoint 2013 Online App Development using 'Napa’

SharePoint 2013 Online App Development
Table of Contents
·         Apps
·         Developer Site Settings
·         ‘Napa’ Office 365 Development Tools
·         Using Napa Office 365 Development Tools
· 
Apps
Apps are new type of solution that helps to extend Microsoft Office 2013 product features to fulfill business demands. The new Office solution type Apps for Office are built on web technologies like HTML, CSS, JavaScript, REST, etc. The Office Apps solutions will be supported in Microsoft Excel Web App, Microsoft Outlook 2013, Microsoft Outlook Web App, Microsoft Project Professional 2013, Microsoft Word 2013, Microsoft Excel 2013, Microsoft SharePoint 2013 and Microsoft Exchange 2013.
An App for Office is essentially a webpage that is hosted inside an Office client/web application. You can use Apps to extend the functionality of a document, email message, meeting request, or appointment. Apps can run in multiple environments and clients, including Office desktop clients, Office Web Apps, mobile browsers, and also on-premises and in the cloud.
The following is the SharePoint Administration Center control for managing Apps in Microsoft Office 365 – SharePoint 2013 Online.
http://www.codeproject.com/KB/sharepoint/690015/image001.png
Apps Building Blocks
The basic components of an App for Office are XML manifest file and webpage. The manifest defines configuration, settings and points to the webpage that implements the App UI and custom business logic.
App Types and Extensibility
App is classified as four main categories and each category of app will support its corresponding Office products.
·         App for SharePoint
·         Task pane App for Office
·         Content App for Excel
·         Mail App for Office
http://www.codeproject.com/KB/sharepoint/690015/image002.png
App for SharePoint
SharePoint 2013 presents a Cloud App Model that facilitates you to create apps. Apps for SharePoint are self-contained sections of functionalities using standards-based technologies such as HTML5, JavaScript, and OAuth that extend the capabilities of a SharePoint website.
Apps have a light imprint because they don't actually install on the host server, and that means they don't overload a SharePoint site with unnecessary API calls.
Cloud App Model offers users to discover and download apps from the SharePoint Store or from their organization's private App Catalog and install them on their SharePoint sites.
http://www.codeproject.com/KB/sharepoint/690015/image003.png
‘Napa’ Office 365 Development Tools
For creating Apps for Microsoft Office 2013, as we all know now Apps contain manifest XML and webpage file. To do this, we can use any tool which can help us to save the file in text format. But to simplify the development process, Microsoft has given full support in Visual Studio 2012 by using its project templates, development environment, and debugging tools. Apart from Visual Studio 2012, this time Microsoft has come up with new web based development tool called "Napa" Office 365 Development Tools.
http://www.codeproject.com/KB/sharepoint/690015/image004.png
Here we’re going to focus on "Napa" Office 365 Development Tools in detail. We will see how to create, manage and deployments are supported in the Napa Office 365 Development Tools.
To get started with Apps development for the Office 365 – SharePoint 2013, login to the Office 365. After successful login, the next page will be Office 365 admin center; in the same page you can find the developer site navigation where you get Napa development tools.
Another option is navigate to the SharePoint 2013 administration center and under the site collection list, you can find the developer site collection URL.
The following screen capture image will help you to navigate to the SharePoint Administrator center.
http://www.codeproject.com/KB/sharepoint/690015/image005.png
Once you navigated to the SharePoint Administrator Center, you see the developer site collection. Login to the developer site collection and you can see the navigation for the Napa tool download.
http://www.codeproject.com/KB/sharepoint/690015/image006.png
The following is the navigation for the Napa tool download available in the home page of the developer site.
http://www.codeproject.com/KB/sharepoint/690015/image007.png
Then you will be navigated to the Office apps store download site of the download.
http://www.codeproject.com/KB/sharepoint/690015/image008.png
Following is the step by step process of installing the Napa development tool to your environment.
http://www.codeproject.com/KB/sharepoint/690015/image009.png
This will be added to the trusted list of service in the browser (preferably Microsoft Internet Explorer 9 or later version)
http://www.codeproject.com/KB/sharepoint/690015/image010.png
http://www.codeproject.com/KB/sharepoint/690015/image011.png
License of the office app will be managed under the login in which we have downloaded.
http://www.codeproject.com/KB/sharepoint/690015/image012.png
Image Title Name
App Part
What is an App Part? It is a type of Web Part that is represented by the ClientWebPart class. In a way by which an App for SharePoint 2013 can be appeared is through an App part. App Part, now in some of your minds will raise a question - is this replacement for WebPart? If not, what is the difference over WebPart and does it comes with any advantages.
Here it is App Part, not replacement for WebPart. An App Part is essentially a wrapper for an IFrame that would host a page of the App. In addition to acting as a Wrapper, like a WebPart, an App part can have custom properties that users can set in a tool part.
·         ClientWebPart.aspx - In a SharePoint Hosted App, this will act as your App Part Interface.
·         Default.aspx - is the start page for the App. This will provide the full page App experience, which will be the landing page after the deployment of the App.
·         App.css – This will contain the default styling and based on the requirement, we can use the same CSS file to add any custom styles.
·         App.js – In this JavaScript file, it contains the required JavaScript and has few lines of pre-generated code to start your SharePoint App development.
Using ‘Napa’ Office 365 Development Tools
Once after installing the Napa development tool in your development environment, go to the developer site and under the site content section, you find the installed apps.
http://www.codeproject.com/KB/sharepoint/690015/image013.png
We can manage permission levels and license management for Napa app as well as all apps installed in the site.
Now let’s take a look at a simple example for how to create an app to show from Office 365 – SharePoint 2013 pages. Let’s start exploring the App development using Napa and in the later part of this chapter, we will see more logical examples.
Click on the Napa and the following page will appear for selecting the name for the app.
http://www.codeproject.com/KB/sharepoint/690015/image014.png
The following is the default project generated using Napa, which is powered by Visual Studio 2012.
http://www.codeproject.com/KB/sharepoint/690015/image015.png
By default, App solution is generated with four folders and each folder contains related app files. First the content folder which contains the App.css file, Images folder contains the Appicon.png file, Pages folder contains theClientWebPart.aspx and Default.aspx and Scripts folder contains the Apps.js file.
Apart from the default files, as per the development needs, we can add new files to our App development. Right click on the folder under which you need to add file. The support files to add to our existing solution are JavaScript file, Style Sheet and SharePoint Web page.
http://www.codeproject.com/KB/sharepoint/690015/image016.png
App properties can be defined in the properties windows, where you can define the name, permission, access and remote endpoints.
http://www.codeproject.com/KB/sharepoint/690015/image017.png


Google+ Followers