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版本一个体系的。

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

目录
相关文章
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
|
11月前
|
Linux Android开发 iOS开发
深入探索Android与iOS的多任务处理机制
在移动操作系统领域,Android和iOS各有千秋,尤其在多任务处理上展现出不同的设计理念和技术实现。本文将深入剖析两大平台在后台管理、资源分配及用户体验方面的策略差异,揭示它们如何平衡性能与电池寿命,为用户带来流畅而高效的操作体验。通过对比分析,我们不仅能够更好地理解各自系统的工作机制,还能为开发者优化应用提供参考。
|
消息中间件 NoSQL Java
Redis Streams在Spring Boot中的应用:构建可靠的消息队列解决方案【redis实战 二】
Redis Streams在Spring Boot中的应用:构建可靠的消息队列解决方案【redis实战 二】
8176 1
|
Cloud Native Java Shell
开发者如何使用云原生多模数据库 Lindorm
【10月更文挑战第3天】开发者如何使用云原生多模数据库 Lindorm
568 4
|
机器学习/深度学习 自然语言处理 异构计算
预训练与微调
预训练与微调
857 5
|
Java Docker 容器
Docker SpringBoot Skywalking 8.1 agent
Docker SpringBoot Skywalking 8.1 agent
175 0
|
Java 数据处理 开发者
【Java基础面试十二】、说一说你对面向对象的理解
这篇文章阐述了面向对象是一种以类和对象为基础,通过封装、继承和多态等概念来模拟现实世界中的事物及其相互关系的程序设计方法,它强调以事物为中心进行思考和系统构造,与结构化程序设计相比,更符合人类的自然思维方式。
【Java基础面试十二】、说一说你对面向对象的理解
|
前端开发 JavaScript 定位技术
关于IOS10系统内微信公众号地图的显示问题
关于IOS10系统内微信公众号地图的显示问题
138 0
|
测试技术
UnitTest----UnitTest自动化测试框架结合数据驱动(DDT)应用实践
UnitTest----UnitTest自动化测试框架结合数据驱动(DDT)应用实践
194 0
|
运维 前端开发 中间件
浅出:让 React 插上 Serverless 翅膀,飞向云端
Midway FaaS 不仅仅在函数侧提供了能力支持,也在前端部分整合了体验。经过我们一段时间的实践,发现前端代码 + FaaS 代码真是天然的绝配,比传统应用轻量许多,同时, 由于函数本身的特性,也更容易和前端配合起来。 Midway FaaS已经接入阿里云云开发平台,可以在上面简单的发发发,一个 Web 栈应用就搭建完成了,同时还提供了百万代金券补贴。
1433 0
浅出:让 React 插上 Serverless 翅膀,飞向云端