SharePoint Online portal website creation Series Image scrolling,

SharePoint Online portal website creation Series Image scrolling,

Preface

We have already introduced the SharePoint Online topic, specifically the Content Editor, WebPart, and JavaScript reading background data front-end;

However, for complex presentations, these methods are still difficult to implement. Although the JavaScript method is fully qualified for homepage image carousel, I still want to use this topic to show you how to use the sandbox solution to create a WebPart for a more complex front-end presentation.

Next, let's start creating a sandbox solution on the SharePoint Online portal.

1. SharePoint Online creates a picture library for a rolling Image

Create a picture library for the product display to store information, such:

Create a multi-line text field to store the description. Remember to change the description to English first, for example:

I uploaded a few pictures of Pingyao Ancient Town without any help, for example:

II,Create a sandbox solution WebPart in Visual Studio

Create an empty SharePoint project first, for example:

Remember to select the sandbox solution. The above is the debugging site, for example:

Add a project to the project, for example:

Select Visual WebPart and name it VWPShow. VWP is short for Visual WebPart, so that we can know that this is a Visual WebPart. If it is a WebPart, I generally name it start with WP;

In general, it is recommended to rename the Feature name. If it is a name like Feature1, it will be difficult to maintain it in the future, such:

At the same time, it is best to write a Description to modify the Title of Feature to facilitate understanding and searching during activation, such:

Make sure that we add the visual WebPart in the Feature. Otherwise, we may find that there is no part to activate the Feature because we didn't add it at all.

I remember that the Chinese version VS will be automatically added, and the English version will not be automatically added. Please pay attention to it;

Add the div, script, and style on the front-end page of the visualized WebPart, such:

Then add a method to get data and make up Html. Execute the following when loading the page, for example:

Then, add the Microsoft. SharePoint; reference in the header. Because no reference is provided by default, we need to use the Server Object Model to read data, such:

Writing core code is actually very simple, such:

Public void GetDataHtml () {try {string DataHtml = string. empty; string ElementDiv = "<div id = 'demo _ Pro'> <a href = '/Products/Forms/DispForm. aspx? ID = {0} '>  <span> {2} </span> </a> </div> "; SPSite site = SPContext. current. site; SPWeb = site. openWeb (); SPList list = web. lists. tryGetList ("product display"); SPListItemCollection itemcoll = list. items; DataHtml = "<div id = 'demo _ P'> <div id = 'indemo _ P'> <div id = 'demo1 _ P'> "; foreach (SPListItem item in itemcoll) {DataHtml + = string. format (ElementDiv, item. ID. toString (), item. url. toString (), item. title. toString ();} DataHtml + = "</div> <div id = 'demo2 _ P'> </div>"; VWPShowContent. innerHtml = DataHtml;} catch {}}

Right-click the project and publish it:

III,Upload and deploy the sandbox solution and add it to the homepage

After the visual WebPart is published, you find that there is no solution in the website settings. If you do not know why, simply tap the Url, "/_ catalogs/solutions/Forms/AllItems. aspx ";

Insert the WebPart to view the newly added WebPart, for example:

You can see the effect of adding a visual WebPart on the page, for example:

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

Then add the visualized WebPart on the homepage to preview the effect, for example:

Summary

Sandbox solution is a very useful development skill for SharePoint Online. Here we will introduce how to deploy the visual WebPart of SPO through the sandbox solution. In fact, our functions are not complex, javaScript APIs can be used completely, but a sandbox solution is used to introduce similar functions in multiple ways.

Now, let's introduce the product presentation here.