O365, SPO, SP 2016, SP 2013: CSOM, JSOM – Custom Field Creation – Field Type

While creating a field, whether you are using CAML, server-side object mode, or one of the client-side object models, you typically specify the following attributes:

  • The ID of the fied, which is a GUID
  • The Name, which is the internal name of the field
  • The StaticName, which is the static name of the field
  • The DisplayName, which is display name of the field
  • The Type attribute which indicates the data type of the field

Below is the code for creating custom field using JSOM:

 

function addFields() {
var clientContext = new SP.ClientContext.get_current();
var oWebsite = clientContext.get_web();
//Getting reference to the list
oList = clientContext.get_web().get_lists().getByTitle(“List Name”);
// Get filed collection
var fldCollection = oList.get_fields();

var f1 = clientContext.castTo(fldCollection.addFieldAsXml(‘<Field Type=”Text” DisplayName=”Desc” Name=”Description” />’, true, SP.AddFieldOptions.addToDefaultContentType), SP.FieldText);

f1.update();
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
alert(“List Field Updated”);
}

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

This post gives you an overview of the different field types that you can create through CSOM or JSOM.

Create a Text field

A simple text field can be created as follows:

string schemaTextField = "<Field ID='<GUID>' Type='Text' Name='LastName' StaticName='LastName' DisplayName='Last Name' />";
Field simpleTextField = demoList.Fields.AddFieldAsXml(schemaTextField, true, AddFieldOptions.AddToDefaultContentType);
clientContext.ExecuteQuery();

Written like this, SharePoint will ignore the internal name you specified, and will apply the display name. To make sure your internal name is applied, you have to add the AddFieldOptions.AddFieldInternalNameHint:

