SharePoint Online 创建门户网站系列之定制栏目

简介: 前 言   SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受。   下面,我们就开始学习如何定制SPO的二级页面和详细页面。

  SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受。

  下面,我们就开始学习如何定制SPO的二级页面和详细页面。

一、 SharePoint Online定制列表的二级页面

  在“新闻中心”的列表页创建一个视图,用来当做二级页面,如下图:

clip_image001

  视图类型,选择 基于所有项目创建一个新的视图,如下图:

clip_image002

  输入视图名称为“新闻中心”,同时设置为默认视图,如下图:

clip_image003

  选择栏,我们选择标题,当然后面如果有其他需要,我们还可以继续修改,如下图:

clip_image004

  设置排序,让最新发布的新闻,显示在最上面,如下图:

clip_image005

  设置表格视图,去掉选项,这样就没有了每个项目前面的复选框,如下图:

clip_image006

  修改视图的网址,这样就不会显示View1这样不容易理解的名字了,如下图:

clip_image007

  在Designer中打开网站,编辑新闻中心列表下面视图,如下图:

clip_image008

  在视图下文件上,右键在高级模式下编辑文件,如下图:

clip_image009

  修改母版页,修改为我们自定义的母版页,如下图:

clip_image010

  在浏览器中预览,然后修改html,如下图:

clip_image011

  简单调整一下样式,如下图:

  其实右侧部分还可以继续使用css或者JavaScript优化,但是因为demo一下,自己也没花费太多时间进行优化;

clip_image012

 

二、 SharePoint Online定制列表的详细页面

  首先看看SharePoint Online默认的详细页展示,如下图:

clip_image013

  如上图的展示,我们可以说是没办法接受,太难看了,下面,我们用Designer定制一下这个页面。首先Designer打开新闻列表,然后找到DispForm页面,右键用高级模式打开:

clip_image014

  打开页面以后,首先修改母版页,如下图:

clip_image015

  插入显示列表表单,如下图:

clip_image016

  在Ribbon菜单上选择“添加和删除列”,显示标题、内容、创建时间和创建者,如下图:

clip_image017

  修改DispForm页面的如下HTML,即可修改展示,如下图:

clip_image018

  然后大家可以看到我修改后的效果,不是特别好看,但是比默认好看很多,如下图:

clip_image019

  除了修改了页面样式,还需要创建筛选,否则页面只显示第一条信息,点击Ribbon菜单上的筛选,如下图:

clip_image020

  在弹出的筛选条件上,选择ID,并且新建参数,如下图:

clip_image021

  添加一个名称为ID的参数,参数源选择查询字符串,查询字符串变量为ID,如下图:

clip_image022

  而后点击确定,即可。这时候切换DispForm页上的ID,页面上的内容就会跟着切换了。选择ID为2就不是刚刚ID=1的测试数据了,如下图:

clip_image023

  其实,SharePoint Online中页面定制的方法,跟SharePoint Server版本基本一致,都是通过Designer去定制,做起来也很方便美观。这也说明,SharePoint Online是根据Server版本一个体系的。

  好了,很晚了,就到这里,休息,休息一下。

目录
相关文章
|
存储
SharePoint Online 创建网站集
  前言   本文介绍如何在Office 365中创建SharePoint网站集。   正文   通过登录地址登录到Office 365环境中,我们可以在左上角的按钮中点开,进入管理员,也可以直接在页面中点击管理;   登录地址:https://login.
1725 0
SharePoint Online 设置网站集
  前言   本文介绍如何在Office 365中设置SharePoint Online网站集,当我们创建好SharePoint Online站点,开始使用之前,一定会有一些基本的设置,本文就为大家介绍这些基本的设置。
1457 0
|
网络架构
SharePoint 2013 开发——其他社交功能
博客地址:http://blog.csdn.net/FoxDave 上一篇讲了如何获取用户配置文件的相关属性,它属于SharePoint 2013社交功能的一个小的构成部分。
1022 0
|
JavaScript 前端开发 数据格式
SharePoint Online 创建门户网站系列之创建栏目
前 言   SharePoint Online的栏目,简单描述即显示在首页上的各个模块信息,这里,我们主要介绍我们首页上的栏目,包括简介类型、新闻列表类型、图片类型;   下面,让我们开始在SharePoint Online的门户网站中创建栏目吧 。
1376 0
|
存储 JavaScript 数据可视化
SharePoint Online 创建门户网站系列之图片滚动
前 言   创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式、自带WebPart方式和JavaScript读取后台数据前台做展示的三种;   但是,对于复杂的展示来说,这些方式还是会比较难以实现,虽然对于首页的图片轮播来说,通过JavaScript方式已经完全能够胜任,但是,我还是想通过这个栏目,为大家介绍如何使用沙盒解决方案创建WebPart,来完成更加复杂的前台展示。
1579 0
|
JavaScript 前端开发
SharePoint Online 创建门户网站系列之导航
前 言   关于SharePoint Online中的导航,基本是由Html + Css + JavaScript组成效果以及样式,然后在后台列表或者SharePoint Online元数据导航当做数据源进行展示,通常数据源为列表的我们称之为自定义导航。
1459 0
|
Web App开发 前端开发
SharePoint Online 创建门户网站系列之首页布局
前 言   SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Online的资源库,在Designer中创建页面,添加Html页面,修改引用。
1469 0