SharePoint learning notes-ecmascript object model series-1. Introduction of ecmascript Object Model

We know that Microsoft SharePoint 2010 provides three new client APIs that allow you to host applications in. Net by running scripts in your browser. Program Executed in Code (Microsoft. NET Framework 3.5 or later) or code executed in the Microsoft Silverlight 2.0 APPLICATION interacts with the SharePoint website.
Here we will look at how to introduce the ecmascript (JavaScript, JScript) Client object model in the SharePoint website.
The first is a few notes:
1. The ecmascript object model can only be used for Sharepoint sites. That is to say, you cannot use the ecmascript object model of the traditional Asp.net website to access SharePoint website resources across websites.
2. Similarly, you cannot use the ecmascript object model on a Sharepoint site to access resources of other SharePoint sites across websites. (For example, access resources on another SharePoint website URL: yoursite.yoursharepoint.com through the ecmascript object model)
3. You can use jquery and ecmascript object models directly without additional preparation work. You only need to reference jquery. js in your SharePoint project.
4. When you use the ecmascript object model on the webpart page or application page (ASPX page) of the SharePoint website, you only need to reference sp. js.
5. If you plan to use the ecmascript object model to modify resources on the SharePoint site, you need to add the formdigest tag.

 Let's talk about how to make your SharePoint project able to use the ecmascript object model..

Take the SharePoint Visual Web Part Page as an example:
1. Create a New SharePoint project and create a visual web part in the project. For example

2. Open the user control under the Visual Web PartSource code(Wpenableecmascriptusercontrol. ascx), add SP. js reference to it. (Sp. js also has a debug version: sp. Debug. JS is used for debugging convenience during development, but you cannot deploy it in the production environment)

< SharePoint: scriptlink Name = "Sp. js" Runat = "Server" OnDemand = "True" Localizable = "False"   />

OnDemand indicates loading the sp. js file as needed, instead of loading the sp. js file every time the page is loaded.

3. to update the resource content on the SharePoint website through our visual web part, we need to add the formdigest tag.

< SharePoint: formdigest Runat = "Server"   />

With this tag, the current user's seruity token will be submitted along with the page when the page for modifying data is uploaded back to the background server. This security mechanism ensures that SharePoint-related resources are effectively modified. The following is a description of this label.
Http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.formdigest%28office.14%29.aspx
Http://msdn.microsoft.com/en-us/library/ms472879%28office.14%29.aspx

4. Use the ecmascript object model to obtain SharePoint Resource Information
Add the following code to the wpenableecmascriptusercontrol. ascx source file:

 

< Script Type = "Text/JavaScript" >
// Get website information
Function Retrievewebsiteonquerysucceeded (sender, argS ){
Alert ( ' Title: '   +   This . Owebsite. get_title () +   ' Decription: '   +   This . Owebsite. get_description ());
}

Function Retrievewebsiteonqueryfailed (sender, argS ){
Alert ( ' Request failed '   + Args. get_message () +   ' \ N '   + Args. get_stacktrace ());
}

Function Retrievewebsite (){
VaR Clientcontext =   New Sp. clientcontext. get_current ();
This . Owebsite = Clientcontext. get_web ();
// Clientcontext. Load (this. owebsite );
Clientcontext. Load ( This . Owebsite, ' Title ' , ' Description ' );
Clientcontext.exe cutequeryasync (function. createdelegate ( This , This . Retrievewebsiteonquerysucceeded ),
Function. createdelegate ( This , This . Retrievewebsiteonqueryfailed ));
}
</ Script >

The first thing this Code does is to get the clientcontext (just like getting the spcontext object)
Then, use context. get_web to obtain the current web (just like getting spcontext. Current. Web)
Then, load the related object (web object) through the load method. Here we load the website object. The information about the object will be extracted in subsequent steps.
Next, we use the executequeryasync method to enable asynchronous operations, and define two asynchronous operations and the corresponding processing methods retrievewebsiteonquerysucceeded and retrievewebsiteonqueryfailed.
In the retrievewebsiteonquerysucceeded method, the title and description attributes of the website object are provided and displayed in the pop-up window.

If the asynchronous operation fails, an error message is displayed in the retrievewebsiteonqueryfailed method.

5. Load related information as needed.
In the above Code, clientcontext. Load (this. owebsite); this method only uses the owebsite parameter, that is, this load method loads all the attributes related to the owebsite object. However, in this example, we do not need to care about so many attributes (We only care about the title and description attributes), so we can clarify the object attributes we need to load, this reduces the burden on system information exchange and improves information exchange efficiency. We can use the following code:

Clientcontext. Load (this. owebsite, 'title', 'description ');

The code execution result for obtaining information is as follows:

 
6. Execute your JavaScript code only after sp. JS is loaded.
Sometimes the JavaScript code you want to execute is based on the sp. js file. If sp. JS is not loaded, the JavaScript code you define will report an error. Therefore, we need human intervention to ensure that sp. JS is loaded before the JavaScript function we define. To achieve this, we need to use the executeordelayuntilscriptloaded function. The Code is as follows:

Executeordelayuntilscriptloaded (myjsfucntion, "sp. js ");

Myjsfucntion is the JavaScript function code you have defined (for example, retrievewebsite defined above ).

 

7. Update the website title using the ecmascript Object Model
Through the ecmascript object model, we can modify the resources of the SharePoint website. Here, we use it to modify the title of the current website.

 

< Script Type = "Text/JavaScript" >
// Update Website title
Function Updatetitle (){
VaR CTX =   New Sp. clientcontext. get_current ();
This . Web = CTX. get_web ();
Web. set_title ( ' Updatedtitle ' );
This . Web. Update ();
Ctx.exe cutequeryasync (function. createdelegate ( This , This . Onupdate ),
Function. createdelegate ( This , This . Onfail ));

}
Function Onupdate (sender, argS ){
Alert ( ' Title updated ' );
}
Function Onfail (sender, argS ){
Alert ( ' Failed to update title. Error: '   + Args. get_message ());
}
</ Script >

In the ecmascript object model, use get_propertyname to obtain the value of the corresponding attribute,

Use set_propertyname to set the value of the corresponding attribute.

Of course, do not forget to add the formdigest label to make the update operation normal.

The execution result is as follows:

 

 

 

8. Use jquery in the ecmascript Object Model
The ecmascript object model does not conflict with jquery. You only need to add jquery references. The only thing you need to note is that if you want to execute Javascript in the page load event, you must place this JavaScript function segment in executeordelayuntilscriptloaded (as shown above)

If you want to add jquery, refer to SharePoint Study Notes-delegate control -- add jquery on the SharePoint page

9. Notes during deployment
SharePoint provides two versions of sp. js (sp. js and sp. Debug. JS ). They are loaded through the scriptmanager in the masterpage of the SharePoint website. By default, scriptmanager's scriptmode is set to auto, that is, sp. JS is automatically loaded. To load the debug version, modify <deployment retail = "false"/> In the <system. Web> section of Web. config.
Of course, when you deploy it on a production machine, you must load sp. js instead of sp. Debug. js.
The ecmascript object model supports the following browsers:
Microsoft Internet Explorer 7.0 and later versions.
Firefox 3.5 and later
Safari 4.0 and later