string schemaTextField = "<Field Type='Text' Name='LastName' StaticName='LastName' DisplayName='Last Name' />";
Field simpleTextField = demoList.Fields.AddFieldAsXml(schemaTextField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

 

Creating a hidden field

If you want to create a hidden field, you have to include the hidden attribute and set it to true:

string schemaTextField = "<Field Type='Text' Name='LastName' StaticName='LastName' DisplayName='Last Name' Hidden='TRUE' />";
Field simpleTextField = demoList.Fields.AddFieldAsXml(schemaTextField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Omitting this attribute will create a field visible to your users.

You can also

Creating an indexed field

While creating a field, you can also index it.

Field f = list.Fields.GetByInternalNameOrTitle(fieldName);
clientContext.Load(f);
clientContext.ExecuteQuery();
f.Indexed = true;
f.Update();

clientContext.ExecuteQuery();

Create a multi line field

You can create different types of multi line fields:

  • a plain text field
  • a rich text field
  • an enhanced text field

A plain multi line text field

string schemaMultilineTextField = "<Field ID='<GUID>' Type='Note' Name='Comments' StaticName='Comments' 
DisplayName='Comments' NumLines='6' RichText='FALSE' Sortable='FALSE' />" 
Field multilineTextField = demoList.Fields.AddFieldAsXml(schemaMultilineTextField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

A rich multi line text field

string schemaRichTextField = "<Field ID='<GUID>' Type='Note' Name='Comments' StaticName='Comments'
DisplayName='Comments' NumLines='6'  RichText='TRUE' Sortable='FALSE' />" 
Field multilineTextField = demoList.Fields.AddFieldAsXml(schemaRichTextField , true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

An enhanced multi line text field

string schemaRichTextField = "<Field ID='<GUID>' Type='Note' Name='Comments' StaticName='Comments' 
DisplayName='Comments' NumLines='6' RichText='TRUE' RichTextMode='FullHtml' IsolateStyles='TRUE' Sortable='FALSE' />" 
Field multilineTextField = demoList.Fields.AddFieldAsXml(schemaRichTextField , true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Create a boolean field

In the SharePoint user interface this is called a Yes/No field.

string schemaBooleanField = "<Field Type='Text' Name='Married' StaticName='Married' DisplayName='Married' />";
Field booleanField = demoList.Fields.AddFieldAsXml(schemaBooleanField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

If you want to set a default value, you have to specify a 0 for false or a 1 for true:

string schemaBooleanField = "<Field Type='Boolean' Name='Married' StaticName='Married' DisplayName='Married'>"
    + "<Default>0</Default></Field>;
Field booleanField = demoList.Fields.AddFieldAsXml(schemaBooleanField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Create a DateTime field

A DateTime field is created in a similar way, but you can set additional properties, like the Format property. In case of a DateTime field, the format attribute will indicate whether you want to create a date only field, or a date time field.

Date only field

string schemaBirthDate = "<Field ID='<GUID>' Type='DateTime' Name='BirthDate' StaticName='BirthDate' 
   DisplayName='Birth date' Format='DateOnly' >"
   + "<Default>[Today]</Default></Field>";
Field birthDateField = demoList.Fields.AddFieldAsXml(schemaBirthDate, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

The Default node is optional. The sample code snippet indicates that today’s date will be suggested to the user. If nothing is specified, no date will be sugested to the user.

Date and time field

string schemaArrivalField = "<Field ID='<GUID>' Type='DateTime' Name='ArrivalDateTime' StaticName='ArrivalDateTime' 
   DisplayName='Arrival' Format='DateTime'>"
   + "<Default>[Now]</Default></Field>";
Field birthDateField = demoList.Fields.AddFieldAsXml(schemaBirthDate, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

As in previous code sample, the Default node is optional. This sample code snippet indicates that the current date and time will be suggested to the user. If nothing is specified.

Create a Number field

With this type of field, you have to specify the different choices on beforehand. You can also choose if you want to show the different options within a dropdown list or with radio buttons.

string schemaNumberField = "<Field ID='<GUID>' Type='Number' Name='NbrOfEmployees' StaticName='NbrOfEmployees' 
   DisplayName='Number of employees' />";
Field birthDateField = demoList.Fields.AddFieldAsXml(schemaBirthDate, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Previous code snippet will create a standard number field where the user can set positive and negative numbers, and where the number of decimals is generated automatically. If you want to declare a number field that only allows positive numbers, you will have to declare it this way:

string schemaPosNumberField = "<Field ID='<GUID>' Type='Number' Name='NbrOfEmployees' StaticName='NbrOfEmployees' 
   DisplayName='Number of employees' Min='0' />";

And if you want to restrict the range of values that can be entered by the user, you have to declare the number field the following way:

string schemaNumberField = "<Field ID='<GUID>' Type='Number' Name='NbrOfEmployees' StaticName='NbrOfEmployees' 
   DisplayName='Number of employees' Min='0' Max='5000'/>";

You can also define the number of decimals:

string schemaNumberField = "<Field ID='<GUID>' Type='Number' Name='NbrOfEmployees' StaticName='NbrOfEmployees' 
   DisplayName='Number of employees' Min='0' Decimals='0' />";

You can also create a percentage field by using the Number type. In that case you have to add an addition attribute Percentage, which you have to set to true:

string schemaPercentageField = "<Field ID='<GUID>' Type='Number' Name='NbrOfEmployees' StaticName='NbrOfEmployees' 
   DisplayName='Number of employees' Percentage='True' Decimals='2' />";

Create a Choice field

With this type of field, you have to specify the different choices on beforehand. You can also choose if you want to show the different options within a dropdown list or with radio buttons.

Dropdown list

string schemaChoiceField = "<Field ID='<GUID>' Type='Choice' DisplayName='Menu Choice' Name='MenuChoice' StaticName='MenuChoice' 
   Format='Dropdown'>"
   + "<Default>Meat menu</Default>"
   +         "<CHOICES>"
   +         "    <CHOICE>Fish menu</CHOICE>"
   +         "    <CHOICE>Vegeterian menu</CHOICE>"
   +         "</CHOICES>"
   + "</Field>";
Field choiceField = demoList.Fields.AddFieldAsXml(schemaChoiceField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Radio buttons

string schemaChoiceField = "<Field ID='<GUID>' Type='Choice' Name='DessertChoice' StaticName='DessertChoice' 
   DisplayName='Desserts' Format='RadioButtons'>"
   + "<Default>Ice cream</Default>"
   +         "<CHOICES>"
   +         "    <CHOICE>Fresh fruit</CHOICE>"
   +         "    <CHOICE>Sorbet</CHOICE>"
   +         "</CHOICES>"
   + "</Field>";
Field choiceField = demoList.Fields.AddFieldAsXml(schemaChoiceField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Checkboxes

When creating Choice fields  in the user interface, you also have the option to display checkboxes to allow more than one selection:

multichoice

To achieve this in code you have to set the Type attribute to MultiChoice. Of course, don’t specify the Format attribute.

string schemaChoiceField = "<Field ID='<GUID>' Type='MultiChoice' Name='SideDishesChoice' StaticName='SideDishesChoice' 
   DisplayName = 'Side dishes' >"
   + "<Default>Patatoes</Default>"
   +         "<CHOICES>"
   +         "    <CHOICE>Fresh vegetables</CHOICE>"
   +         "    <CHOICE>Beans</CHOICE>"
   +         "    <CHOICE>Pepper Sauce</CHOICE>"
   +         "</CHOICES>"
   + "</Field>";
Field choiceField = demoList.Fields.AddFieldAsXml(schemaChoiceField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Fill In option

To allow users to fill in a different choice than already available, you have to add the FillInChoice attribute. If that attribute is omitted in the XML,  users will only be able to choose from the available options.

string schemaChoiceField = "<Field ID='<GUID>' Type='Choice' DisplayName='Menu Choice' Name='MenuChoice' StaticName='MenuChoice' 
   Format='Dropdown' FillInChoice='TRUE'>"
   + "<Default>Meat menu</Default>"
   +         "<CHOICES>"
   +         "    <CHOICE>Fish menu</CHOICE>"
   +         "    <CHOICE>Vegeterian menu</CHOICE>"
   +         "</CHOICES>"
   + "</Field>";
Field choiceField = demoList.Fields.AddFieldAsXml(schemaChoiceField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Create a Picture field

If you want to create a picture field, you have to set the field type to URL. An additional attribute Format will indicate that you want to create a picture field:

string schemaPictureField = "<Field ID='<GUID>' Type='URL' Name='EmployeePicture' StaticName='EmployeePicture' 
   DisplayName='Employee Picture' Format='Image'/>";
Field pictureField = demoList.Fields.AddFieldAsXml(schemaPictureField, true, AddFieldOptions.AddInternalNameHint);
clientContext.ExecuteQuery();

Create a URL field

If you want to create a field to contain an hyperlink, you also have to define a field of type URL, but in that case you set the Format attribute to Hyperlink:

string schemaUrlField = "<Field ID='<GUID>' Type='URL' Name='BlogUrl' StaticName='BlogUrl' DisplayName='Blog URL' Format='Hyperlink'/>";
Field urlField = demoList.Fields.AddFieldAsXml(schemaPictureField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Create a Lookup field

You typically create a lookup field when the value needs to be looked up in another SharePoint list. When creating a Lookup field, you also need to specify the necessary attributes to indicate the lookup list and the field that is shown when a value is selected:

string schemaLookupField = "<Field ID ='<GUID>' Type='Lookup' Name='Country' StaticName='Country' DisplayName='Country' 
    List='Countries' ShowField='Title' />"
Field lookupField = demoList.Fields.AddFieldAsXml(schemaLookupField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

If you want to show another field from the lookup list, instead of the Title, you can set the ShowField attribute to another field.

You can also define how the relationship with the lookup field must behave.  But in that case the field needs to be indexed:

string schemaLookupField = "<Field ID ='<GUID>' Type='Lookup' Name='Country' StaticName='Country' DisplayName='Country' 
    List='Countries' ShowField='Title' RelationshipDeleteBehavior='Restrict' Indexed='TRUE'/>"

If you want to create a multi-select lookup field, you have to use the type LookupMulti, and you have to set an additional attribute Mult (and not Multi):

string schemaMultiLookupField = "<Field ID ='<GUID>' Type='LookupMulti' Name='Country' StaticName='Country' DisplayName='Country' 
    List='Countries' ShowField='Title' Mult='TRUE'/>"

Create a User field

A field of type User is defined as follows:

string schemaUserField = "<Field ID ='<GUID>' Type='User' Name='Employee' StaticName='Employee' DisplayName='Employee' />"
Field userField = demoList.Fields.AddFieldAsXml(schemaUserField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

You can set different attributes:

  • UserSelectionMode: this attribute can be set to PeopleOnly or to PeopleAndGroups
  • UserSelectionScope: this attribute can be set to limit the selection of possible users to a certain group. The value must be an integer value that indicates the ID of group

Following code sample defines a user field that allows selection of multiple users from the site member group:

string schemaUserField = "<Field ID ='<GUID>' Type='UserMulti' Name='Employee' StaticName='Employee' DisplayName='Employee' 
   UserSelectionMode='PeopleOnly' UserSelectionScope='7' Mult='TRUE'/>"

Create a Managed Metadata field

The creation of a managed metadata field requires a bit more than just defining the CAML. I’ll add it here for completeness, but credits are for Waldek Mastykarz with his post Programmatically creating Site Columns and Content Types using the App Model

string schemaTaxonomyField = "<Field ID ='<GUID>’ Type='TaxonomyFieldType' Name='ProductCategory' StaticName='ProductCategory' 
    DisplayName='ProductCategory' />"
Field field = demoList.Fields.AddFieldAsXml(schemaTaxonomyField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Of course, this is not enough; you also have to bind this field to a termset or term in the term store:

Guid termStoreId = Guid.Empty;
Guid termSetId = Guid.Empty;
GetTaxonomyFieldInfo(clientContext, out termStoreId, out termSetId);
 
// Retrieve the field as a Taxonomy Field
TaxonomyField taxonomyField = clientContext.CastTo<TaxonomyField>(field);
taxonomyField.SspId = termStoreId;
taxonomyField.TermSetId = termSetId;
taxonomyField.TargetTemplate = String.Empty;
taxonomyField.AnchorId = Guid.Empty;
taxonomyField.Update();
 
clientContext.ExecuteQuery();

In case you want to create a multi-select managed metadata field, you have to define a field of type TaxonomyFieldTypeMulti.

Create a Calculated field

Calculated fields can be created in a number of flavors. The following code snippet generates a calculated field that will show employee data based on the fields FirstName, LastName and EmployeeID. It will be formatted as follows:

Karine Bosch (id 82176)

string formula = "<Formula>=FirstName&amp; \" \" &amp;LastName&amp; \" (id: \" &amp;EmployeeID&amp; \" \"</Formula>"
      + "<FieldRefs>"
      + "<FieldRef Name='FirstName' />"
      + "<FieldRef Name='LastName' />"
      + "<FieldRef Name='EmployeeID' />"
      + "</FieldRefs>";

string schemaCalculatedField = "<Field ID='<GUID>' Type='Calculated' Name='FullName' StaticName='FullName' 
   DisplayName='Full Name' ResultType='Text' Required='TRUE' ReadOnly='TRUE'>" + formula + "</Field>";
Field fullNameField = demoList.Fields.AddFieldAsXml(schemaCalculatedField, true, AddFieldOptions.AddFieldInternalNameHint);
clientContext.ExecuteQuery();

Another example is a field that defaults to the year number of todays’ date. In this case the element <DefaultFormula> is used within a Text field:

string fieldXml = "<Field DisplayName='Year' Type='Text'>"
   + "<DefaultFormula>=CONCATENATE(YEAR(Today))</DefaultFormula>"
   + "</Field>";
Field field = list.Fields.AddFieldAsXml(fieldXml, true, 
    AddFieldOptions.defaultValue);
context.ExecuteQuery();
Advertisements

O365 – SharePoint Online: Alpaca JS based Apps development

Introduction

This article is primarily intended for creating a simple Apps based on Alpaca JS framework for O365 SharePoint Online.

Alpaca Demo

Download Source Code

Click here for Source code 

What is Alpaca JS framework?

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.

Everything you need is provided out of the box. Alpaca comes pre-stocked with a large library of controls, templates, layouts and features to make rendering JSON-driven forms easy. It is designed around an extensible object-oriented pattern, allowing you to implement new controls, templates, I18N bundles and custom data persistence for your projects.

Alpaca is open-source and provided to you under the Apache 2.0 license. It is supported by Cloud CMS and is in use by organizations and within projects all around the world.

Steps to create the Alpaca based Apps for SharePoint Online

Step I

Create the HTML file by using the below source code,

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<title>User Details</title>
<meta charset=”utf-8″ />
http://code.jquery.com/jquery-1.11.1.min.js
http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.0/handlebars.js
<!– alpaca –>
<link type=”text/css” href=”http://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.css&#8221; rel=”stylesheet” />

<style>
form {
padding-left: 2%;
width: 60%;
}
</style>
</head>
<body>

$(function () {
$(“#form1”).alpaca({
“schema”: {
“title”: “User Details”,
“description”: “Fill User Details”,
“type”: “object”,
“properties”: {
“Name”: {
“type”: “string”,
“title”: “Name”,
“id”: “txtName”,
“required”: true
},
“Password”: {
“type”: “string”,
“title”: “Password”,
“format”: “password”,
“required”: true
},
“Email Address”: {
“type”: “string”,
“title”: “Email Address”,
“format”: “email”,
“required”: true
},
“Cell Number”: {
“type”: “number”,
“title”: “Cell Number”,
“maxLength”: 10,
“minLength”: 10,
“required”: true
},
}
},
“options”: {
“form”: {
“attributes”: {
“action”: “http://httpbin.org/post&#8221;,
“method”: “post”
},
“buttons”: {
“submit”: {
“click”: function () {
this.ajaxSubmit().done(function () {
$.ajax({
url: “”,
type: “”,
dataType: “json”
});
});
alert(” User Name : ” + $(‘[name=”Name”]’)[0].value + “\n Email Address : ” + $(‘[name=”Email Address”]’)[0].value + “\n Cell Number : ” + $(‘[name=”Cell Number”]’)[0].value);

}
}
}
},
}
});
});

<link type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css&#8221; rel=”stylesheet” />
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js

http://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.js

</body>
</html>

Step II

Click here for: Step by step creating Content Editor webpart and associate with HTML

Step III

Final result will be as below,

Alpaca Demo

O365 -SharePoint Online: step by step creating Content Editor webpart and associate with HTML

Introduction

For creating content editor webpart by using HTML is common requirement for SharePoint. Here we are covering the steps of achieving the same for O365 SharePoint online.
Alpaca Demo

Download user guide

Click here to download steps by step guide

Step by step approach

Step I

Go the site where to create Content Editor webpart.

Step II

Create Asset Library or Document Library for repository of HTML, CSS, JS etc. resources related to specific Content Type webpart.

Step III

Create folder for Uploading your files of step II with same name of webpart.
2

Step IV

3

Step V

Upload the source files,
4

Step VI

Edit the page where you want to add webpart using below steps,
5

Step VII

Edit the properties of Content Editor webpart which have been added using step V,
6

Step VIII

Copy the html path from step V to the properties as below,
7

Step IX

Now your webpart is ready with HTML loaded,
Alpaca Demo

Apps in SharePoint 2013

Introducing SharePoint Apps

Microsoft is moving to the cloud as quickly as the market will allow, and this means that their architecture is shifting towards a software-as-a-service model. As far as I can tell, the end-goal is to have a model where businesses pay a monthly subscription fee for their users to access a SharePoint instance that is owned and operated by Microsoft. When you think of the infrastructure, support, maintenance, and upgrades that come along with SharePoint then it’s not necessarily a bad proposition for many companies.

One problem with a hosted model, however, is that SharePoint is a lot more useful when it can be completely customized around the particular needs of a business. Out of the box, SharePoint’s functionality is certainly useful, but most organizations rely on custom SharePoint applications to realize the full potential of the platform. In a hosted environment, this is problematic because custom code runs in a shared environment; not all custom code is good code, and bad code can quickly bring a server to its knees and upset a number of different customers using that server.

With this in mind, Microsoft set out to create an extensibility point in SharePoint 2013 that would allow customers to build their own solutions for SharePoint without hurting the hosted model whenever a customer’s code was found to be ‘executionally challenged’. They came up with a model called a SharePoint App, which is simply a solutionwith no SharePoint server side code.

What Do You Mean No SharePoint Server Side Code? Seriously, I mean there is no server-side code that is executed by the SharePoint server. A SharePoint

App is essentially a solution that can only include HTML, CSS, JavaScript, Silverlight XAP files, images, and any other static files.

Client side coding is  appreciated now 🙂

However, you can’t include an assembly with custom code because that would need to be executed on the server.

Of course, this leads to the question ‘how do you build something useful without server side code in SharePoint?’

What are the Three SharePoint 2013 App Deployment Models?

Before we get into the details of how it’s possible to build useful apps without SharePoint server side code, we need to go over the three deployment models for SharePoint 2013 Apps:

  • SharePoint-hosted
  • Self-Hosted
  • Automatically Provisioned Azure Web Application

SharePoint-Hosted App

A SharePoint-Hosted App is an application made entirely of static files that reside directly in your instance of SharePoint. When you add an application to one of your sites, SharePoint deploys the files in your App to a special App domain where your App lives. When a user accesses your App, they are redirected to a page that lives in the App domain and from which, presumably, they can use your App. There is absolutely no server-side code allowed in this model.

Self-Hosted App

A Self-Hosted App is an application where the files for the application exist on an external server (e.g. you are hosting those files yourself somewhere outside of SharePoint). When a user accesses your application, they are redirected to a page on this external server where the application resides. In this model, you can run server-side code, but it has to be run on the external server. There is still no way to run custom code on the SharePoint server. One of the benefits of this model is that the external server does not need to be a Windows server: SharePoint is really just redirecting users to a web page, so you can use any operating system and application server you want as long as it can fulfill web requests. You could be a PHP developer with a Linux machine and still make SharePoint apps.

Another interesting reason to use this model is that it puts you in complete control of upgrades. Since you own the server, you can deploy updates and have them applied immediately for all of your clients. In the other models, the user has to take some action to upgrade because you do not have access to the server on which the App is hosted.

Automatically Provisioned Azure App

An Automatically-Provisioned Azure App is an interesting concept that requires a bit of a back story to describe. First, I believe this type of App is designed to be run only from Microsoft’s hosted SharePoint environment, so its primary audience is really software vendors looking to sell to SharePoint online customers. The other two App model options are available in the hosted SharePoint environment as well as on a SharePoint 2013 corporate install.

Now, if you are a software vendor creating an App for SharePoint you have a choice to make that will affect your budget. If you make a SharePoint-Hosted App, then you cannot run server side code, but you also do not have to pay for a server on which to host your app. If you opt for a Self-Hosted App, then you can run server side code but you are responsible for paying for that server to host your app.

An Automatically-Provisioned Azure App is the best of both worlds. It is an App that is designed to be deployed to Azure. This means that it will be hosted outside of SharePoint and can run custom code. However, when a SharePoint Online user adds the App to their SharePoint instance, SharePoint Online tells them that the App needs to be provisioned to Azure, and if they opt to let that happen then the Azure instance will be billed to their SharePoint Online account. So you get all of the capabilities and flexibly server side code without any of the costs associated with hosting it yourself. This was clearly a brilliant plan hatched by the accountants at Microsoft.

Building Useful Apps without Server Side Code on SharePoint

The Client-Side Object Model (CSOM) was one of the areas into which Microsoft poured a ton of work. SharePoint 2010 had a very limited set of functionality, but the CSOM in SharePoint 2013 really allows you to execute just about any operation you can think of. As you can imagine, you must have a fully-functional client-side API when you are trying to encourage people to move away from using server side code.

There are three ways that you can access CSOM functionality, so the deployment model that you are using for your SharePoint 2013 app will determine he option that you choose.

  • .NET / Silverlight API
  • JavaScript API
  • REST API

SharePoint-Hosted App

If you plan to use a SharePoint-Hosted deployment model, then you are limited to static files. However, static files can include JavaScript and Silverlight XAP files that run dynamic code on the client side. As such, you are likely to employ the JavaScript API if you’re coding on an HTML / ASPX page or the Silverlight runtime if you decide to deploy a Silverlight XAP file. You can technically use the REST API from JavaScript and Silverlight if you so wish, but the other APIs are a better fit.

GimmalSoft opted for the SharePoint-Hosted App model because our Gimmal Drop Zone App for SharePoint 2013in the Office Store actually started out as a Silverlight component for SharePoint 2010 and was a natural fit for converting into a SharePoint 2013 app.

Self-Hosted App

A self-hosted App can take on a number of forms because it can run on any number of different operating systems with any number of different application servers. If you opt for this deployment model, then I assume you want to run server-side code. If you are hosting on a server that runs ASP.NET, then it is a natural fit to use the .NET API. If you are running a LINUX / UNIX system then the REST API is going to be a better fit because most non-Windows servers really don’t run .NET code. JavaScript and Silverlight are available in any deployment model, but these are both client-side and not server-side technologies.

Azure Provisioned App

Azure is a .NET technology, so it makes the most sense to use the .NET API when implementing an Azure-provisioned application. Once again, note that you have the option of using any CSOM API mode that you want in an Azure application, but the .NET CSOM assemblies are the best fit, considering that Azure is running on the .NET platform.

What About Authentication and Authorization?

Now that Microsoft has exposed just about every SharePoint 2013 operation from the CSOM, you have to ask yourself how you keep every idiot, who can code against the JavaScript API, from bombarding your SharePoint instance with malicious requests to delete all of your data? Fortunately, Microsoft has placed a fairly extensive layer of security around the SharePoint 2013 app model.

A SharePoint 2013 App requests a specific set of permissions when they are installed. If the current user has the ability to grant the App those permissions, then the application can be installed. If the user cannot grant that level of access, then the application cannot be installed. It’s really as simple as that.

SharePoint-Hosted Apps have the benefit of using built-in security because they operate on the same domain where the files are hosted. Self-hosted and Azure-Provisioned Apps require the use of OAuth for security purposes.

Will My SharePoint 2010 Applications Still Work in SharePoint 2013?

Yes. Many organizations have tens of millions of dollars invested in custom applications for SharePoint, and if those applications did not port then Microsoft is keenly aware that upgrading from 2010 to 2013 would be a pretty hard sell. There really wasn’t a fundamental change in how full-trust farm solutions and partial-trust sandbox solutions work, so they still exist and are still supported. If you know how to develop in SharePoint 2010, then you should be able to seamlessly move to SharePoint 2013 using farm and sandbox solutions. The App model, however, is a new way to develop and opens up possibilities for selling a SharePoint 2013 App to the masses via the Office Store and for preparing for the day when SharePoint is entirely based in the cloud

Javascript for: Start implementation for Showing only Level-1 of subsites

<!-- Start implementation for Showing only Level-1 of subsites -->	
						 <script type="text/javascript" >
							//Calling your script
							ReplaceElementsClass("menu vertical menu-vertical",null,"div","menu vertical menu-vertical","root static");

							function ReplaceElementsClass(searchClass,node,tag,newClassName,elementToHideClass) {
								var classElements = new Array();
								if ( node == null )
									node = document;

								if ( tag == null )
									tag = '*';

								var els = node.getElementsByTagName(tag);

								var elsLen = els.length;

								var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

								for (i = 0, j = 0; i < elsLen; i++) {
									if ( pattern.test(els[i].className) ) {
                                       var children = els[i].getElementsByTagName('UL');
										for (k = 0; k < children.length; k++) 
										{   
											var pattern1 = new RegExp("(^|\\s)"+elementToHideClass+"(\\s|$)");
											if (!pattern1.test(children[k].className) ) 
											{
												children[k].style.display = "none";
											}
										} 
									   j++;
									}
								}
							}
						 </script>
					<!-- End implementation for Showing only Level-1 of subsites -->