Create apps for Office 365 Developer Site
Setting up a SharePoint development environment has always been a non-trivial process. To simplify it, you can use the Office 365 Developer Site, which is an ideal developer environment, to master SharePoint, reduce setup time, and start building, debugging, testing, and deploying your applications without having to install additional software.
In SharePoint 2013, a new decision model was introduced. Along with server-side (Full-Trusted) solutions known from version 2007 and isolated (Partial-Trust, Sandboxed) solutions in version 2010, in 2013, taking into account the development of the cloud paradigm, the type of solution that was simply called “Apps for SharePoint” (Apps for SharePoint). Managed farm solutions are hosted inside SharePoint (w3wp.exe), isolated solutions are inside the sandbox workflow (SPUCWorkerProcess.exe). The Application Code for SharePoint is never executed inside the SharePoint host environment, which increases the stability of the farm and makes it easier to update the application. A new way of packaging and hosting implies that the code can “live” outside SharePoint and run in the browser at the client or on a remote website. Access control to SharePoint is carried out using the OAuth protocol, and the interaction is based on the enhanced CSOM API in version 2013. Server solutions can be deployed at the level of any SharePoint area (Farm, Web App, Site Collection, Sites), isolated solutions - at the site of the site collection. Applications are deployed in Site Scope (in this case, it runs across the entire SharePoint site) and Tenancy Scope (in this case, the area is the special App Catalog site). The application consists of two main components: the defining part, or the manifest, and the web part containing the business logic and user interface. If an application is defined inside SharePoint, it is called SharePoint-hosted. It can be accessed and used by SharePoint lists, libraries, and other components. Other applications may have SharePoint components, but most of their code belongs to other infrastructure, such as an external web server or Cloud. They are called Provider-hosted. Their subspecies are Auto-hosted Apps, when the infrastructure, including the website and database, is automatically created in Windows Azure.
Applications for SharePoint can be written in a variety of ways, but they are all based on common web standards such as HTML, CSS, and JavaScript. The interaction of client-side code running in the browser with the server part is also provided using standard web protocols such as JSON, REST, OData, OAuth. On the server side, technology can be used according to preferences: ASP.NET or LAMP stack - in general, this is indifferent to a SharePoint application. By the way, in VS2013, along with ASP.NET Web Form, MVC5 is supported as an application template for SharePoint. Roughly speaking, if you can develop web applications, you get the opportunity to write under SharePoint. The layout offers considerable flexibility in terms of placement: the code can be hosted on-premise SharePoint, in client office applications, and also use external hosting, including Azure. Client code can be executed both in the browser and in other containers: MS Office applications or SharePoint web parts.
The easiest way to start developing for SharePoint is the Office365 Developer Site. At its disposal, the developer gets an isolated domain for applications that are supposed to be hosted in SharePoint, already configured with OAuth, which allows you to use Windows Azure ACS for authentication and authorization. You can develop using the Office Developer Tools for Visual Studio 2013 on your computer, or, if there is nothing at all except a browser, using the Office 365 "Napa" development tool directly on this (pre-configured) site.
First you need to register on this site. When the SharePoint 2013 Technical Preview was only released in July 2012, it was free to celebrate. With the release of Office Developer Tools for Visual Studio 2012, the freebie is over - the annual subscription costs $ 99. In addition, options are possible: 1) 30-day free trial, 2) Office 365 subscription for medium-sized businesses and enterprises ( E1 or E3 plan ), 3) Visual Studio Ultimate and Visual Studio Premium with MSDN subscriptions give an annual right to use. I will demonstrate the example of the third option.
We go to the MSDN subscription control center and click on the Activate Office 365 Developer Subscription Benefit if it is not yet activated. The name of the organization will be asked and a new Microsoft Account will be created in addition to the one under which you are logged in. For example, for example, if the LiveID for Office365 Developer Subscription was alexeyvs@hotmail.com and I entered an organization named Microsoft Russia, then, by default, the new account will be alexeyvs@MicrosoftRussia.onmicrosoft.com and it will be necessary to log in to it later portal.microsoftonline.com . The SharePoint Online public website is initially hosted in the domain <company name> .public.sharepoint.com, it cannot be changed, but you can later add your own domain.
At the end of the registration process, we get to the Office 365 Admin Center, where you can immediately click on the Build App link and select a site template.
Pic1
')
The template gallery is initially empty; you can fill it up by uploading the prepared templates as stp files to the site.
It should be noted that the MSDN subscription gives the right to single-user access only. If you want to test the site in a multi-user environment, click on the users and groups link in the left pane and add new users, indicating their license type and role on the site.
The starting tool for creating applications for SharePoint in the Cloud is the Napa development tool. In addition to simplicity, we can recognize the consistency of its advantages - we do not need anything other than a browser to start working with it. From the browser, the script is executed for execution, and we get an immediate result. Restrictions - support only client code (HTML5 + JavaScript). Of course, Napa does not in any way cancel out the existing models for extending Office and SharePoint functionality, including VBA, COM, VSTO, and solutions for SharePoint. The code created in Napa can then be opened in Visual Studio and continue working with it, increasing its functionality.
Go to the site content and click add an app. From a SharePoint point of view, document libraries, custom lists, tasks are all sample applications. My simplest application will read the existing list and display it in the user interface. But first you should add “Napa” to our newly created Office 365 site, because I do not see it in the installed applications or in the Apps you can add list. But I notice in the left pane the bottom of the SharePoint Store. The SharePoint application store is not yet as famous as the Windows Store or the Windows Phone Store, but its idea is the same.
Pic2
In the top of popular free applications is Napa, which I install to my site, while answering the standard questions in such cases, such as how much I trust this application, who I want to give access to it, etc.
I click on the newly formed tile “Napa” Office 365 Development Tools, select the application type for SharePoint, enter the project name
Pic.3
The project creates and launches an editor displaying the automatically generated Default.aspx, to which I will add an incredibly “complex” functionality to read the existing SharePoint list. By the way, the list, we still do not exist. Flaw. Return to the site content and create a list of Issues, which will keep track of shortcomings. Click on New Item or on Edit this List or create a Custom View in the form of a label and fill the list no matter what the main thing is to display.
Although our code will be very simple, it will use the Knockout framework. The Knockout.js library allows you to extend the HTML syntax, eliminating the need to write code to implement the model-view-controller bundle. Add it to the project in order to illustrate that we can flexibly create an application without being tied to a pre-defined framework (could use Angular, for example). Click on the Toggle Actions button opposite Scripts and select Upload:
Pic.4
Add a link to Knockout in Default.aspx:
Slightly modify the HTML Layout (Default.aspx) to display the contents of the list you want to read:
Script 1
And in JavaScript code (Scripts -> App.js), we insert logic to read the Sharepoint list and bind this information to the HTML added on Script 1:
Pic.5
Actually, everything. We just need to give the application permissions to read the SharePoint list:
Pic.6
and run:
Fig.7
The application is packaged and hosted on the O365 Dev Site. We say that we trust, after which it starts, deducing, as promised, the previously filled list of SharePoint.
Fig.8
Summarizing, it should be emphasized once again that “Napa” was created as a starting development tool for SharePoint. It can be considered as a lightweight companion of Visual Studio, helping to get comfortable with the Cloud App Model to create applications for Office and SharePoint with minimal effort. It only supports client code development (HTML5 and JavaScript). If the application needs a server code, debugger, control of the source code, maintenance of work items, profiling, and other ALM tools, "Napa", naturally, will not work. In this case, use Visual Studio. However, it is possible to grow from simple to complex smoothly and gradually. Some basic simple things can be done with the help of Napa tools, after which we develop the groundwork for VS, improving the design of web pages, adding Sharepoint content (lists, workflow, ...), user actions for expanding the UI, etc. Click the button on the toolbar with the familiar stylized Mobius tape (see Figure 7 below), after which a copy of the project is downloaded and opened in the local Visual Studio.
Fig.9
In SharePoint 2013, a new decision model was introduced. Along with server-side (Full-Trusted) solutions known from version 2007 and isolated (Partial-Trust, Sandboxed) solutions in version 2010, in 2013, taking into account the development of the cloud paradigm, the type of solution that was simply called “Apps for SharePoint” (Apps for SharePoint). Managed farm solutions are hosted inside SharePoint (w3wp.exe), isolated solutions are inside the sandbox workflow (SPUCWorkerProcess.exe). The Application Code for SharePoint is never executed inside the SharePoint host environment, which increases the stability of the farm and makes it easier to update the application. A new way of packaging and hosting implies that the code can “live” outside SharePoint and run in the browser at the client or on a remote website. Access control to SharePoint is carried out using the OAuth protocol, and the interaction is based on the enhanced CSOM API in version 2013. Server solutions can be deployed at the level of any SharePoint area (Farm, Web App, Site Collection, Sites), isolated solutions - at the site of the site collection. Applications are deployed in Site Scope (in this case, it runs across the entire SharePoint site) and Tenancy Scope (in this case, the area is the special App Catalog site). The application consists of two main components: the defining part, or the manifest, and the web part containing the business logic and user interface. If an application is defined inside SharePoint, it is called SharePoint-hosted. It can be accessed and used by SharePoint lists, libraries, and other components. Other applications may have SharePoint components, but most of their code belongs to other infrastructure, such as an external web server or Cloud. They are called Provider-hosted. Their subspecies are Auto-hosted Apps, when the infrastructure, including the website and database, is automatically created in Windows Azure.
Applications for SharePoint can be written in a variety of ways, but they are all based on common web standards such as HTML, CSS, and JavaScript. The interaction of client-side code running in the browser with the server part is also provided using standard web protocols such as JSON, REST, OData, OAuth. On the server side, technology can be used according to preferences: ASP.NET or LAMP stack - in general, this is indifferent to a SharePoint application. By the way, in VS2013, along with ASP.NET Web Form, MVC5 is supported as an application template for SharePoint. Roughly speaking, if you can develop web applications, you get the opportunity to write under SharePoint. The layout offers considerable flexibility in terms of placement: the code can be hosted on-premise SharePoint, in client office applications, and also use external hosting, including Azure. Client code can be executed both in the browser and in other containers: MS Office applications or SharePoint web parts.
The easiest way to start developing for SharePoint is the Office365 Developer Site. At its disposal, the developer gets an isolated domain for applications that are supposed to be hosted in SharePoint, already configured with OAuth, which allows you to use Windows Azure ACS for authentication and authorization. You can develop using the Office Developer Tools for Visual Studio 2013 on your computer, or, if there is nothing at all except a browser, using the Office 365 "Napa" development tool directly on this (pre-configured) site.
First you need to register on this site. When the SharePoint 2013 Technical Preview was only released in July 2012, it was free to celebrate. With the release of Office Developer Tools for Visual Studio 2012, the freebie is over - the annual subscription costs $ 99. In addition, options are possible: 1) 30-day free trial, 2) Office 365 subscription for medium-sized businesses and enterprises ( E1 or E3 plan ), 3) Visual Studio Ultimate and Visual Studio Premium with MSDN subscriptions give an annual right to use. I will demonstrate the example of the third option.
We go to the MSDN subscription control center and click on the Activate Office 365 Developer Subscription Benefit if it is not yet activated. The name of the organization will be asked and a new Microsoft Account will be created in addition to the one under which you are logged in. For example, for example, if the LiveID for Office365 Developer Subscription was alexeyvs@hotmail.com and I entered an organization named Microsoft Russia, then, by default, the new account will be alexeyvs@MicrosoftRussia.onmicrosoft.com and it will be necessary to log in to it later portal.microsoftonline.com . The SharePoint Online public website is initially hosted in the domain <company name> .public.sharepoint.com, it cannot be changed, but you can later add your own domain.
At the end of the registration process, we get to the Office 365 Admin Center, where you can immediately click on the Build App link and select a site template.
Pic1
')
The template gallery is initially empty; you can fill it up by uploading the prepared templates as stp files to the site.
It should be noted that the MSDN subscription gives the right to single-user access only. If you want to test the site in a multi-user environment, click on the users and groups link in the left pane and add new users, indicating their license type and role on the site.
The starting tool for creating applications for SharePoint in the Cloud is the Napa development tool. In addition to simplicity, we can recognize the consistency of its advantages - we do not need anything other than a browser to start working with it. From the browser, the script is executed for execution, and we get an immediate result. Restrictions - support only client code (HTML5 + JavaScript). Of course, Napa does not in any way cancel out the existing models for extending Office and SharePoint functionality, including VBA, COM, VSTO, and solutions for SharePoint. The code created in Napa can then be opened in Visual Studio and continue working with it, increasing its functionality.
Go to the site content and click add an app. From a SharePoint point of view, document libraries, custom lists, tasks are all sample applications. My simplest application will read the existing list and display it in the user interface. But first you should add “Napa” to our newly created Office 365 site, because I do not see it in the installed applications or in the Apps you can add list. But I notice in the left pane the bottom of the SharePoint Store. The SharePoint application store is not yet as famous as the Windows Store or the Windows Phone Store, but its idea is the same.
Pic2
In the top of popular free applications is Napa, which I install to my site, while answering the standard questions in such cases, such as how much I trust this application, who I want to give access to it, etc.
I click on the newly formed tile “Napa” Office 365 Development Tools, select the application type for SharePoint, enter the project name
Pic.3
The project creates and launches an editor displaying the automatically generated Default.aspx, to which I will add an incredibly “complex” functionality to read the existing SharePoint list. By the way, the list, we still do not exist. Flaw. Return to the site content and create a list of Issues, which will keep track of shortcomings. Click on New Item or on Edit this List or create a Custom View in the form of a label and fill the list no matter what the main thing is to display.
Although our code will be very simple, it will use the Knockout framework. The Knockout.js library allows you to extend the HTML syntax, eliminating the need to write code to implement the model-view-controller bundle. Add it to the project in order to illustrate that we can flexibly create an application without being tied to a pre-defined framework (could use Angular, for example). Click on the Toggle Actions button opposite Scripts and select Upload:
Pic.4
Add a link to Knockout in Default.aspx:
Slightly modify the HTML Layout (Default.aspx) to display the contents of the list you want to read:
<div id="main-content"> <div> <p id="message" data-bind="text: greeting"></p> </div> <table data-bind="visible: showTable"> <thead> <tr> <td>Id</td> <td>Title</td> </tr> </thead> <tbody data-bind="foreach: listItems"> <tr> <td data-bind="text: id"></td> <td data-bind="text: title"></td> </tr> </tbody> </table> </div> Script 1
And in JavaScript code (Scripts -> App.js), we insert logic to read the Sharepoint list and bind this information to the HTML added on Script 1:
Pic.5
Actually, everything. We just need to give the application permissions to read the SharePoint list:
Pic.6
and run:
Fig.7
The application is packaged and hosted on the O365 Dev Site. We say that we trust, after which it starts, deducing, as promised, the previously filled list of SharePoint.
Fig.8
Summarizing, it should be emphasized once again that “Napa” was created as a starting development tool for SharePoint. It can be considered as a lightweight companion of Visual Studio, helping to get comfortable with the Cloud App Model to create applications for Office and SharePoint with minimal effort. It only supports client code development (HTML5 and JavaScript). If the application needs a server code, debugger, control of the source code, maintenance of work items, profiling, and other ALM tools, "Napa", naturally, will not work. In this case, use Visual Studio. However, it is possible to grow from simple to complex smoothly and gradually. Some basic simple things can be done with the help of Napa tools, after which we develop the groundwork for VS, improving the design of web pages, adding Sharepoint content (lists, workflow, ...), user actions for expanding the UI, etc. Click the button on the toolbar with the familiar stylized Mobius tape (see Figure 7 below), after which a copy of the project is downloaded and opened in the local Visual Studio.
Fig.9
Source: https://habr.com/ru/post/218347/
All Articles