SharePoint Online 为Modern Page添加脚本
前言
众所周知,如果我们想向SharePoint 页面添加脚本,最方便的便是经典页面,添加方式主要有内容编辑器Web部件或者直接使用SharePoint Designer。
但是,如果页面是Modern 页面,我们没办法向里面添加脚本,无论是两种方式都没办法做到。当然,除了SharePoint Framework开发的Webpart。
正文
1.这里,我们就开发了一个基于SharePoint Framework的WebPart,可以帮助我们向SharePoint Modern页面添加脚本,来完成一些需求。
Tips:WebPart的功能非常简单,就是向页面中添加了一个Div元素,ID可以在右侧的属性面板里配置。同时,可以添加一个外部JavaScript文件引用,也是在右侧的属性面板里进行配置。

2.一般来说,我们会在这个引入的外部JavaScript文件中添加我们需要的代码,诸如获取SharePoint Online列表项目,引入JQuery库,等等。
我这里也做了一个简单的例子,就是引用JQuery和SharePoint Plus文件,前者用来操作DOM,后者用来请求数据。
Tips:这里面要说的是loadScript这个方法,是同步添加外部引用其它JS的方法,为的是添加引用以后回调函数,防止异步造成还没添加完引用,就执行了函数。

3.我们可以看一下这个效果,如下图:
1)首先是测试列表的测试数据截图:

2)然后是刚刚进入页面的效果,会是一个loading的效果,一般会有1秒左右的加载时间,当然也取决于你的脚本的功能和逻辑的复杂度:

3)然后是数据加载出来,显示的效果,如下图:

结束语
这个,是霖雨无聊间做的一个小部件,觉得蛮有意思的就分享给大家,有需要的自己可以尝试一下。
Github:linyus/LinyuInjectionScriptWebpart (github.com)
SharePoint Online 为Modern Page添加脚本的更多相关文章
- 如何在 在SharePoint 2013/2010 解决方案中添加 ashx (HttpHandler)
本文讲述如何在 在SharePoint 2013/2010 解决方案中添加 ashx (HttpHandler). 一般处理程序(HttpHandler)是·NET众多web组件的一种,ashx是其扩 ...
- 为Page添加INotifyPropertyChanged功能
在Page页面里面, DataContext 更新后,前台数据要求会自动更新. 但前台的绑定如果用x:bind 语法. 它要求强类型.直接关联到DataContext上就不行了. 需要为Page 添加 ...
- 通过Arcpy在ArcMap工具箱中添加脚本计算面图层的起终点坐标
关键词: Arcpy,ArcMap Toolbox, Coordinates of Polygon 需求分析: Arcmap中添加有三个图层:图层“GY乡级河道”(面图层)是全县13个乡镇全部的乡级河 ...
- Unity3d创建物体,寻找物体,加载物体,添加脚本
GetCreateObject: using UnityEngine; public class GetCreateObject : MonoBehaviour { GameObject emptyG ...
- xshell添加脚本
##### xshell添加脚本```属性连接 - 用户身份验证 - 登陆脚本 - 添加等待:[usmshell]$发送:open 212 //212是指188那台机器的ID再添加一个等待:passw ...
- SharePoint 2013 网站定义中添加页面布局
今天在Visual Studio 2012中将页面布局打包到网站定义中. 新建Module “MasterPageGallary” 在Element中如下: <Elements xmlns=&q ...
- SharePoint Online 自定义Modern UI表单
前言 用过SharePoint Online 版本的朋友们,应该很熟悉SharePoint为我们带来的Modern UI,而这个页面的订制,也跟原来的表单定制方式不同了,而且更加简单了. 而且,试了一 ...
- SSIS 通过添加脚本组件 自定义转换数据
问题:从mysql导入到sql的汉字都是乱码或者干脆导入不成功,报”截断字符串“错误,错在mysql当时建立的都是使用的默认编码latin1;搞不明白,又不是瑞典人,你用这个干毛.导致现在遇到n多问题 ...
- 每日学习心得:SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询
前言: 前一段时间一直都比较忙,没有什么时间进行总结,刚好节前项目上线,同时趁着放假可以好好的对之前遇到的一些问题进行总结.主要内容有使用SharePoint服务端对象模型进行查询.为SharePoi ...
随机推荐
- Docker 与 K8S学习笔记(九)—— 容器间通信
容器之间可通过IP.Docker DNS Server或joined三种方式进行通信,今天我们来详细学习一下. 一.IP通信 IP通信很简单,前一篇中已经有所涉及了,只要容器使用相同网络,那么就可以使 ...
- 【授课录屏】JavaScript高级(IIFE、js中的作用域、闭包、回调函数和递归等)、MySQL入门(单表查询和多表联查)、React(hooks、json-server等) 【可以收藏】
一.JavaScript授课视频(适合有JS基础的) 1.IIFE 2.js中的作用域 3.闭包 4.表达式形式函数 5.回调函数和递归 资源地址:链接:https://pan.baidu.com/s ...
- Mysql 层级无限嵌套
1.新建测试数据 新建channel表 DROP TABLE IF EXISTS channel; CREATE TABLE channel ( id INT(11) NOT NULL AUTO_IN ...
- Codeforces 872B:Maximum of Maximums of Minimums(思维)
B. Maximum of Maximums of Minimums You are given an array a1, a2, ..., an consisting of n integers, ...
- 【Java例题】5.4 排序集合的使用
4.排序集合的使用.使用TreeSet模拟一个一维整数数组.其中,一维整数数组元素由Random类随机产生.最后显示排序后的结果. package chapter6; import java.util ...
- MCMC using Hamiltonian dynamics
目录 算法 符号说明 Hamilton方程 物理解释 一些性质 可逆 Reversibility H的不变性 保体积 Volume preservation 辛 Symplecticness 离散化H ...
- CS5262设计DP转HDMI 4K60HZ +VGA 1080P方案芯片
CS5262是一款带嵌入式MCU的4通道DisplayPort1.4到HDMI2.0/VGA转换器芯片,设计用于将DP1.4信号源连接到HDMI2.0接收器.CS5262集成了DP1.4兼容接收机和H ...
- CS5265完全替代兼容龙迅LT8711|Type-C/DP1.2 to HDMI2.0方案芯片|CS5265兼容TYPEC手机笔电
龙迅LT8711是一款Type-C/DP1.2 to HDMI2.0方案芯片.LT8711HE是一款高性能Type-C/DP1.2至HDMI2.0转换器,设计用于将USB typec或DP1.2源连接 ...
- 编写Java程序,前方有 3km 的道路障碍,4 辆普通车不能通过,必须等到清障车完成作业离开后,才能继续行驶。用程序来模拟这一过程的发生
查看本章节 查看作业目录 需求说明: 前方有 3km 的道路障碍,4 辆普通车不能通过,必须等到清障车完成作业离开后,才能继续行驶.用程序来模拟这一过程的发生 实现思路: 创建清障车Wrecker类和 ...
- haproxy常用配置
haproxy 理论 它可以反向代理http/tcp协议,七层和四层的负载均衡解决方案 七层的负载解决方案是因为他们支持高级特性,工作在用户空间,请求从用户空间转换到内核空间是非常浪费硬件资源的. h ...