SharePoint hosted Add-In : Read list data : JSOM

In last post (Step by step guide to create “SharePointHosted Add-In” in SharePoint Online (Office 365)), I created a basic SharePoint hosted Add-In as shown below.

Now, I’ll add logic to this Add-In to read data from a SharePoint list (VendorList) as shown below.

Step 1- Open Default.aspx file and add new div as shown below.

Step 2- Open App.js file. Replace code in js file with code given below.

Changes in App.js file

var Items = null;

'use strict';

var listItems;

var hostweburl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));

var appweburl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));

$(document).ready(function () {

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', ListItems)

});

function ListItems() {

    var context = new SP.ClientContext(appweburl);

    var ContextSite = new SP.AppContextSite(context, hostweburl);

    var web = ContextSite.get_web();

    context.load(web);

    var list = web.get_lists().getByTitle('VendorList');

    var caml = new SP.CamlQuery();

    caml.set_viewXml("<View><Query></Query></View>"); // U can change the query for getting desired result  

    Items = list.getItems(caml);

    context.load(Items);

    context.executeQueryAsync(onSucceededCallback, onFailedCallback);

}

function onSucceededCallback(sender, args) {

    var enumerator = Items.getEnumerator();

    var myText = 'Items in VendorList: <br><br>';

    while (enumerator.moveNext()) {

        var listItem = enumerator.get_current();

        myText += 'Title: ' + listItem.get_item('Title') + '<br>';

        myText += 'Address: ' + listItem.get_item('Address') + '<br><br>';

    }

    myDiv.innerHTML = myText;

}

function onFailedCallback(sender, args) {

    var myText = '<p>The request failed: <br>';

    myText += 'Message: ' + args.get_message() + '<br>';

    myDiv.innerHTML = myText;

}

function getQueryStringParameter(paramToRetrieve) {

    var params = document.URL.split("?")[1].split("&");

    for (var i = 0; i < params.length; i = i + 1) {

        var singleParam = params[i].split("=");

        if (singleParam[0] == paramToRetrieve) return singleParam[1];

    }

}

Step 3 – Deploy your Add-In after all changes.

Step 4- You may get below error as your Add-In don’t have enough permissions.

Step 5- For simplicity we are providing Full Control at Site Collection level. You can also provide only Read access.

Step 6- Now deploy Add-In again and you’ll get below screen.

Step 7- Trust Add-In by clicking ‘Trust It’ button.

Here is the Add-In with data from VendorList

SharePoint Search Query CollapseSpecification

Collapse similar search results using the CollapseSpecification property

The CollapseSpecification property takes a Spec parameter that can contain multiple fields separated either by a comma or a space, which evaluated together specify a set of criteria used for collapsing.

Syntax: CollapseSpecification = Spec

Table 1. Spec parameter fields

Element in parameter	Description
Spec	Subspec(<space>Subspec)*
Subspec	Prop(','Prop)*[':'Dups]
Prop	A valid managed property or an alias of a managed property. Prop is case-insensitive. The managed property must be queryable and either sortable or refineable.
Dups	An integer specifying the number of items to retain. The default value is 1.
	Properties are combined by using the OR operator.
,	Properties are combined by using the AND operator.
*	Indicates more items.
() or []	Indicates optional items.

If the fields in Spec are separated by commas, the fields are combined by using the AND operator. If all of the specified fields are matched, the items are collapsed.

In contrast, if the fields in Spec are separated by spaces, the fields (or Subspecs) are combined by using an expansion that includes both the AND operator and ORoperator. For example, an expression such as Category:3 Product:2 is internally transformed to the following expression (Category AND Product) OR (Category) with a counter for each; hence a maximum of two of the former and three of the latter. Items are collapsed if some of the specified fields are matched.

Ref: https://docs.microsoft.com/en-us/sharepoint/dev/general-development/customizing-search-results-in-sharepoint

Tools for writing and debugging RegEx

·         RegExr (for JavaScript)

·         Perl: YAPE: Regex Explain

·         Regex Coach (engine backed by CL-PPCRE)

·         RegexPal (for JavaScript)

·         Regular Expressions Online Tester

·         Regex Buddy

·         Regex 101 (for PCRE, JavaScript, Python, Golang)

·         Visual RegExp

·         Expresso (for .NET)

·         Rubular (for Ruby)

·         Regular Expression Library (Predefined Regexes for common scenarios)

·         Txt2RE

·         Regex Tester (for JavaScript)

·         Regex Storm (for .NET)

Books

·         Mastering Regular Expressions, the 2nd Edition, and the 3rd edition.

·         Regular Expressions Cheat Sheet

·         Regex Cookbook

·         Teach Yourself Regular Expressions

Free resources

·         Regular Expressions - Everything you should know (PDF Series)

·         Regex Syntax Summary

·         How Regexes Work