前言

  众所周知,如果我们想向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添加脚本的更多相关文章

  1. 如何在 在SharePoint 2013/2010 解决方案中添加 ashx (HttpHandler)

    本文讲述如何在 在SharePoint 2013/2010 解决方案中添加 ashx (HttpHandler). 一般处理程序(HttpHandler)是·NET众多web组件的一种,ashx是其扩 ...

  2. 为Page添加INotifyPropertyChanged功能

    在Page页面里面, DataContext 更新后,前台数据要求会自动更新. 但前台的绑定如果用x:bind 语法. 它要求强类型.直接关联到DataContext上就不行了. 需要为Page 添加 ...

  3. 通过Arcpy在ArcMap工具箱中添加脚本计算面图层的起终点坐标

    关键词: Arcpy,ArcMap Toolbox, Coordinates of Polygon 需求分析: Arcmap中添加有三个图层:图层“GY乡级河道”(面图层)是全县13个乡镇全部的乡级河 ...

  4. Unity3d创建物体,寻找物体,加载物体,添加脚本

    GetCreateObject: using UnityEngine; public class GetCreateObject : MonoBehaviour { GameObject emptyG ...

  5. xshell添加脚本

    ##### xshell添加脚本```属性连接 - 用户身份验证 - 登陆脚本 - 添加等待:[usmshell]$发送:open 212 //212是指188那台机器的ID再添加一个等待:passw ...

  6. SharePoint 2013 网站定义中添加页面布局

    今天在Visual Studio 2012中将页面布局打包到网站定义中. 新建Module “MasterPageGallary” 在Element中如下: <Elements xmlns=&q ...

  7. SharePoint Online 自定义Modern UI表单

    前言 用过SharePoint Online 版本的朋友们,应该很熟悉SharePoint为我们带来的Modern UI,而这个页面的订制,也跟原来的表单定制方式不同了,而且更加简单了. 而且,试了一 ...

  8. SSIS 通过添加脚本组件 自定义转换数据

    问题:从mysql导入到sql的汉字都是乱码或者干脆导入不成功,报”截断字符串“错误,错在mysql当时建立的都是使用的默认编码latin1;搞不明白,又不是瑞典人,你用这个干毛.导致现在遇到n多问题 ...

  9. 每日学习心得:SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询

    前言: 前一段时间一直都比较忙,没有什么时间进行总结,刚好节前项目上线,同时趁着放假可以好好的对之前遇到的一些问题进行总结.主要内容有使用SharePoint服务端对象模型进行查询.为SharePoi ...

随机推荐

  1. [opencv]approxDP多边形逼近获取四边形轮廓信息

    #include "opencv2/opencv.hpp" #include <iostream> #include <math.h> #include & ...

  2. CS5211设计EDP转LVDSA转接屏|替代LT7211|DP转LVDS屏驱动 转接板

    LT7211是一种用于虚拟现实/显示应用的高性能C/DP1.2至LVDS芯片. 对于DP1.2输入,LT7211可以配置为1.2.4车道,还支持车道交换功能.自适应均衡使其适用于长电缆应用,最大带宽可 ...

  3. CS5211替代PS8625|设计EDP转LVDS转接屏方案|替代PS8625

    PS8625将作为DP或eDP接收器设备出现在视频源中,并将作为LVDS显示面板的LVDS源设备.该设备是一个完全集成的解决方案,不需要外部CPU.内存.时钟基准或电压调节器.PS8625可配置为从显 ...

  4. JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】

    全部章节   >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...

  5. MySQL数据操作与查询笔记 • 【第6章 聚合函数和分组查询】

    全部章节   >>>> 本章目录 6.1 sum.max 和 min 聚合函数 6.1.1 聚合函数介绍 6.1.2 sum 函数 6.1.3 max/min 函数 6.2 a ...

  6. 编写Java程序,用套接字编程模拟实现银行认证过程

    需求说明: 某银行一核心服务器部署了一个资金交易来往的系统,为了防止黑客入侵窃取数据,该银行专门开发了一款负责安全认证的智能机器人守护服务器,对外来访问做多重身份认证.现在要求你用套接字编程模拟实现这 ...

  7. 在Java中为什么不同的返回类型不算方法重载?

    本文已收录<Java常见面试题>:https://gitee.com/mydb/interview 方法重载是指在同一个类中,定义了多个同名方法,但每个方法的参数类型或者是参数个数不同就是 ...

  8. linux的用户主目录(~)指向问题

    最近在Ubuntu上安装rabbitmq之后,发现~目录指向出问题了,原本~指向当前shell登录的用户主目录,如下图 现在变成了这样: 登录之后进入的不是~目录,而是直接显示的主目录,而~指向的目录 ...

  9. [学习笔记] Oracle字符串函数、日期函数、数值函数、转换函数、聚合函数

    函数 单行函数:对一行数据进行操作的函数,如字符串函数.数值函数.转换函数.日期函数等. 聚合函数:同时对多行数据进行操作,如求和函数等. 字符串函数 函数 说明 ASCII(X) 求字符X的ASCI ...

  10. Hadoop常用命令及基本概念

    HADOOP 是什么? 分布式计算开源框架,其核心组件为:HDFS.MAPREDUCE.YARN Hadoop各个功能模块的理解 1. HDFS模块 HDFS负责大数据的存储,通过将大文件分块后进行分 ...