-In this exercise, we will use the EcmaScript client-side object model to update and read list data dynamically. Also shown is the new Dialog API’s from client-side script.
-The JavaScript client side object model allows JavaScript developers access to SharePoint objects such as Site, Web and List (and more) from client side JavaScript.
Execute:
1/ Create a Visual Web Part in SharePoint 2010(ex: Its name is ECMA_Demo)
2/ Open ECMA_Demo.ascx file
3/ Append the follow code to ECMA_Demo.ascx.
<SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="sp.js" Localizable="false"
LoadAfterUI="true" />
<script language="ecmascript" type="text/ecmascript">
/* SharePoint list names */
var ProjectListName = "Tasks";
/* SharePoint list field names */
var ProjectNameField = "Title";
var ProjectDescriptionField = "Body";
/* List objects */
var projectsList;
/* variable to hold list items from the projects list */
var projects;
/* client context object - used to access SharePoint data */
var context;
/* web (SPWeb) that our page is running on */
var web;
/* variable to hold modalDialog to close later */
var modalDialog;
/* used when creating a new project ListItem. */
var projectListItem;
var copyOfAddProjectForm;
/* our startup method when the page loads */
_spBodyOnLoadFunctionNames.push("Initialize()");
/* Initialize useful variables and retrieve ClientContext */
function Initialize() {
/* Retrieves the current ClientContext object */
context = SP.ClientContext.get_current();
web = context.get_web();
// Get references to the lists we will use
projectsList = web.get_lists().getByTitle(ProjectListName);
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query/></View>');
projects = projectsList.getItems(camlQuery);
context.load(projects, 'Include(Title,Body)');
context.executeQueryAsync(onListsLoaded, OnError);
}
/* Event handler called loading the projects list
This method dynamically renders an HTML table to display the list data */
function onListsLoaded() {
// Get the list items for the contacts list
var projectTable = document.getElementById("tblProjectList");
// clear out the table so when we add a new project there are not duplicates
while (projectTable.rows.length > 0)
projectTable.deleteRow(projectTable.rows.length - 1);
var content;
var cell;
var tbo = document.createElement('tbody');
// Loop for each project
var listItemEnumerator = projects.getEnumerator();
while (listItemEnumerator.moveNext()) {
// For each project create a row in the table
var newTR = document.createElement('tr');
var projectLI = listItemEnumerator.get_current();
// get_item() retrieves the listitem value
var projectName =
projectLI.get_item(ProjectNameField);
var projectDesc =
projectLI.get_item(ProjectDescriptionField);
// add the cells for the row
cell = document.createElement('td');
content = document.createTextNode(projectName);
cell.appendChild(content);
newTR.appendChild(cell);
cell = document.createElement('td');
content = document.createTextNode(projectDesc);
cell.appendChild(content);
newTR.appendChild(cell);
// Add the row to the table body
tbo.appendChild(newTR);
}
// add the table body to the table
projectTable.appendChild(tbo);
}
/* Hide the modal dialog and display the updated UI */
function onProjectAdded() {
HideAddProject();
}
/* Show a modalDialog with the contents of divAddProject */
function ShowAddProject() {
var divAddProject = document.getElementById("divAddProject");
// showModalDialog removes the element passed in from the DOM
// so we save a copy and add it back later
copyOfAddProjectForm = divAddProject.cloneNode(true);
divAddProject.style.display = "block";
var options = { html: divAddProject, width: 200, height: 350, dialogReturnValueCallback: ReAddClonedForm };
modalDialog = SP.UI.ModalDialog.showModalDialog(options);
}
/* Close the modalDialog */
function HideAddProject() {
modalDialog.close();
Initialize();
}
function ReAddClonedForm() {
document.body.appendChild(copyOfAddProjectForm);
}
/* Called from the Add Project modal dialog
Creates a list item in the Project list */
function AddTask() {
var lici1 = new SP.ListItemCreationInformation();
projectListItem = projectsList.addItem(lici1);
projectListItem.set_item(ProjectNameField, getTBValue("txtProjectName"));
projectListItem.set_item(ProjectDescriptionField, getTBValue("txtDescription"));
projectListItem.update();
context.load(projectListItem);
// Execute the query to create the project list
// onProjectAdded is our call back method called when the call to the server has completed
context.executeQueryAsync(onProjectAdded, OnError);
}
/* Error handler */
function OnError(sender, args) {
var spnError = document.getElementById("spnError");
spnError.innerHTML = args.get_message();
}
/* Helper function - shortcut to the value property of a textbox */
function getTBValue(elID) {
var el = document.getElementById(elID);
return el.value;
}
</script>
<div style="font-weight: bold">
Task List</div>
<br />
<table id="tblProjectList" style="border: solid 1px silver">
</table>
<br />
<a href="javascript:ShowAddProject()">Add a Task</a>
<br />
<div id="divAddProject" style="display: none; padding: 5px">
<b>Project Information</b><br />
<br />
Name
<br />
<input type="text" id="txtProjectName" /><br />
Description<br />
<input type="text" id="txtDescription" /><br />
<span id="spnError" style="color: Red" />
<br />
<input type="button" value="Add New Task" onclick="AddTask()" />
</div>
4/ Deploy
More Detail: http://www.codeproject.com/Articles/268193/SharePoint-2010-Client-Object-Model-Part-1
See more detail: Insert, Delete, Update item using ECMAScript http://ranaictiu-technicalblog.blogspot.com/2010/07/sharepoint-2010-use-ecmascript-to.html
No comments:
Post a Comment