Getting Started With O365 - SharePoint-Hosted Add-Ins Using JSOM

Introduction

In this article, we will learn how to get a particular group's user properties from the group's basic SharePoint-hosted SharePoint add-in, using Napa Office 365 development tools. Sharepoint basic operations are used by JavaScript object model here. If there are any changes , post your comments here.

Develop the project, using the method given below in the NAPA tool.

• In your developer site, open Napa Office 365 Development Tools and then choose Add New Project.
• Choose the app for SharePoint template, name the project, create site and then choose the Create button.
• Replace APP.js with the source code given below.
• Publish your app.

Prerequisite

• The important steps to do before creating the app are given below.
• Specify the permissions that your app needs, as shown.
• Choose the Properties button at the bottom of the page.
• In the Properties Window, choose Permissions.
• In the Content category, set the Write permissions for the Tenant scope.
• In the Social category, set the Read permissions for the User Profiles scope.
• Close the Properties Window.

Basic and important things, which we want to know are given below.,

Creating, updating and deleting lists through Client Object Model works similarly to Server Object Model, using .NET Framework(CSOM,SSOM), .

The operation does not complete until and unless, you call the executeQueryAsync(succeededCallback, failedCallback) function.

SharePoint 2013 introduces a Napa tool service that is comparable to the existing SharePoint Client Object Models.

With Napa tool, we can perform Create, Read, Update and Delete (CRUD) operations from their apps for SharePoint.

By following this article, you can learn how to create a simple SharePoint-hosted SharePoint add-in, using Napa. The add-in that you’ll create includes the controls and code for managing the lists and list items.

Choose the kind of add-in which you want to create, name the project and then choose the Create button.

Napa is a tool, which you can use to create SharePoint-hosted SharePoint add-in.

We can't create a PHA (Provider Hosted App) using Napa tool.

Click Create button.

Default .aspx shows the screen, as shown above.

You can add more .js files and add the code to it instead of to the existing file.

Change your code, based on your requirement.

Default ASPX create button needs to be used to start this event.

Change the APP.js file with the code given below,

Click settings page to give the permission to this app.

Now, publish your app.

Choose the Click here to launch your add-in in a new Window link.

Click Trust it option to deploy your app. Sometimes your login popup Window will come and ask your credentials.

Enter your credentials and click OK.

List has been deleted successfully.

Here, if you want to delete a list, call the update();function in your code.

Default ASPX page code 

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div id="starter"> <input type="text" value="List name here" id="ListOperations" /><button id="createlistbutton">ListOperations</button>
        <p> Lists </div>
</asp:Content>

Source code 

'use strict';
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var web = context.get_web();
var lists = web.get_lists();
var listItemCollection; // This variable is used later when you add list items.
(function() {
        // This code runs when the DOM is ready and creates a context object which is
        // needed to use the SharePoint object model.
        $(document).ready(function() {
            $("#createlistbutton").click(function(event) {
                getuseremail();
                event.preventDefault();
            });
        });

        function getuseremail() {
            var collGroup = context.get_web().get_siteGroups();
            var oGroup = collGroup.getById(7);
            this.collUser = oGroup.get_users();
            context.load(collUser, 'Include(Title, LoginName, Email)');
            context.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
        }

        function onQuerySucceeded() {
            var userInfo = '';
            var userEnumerator = collUser.getEnumerator();
            while (userEnumerator.moveNext()) {
                var oUser = userEnumerator.get_current();
                this.userInfo += '\nUser: ' + oUser.get_title() + '\nEmail: ' + oUser.get_email() + '\vLogin Name: ' + oUser.get_loginName();
            }
            alert(userInfo);
        }

        function onQueryFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }

Once the code has been executed, go back to SharePoint site and check if the list operations executed successfully or not.

Thanks for reading the article.