List Operations on Sharepoint Apps: using ECMAScript

Below content will help to guide you on below things:

1. How to get the host web url? 
2. How to check whether the list exists or not? 
3. How to create a list? 
4. How to create fields? 
5. How to add Items into the list? 
6. How to Read items from the list?

Just replace the below code with your "app.js" file on office365(Napa tool) and see the magic.  Please give the required permission levels to do CRUD operations on the hosted site like read/write permissions otherwise get access denied error.

Check whether the list exists or not using ECMAScript

In SharePoint 2013 when you create any SharePoint Hosted App it will create separate web for the app you created. You can find it easily by verifying the URL at the browser.
1) SPHostUrl 2) SPAppWebUrl

Get Host Web Url in SharePoint 2013/Office365 apps using JSOM

Get HostWeb URL through JavaScript object model:

Just do copy/paste the below code and execute it.

Note: The below shared code is 100% verified/executed.

Please reach the below post URL to get the hostweb url through REST service

http://sharepointquicksolutions.blogspot.com/2016/12/get-sharepoint-host-web-url-using-rest.html 


Appmanifest.xml:
Set read level permisisons to the web

Default.aspx:

<p id="getHostWebURL"> </p>

App.js

'use strict';
var hostweburl, appweburl;
var website;

$(document).ready(function () {
    appweburl = window.location.protocol + "//" + window.location.host + _spPageContextInfo.webServerRelativeUrl;
    hostweburl = _spPageContextInfo.siteAbsoluteUrl;

    //hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    //appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
    var scriptbase = hostweburl + "/_layouts/15/";

    $.getScript(scriptbase + "SP.Runtime.js",
        function () {
            $.getScript(scriptbase + "SP.js", retrieveListItems);
        }
    );
});

// Function to retrieve a query string value.
// For production purposes you may want to use
// a library to handle the query string.
function getQueryStringParameter(paramToRetrieve) {
    var params =
        document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

function retrieveListItems() {
    var context = new SP.ClientContext(appweburl);
    var appContextSite = new SP.AppContextSite(context, hostweburl);
    website = appContextSite.get_web();
    context.load(website);
    context.executeQueryAsync(onGetWebSuccess, onGetWebFail);

    //the remaining code is omitted for clarity  
}

function onGetWebSuccess() {
    alert("calling" + website.get_title());
    $('#getHostWebURL').text("The title of the host web of this app is " + website.get_title());
}

function onGetWebFail(sender, args) {
    alert('Failed to get lists. Error:' + args.get_message());
}

How to: Create fields in sharepoint list using ECMAScript

By using below code we can create fields of different types using ECMAScript:

function createFields()
{
   currentcontext = new SP.ClientContext.get_current();
   web = clientContext.get_web();
   this.list = web.get_lists().getByTitle(‘ListName’);  
 //Add new fields to the list

//Single line of text Field
this.newColumn = oList.get_fields().addFieldAsXml("", true,
    SP.AddFieldOptions.defaultValue);
 
//Multi line of text Field
this.newColumn = oList.get_fields().addFieldAsXml("", true,
    SP.AddFieldOptions.defaultValue);
 
//Boolean Field
this.newColumn = oList.get_fields().addFieldAsXml("", true,
    SP.AddFieldOptions.defaultValue);

//Number Field
this.newColumn = oList.get_fields().addFieldAsXml("", true,
    SP.AddFieldOptions.defaultValue);

//DateTime Field
this.newColumn = oList.get_fields().addFieldAsXml("", true,
  SP.AddFieldOptions.defaultValue);

//People Picker Field
this.newColumn = oList.get_fields().addFieldAsXml("", true,
  SP.AddFieldOptions.defaultValue);

//Choice field(dropdown)
 this.newColumn= oList.get_fields().addFieldAsXml("ChoiceAChoiceAChoiceBChoiceCChoiceD", true, 
  SP.AddFieldOptions.defaultValue);
 
 currentcontext.load(this.newfield);
 currentcontext.executeQueryAsync(Function.createDelegate(this, this.onListCreateSuccess), Function.createDelegate(this, this.onQueryFailed));
}

function onListCreateSuccess(sender, args) {alert('sucess');
    alert("Field Name: " + this.newfield.get_title());
}
 
function onQueryFailed(sender, args) {
 alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
}

Note: SP.Field.typeAsString Property is used to Gets or sets a value that specifies the type of the field.[From Msdn:http://msdn.microsoft.com/en-us/library/ee553500.aspx]

Create a list in different ways.

Creating lists using all object models:

Creating a custom list is a common requirement for each SharePoint Projects. So, we need to know about how to create. Here I am sharing most of the ways how to create a custom lists in SharePoint like using SharePoint Object model, Managed .Net Client Object and ECMA Script object model. Below, I am sharing how to create lists in different scenarios using the above mentioned object models.

Client Object Model:SharePoint 2010

The Client Object Model is a new object model introduced in SharePoint 2010 which is aimed at making things easier for the developer when developing client-side applications for SharePoint 2010. Client Object Model can run on the client machines (Where SharePoint is not installed) and communicate with the SharePoint server remotely.

In my previous post, i already shared all types of client object model examples.

All Client Object model examples

If you want to know/learn about client object model you can get good knowledge on it easily by surfing. But you can’t get the experience on it until unless by doing it practically. It’s my feeling, So I don’t want to share my knowledge, I just want to share my experience to all my SharePoint guys. 

So, here is my practically experience on 3 client object model.

1. https://sites.google.com/site/sasivalipireddy/clientobjectmodel/SharePoint2010_ECMAScript_Examples.rar
2. https://sites.google.com/site/sasivalipireddy/clientobjectmodel/SharePoint2010_Manged_ClientOM_Examples.zip
3. https://sites.google.com/site/sasivalipireddy/clientobjectmodel/SharePoint2010_Silverlight_Examples.zip