SharePoint Online Create a portal series picture scrolling

??

Objective

Create a SharePoint Online section we have already introduced, in particular, the content editor way, with WebPart mode and JavaScript read background data three of the foreground to do the display;

However, for complex displays, these methods are still more difficult to achieve, although for the first page of the picture carousel, through the JavaScript approach is fully competent, but I still want to pass this column, for you to introduce how to use the sandbox solution to create a WebPart, To complete the more complex foreground display.

Below, let's start by creating a sandboxed solution in the portal site of SharePoint Online.

A. SharePoint Online creates a picture library for scrolling pictures

Create a picture library for your product display to store information such as:

Create a multi-line text field to store the description, remember the best English, change the Chinese, such as:

Upload a few photos of the product display, I do not have any pictures here, just casually uploaded a few pictures of Pingyao ancient town, such as:

Ii. WebPart for creating sandboxed solutions in Visual Studio

Create an empty SharePoint project first, such as:

Remember to choose a sandboxed solution, which is the debug site, such as:

Add a project to the project, such as:

Selecting a visual webpart, named VWPSHOW,VWP, is the abbreviation for Visual WebPart, which makes it easy for us to know that this is a visual webpart; if it is a WebPart, I generally name WP start;

In general, it is better to rename the name of feature, if it is Feature1 such a name, the future maintenance is really trouble, such as:

At the same time, modify the title of feature, preferably also write a little description, convenient to activate the time to recognize and find, such as:

It is also important to be sure that we add the Visual WebPart, in feature, otherwise deployed, may find the activation feature no parts, because we did not add in.

I remember the Chinese version of the VS will automatically add, the English version will not be automatically added, people pay attention to it;

Then, on the foreground page of the Visual WebPart, add a div, script, style, such as:

Then add a method that gets the data, which makes up the HTML, and executes it when the page loads, such as:

Then, with a reference to the head plus Microsoft.SharePoint, because there is no reference by default, we are going to use the server object model to read the data, such as:

Writing the core code is actually very simple, such as:

 Public voidgetdatahtml () {Try    {        stringdatahtml =string.        Empty; stringElementdiv ="<div id= ' demo_pro ' ><a href= '/products/forms/dispform.aspx?id={0} ' ><span>{2}</span></a></div>"; SPSite site=SPContext.Current.Site; SPWeb Web=site.        OpenWeb (); SPList List= Web. Lists.trygetlist ("Product Show"); SPListItemCollection Itemcoll=list.        Items; Datahtml="<div id= ' demo_p ' ><div id= ' indemo_p ' ><div id= ' demo1_p ' >"; foreach(SPListItem Iteminchitemcoll) {datahtml+=string. Format (Elementdiv, Item.id. ToString (), item. Url.tostring (), item.        Title.tostring ()); } datahtml+="</div><div id= ' demo2_p ' ></div></div></div>"; Vwpshowcontent.innerhtml=datahtml; }    Catch { }}

Then right-click on the project and publish it:

Third, upload the deployment of sandboxed solutions, and add to the first column

Visual WebPart Publishing finished, found in the site settings, there is no solution this option, do not know why, simply knock the URL, "/_catalogs/solutions/forms/allitems.aspx";

Then insert a WebPart, and you can see our newly added WebPart, such as:

Added to the page, you can see the effect of adding a visual WebPart, such as:

Then delete the original HTML static content on the page, add a WebPart Zone, insert the tab on the Ribbon menu, such as:

Then add this visual webpart on the home page, and you can preview the effect, such as:

Summary

Sandboxed solutions are a very useful development skill for SharePoint Online, and here we describe a visual webpart that deploys SPO through a sandboxed solution, in fact our functionality is not complex and can be completely done with JavaScript APIs, But in order to introduce a variety of ways to do similar functions, or use a sandbox solution.

All right, here's the product presentation.

SharePoint Online Create a portal series picture scrolling