SharePoint Online Create Portal Series creation column

Source: Internet
Author: User

? Preface

SharePoint Online column, a simple description is displayed on the first page of the various module information, here, we mainly introduce the column on our homepage, including the type of introduction, News list type, picture type;

Below, let's start by creating a column in the portal site for SharePoint Online.

A. SharePoint Online creates a list for columns

Create a list of news centers, such as:

We create a content (multi-line) field to hold the content of the news:

Create a contact us list, such as:

field: Contact person, phone, mobile phone, zip code, URL, type are single-line text;

Second, SharePoint Online display column on the first page

First of all, on the home page on the location of the modules, insert WebPartZone, in the future to insert WebPart use, the special table to say, save the page before you can add WebPartZone, such as:

Company Profile – Content Editor

Open the Home page and add a content editor part on the WebPartZone, such as:

Select the Company Profile WebPart, click on the Ribbon menu above the edit source, add HTML code, because it is static text, the modification frequency is very small, so here add static content, such as:

Add finished HTML effect, if you need to modify the future, edit the page, modify the HTML code can be seen as the resulting way, to edit, the effect such as:

News Center – Parts

Add a Web Part to the News center and select the news center, such as:

Create a view in the News center list as the data source for the news Center application;

Select Create based on all projects, such as:

The column in the view selects the title we want to show (this is not the case , it is later linked to the title of the project, because it needs to be clicked), the creation time, such as:

The changes are sorted to be sorted by creation time, and of course we can modify them for other sorts, such as:

The project limit selects 5, according to the need limit can, for example:

The table view removes the check box so that there is no check box in front of the selected item, such as:

Modify the properties of the News Center Web Part, modify the view for the first page we just created, and modify the toolbar type to have no toolbars, such as:

After the changes are completed, the News Center effect is as follows:

We also need to hide the title bar and page, and then use CSS or JavaScript to adjust the style, here is the content of the front desk, we do not introduce more.

Contact Us –javascript

The first step is to write a script that reads the list information, as follows:

Then add a script call on the page, as shown in the red box:

Using JavaScript to read the contact us, the content has come from the list, such as:

At this point, the first page of four columns, through different ways to add to show has been introduced;

  ? Company profile through the Content editor directly fill in the page, modify the time to edit directly;

  ? The News center uses the own application, reads from the definition good view, uses the CSS way to decorate;

  ? Contact us use the JavaScript object model to read from the list and show it;

  ? Product Showcase, the previous blog has been introduced, through the sandboxed solution Deployment WebPart to display;


In fact, the addition of navigation in SharePoint online is very similar to the server version, either by using the self-contained navigation to modify the style or by using custom navigation, saving the list of data, or saving it as XML in the document library. Then the foreground is displayed by reading the navigation in JavaScript or the Shahe solution.

Well, the custom navigation for SharePoint online, we introduce here, next, we will introduce the portal site to create columns.

SharePoint Online Create Portal Series creation column

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.