65.9K
CodeProject 正在变化。 阅读更多。
Home

SharePoint 2013: Angular 1.x & Bootstrap Slider

John Gough
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2016 年 6 月 10 日

CPOL

3分钟阅读

viewsIcon

14438

downloadIcon

5

SharePoint 2013 的 Angular SPA Bootstrap 图片滑块

引言

本文旨在提供在受限的 SharePoint 托管环境中使用 AngularJS 1.x 和 Bootstrap 的指导和见解。您是否在不允许加载项和解决方案的 SharePoint 环境中工作？人们喜欢的一个常见 UI 元素是图像滑块。本文提供了一个示例，说明当您确实“需要”在 SharePoint 页面上添加一些很酷的东西时，如何在受限的开发环境中执行此操作。以下代码旨在作为一个起点。可以通过操作 JavaScript 代码和 CSS 规则对滑块进行重大更改。任何与 Angular 指令或 Bootstrap 库/CSS 不相关的列名或其他标签都可以更改，以更好地适应您的使用场景。“<”和“>”符号表示特定于您的环境的内容（例如，URL 和 GUID）。

背景

随着 SharePoint 2016 即将到来，迁移到 Office 365 是一些公司的认真考虑，以及不“重新编码”应用程序的愿望，这些公司反对解决方案和功能开发。 此外，创建和投资加载项开发对某些人产生了“又一个 Silverlight”的影响。 开发人员最初可能会将这种不安体验为彻底的令人失望，但有一个解决方案。 我的首选解决方案是创建 Angular 单页应用程序 (SPA)。 Angular2 具有革命性，但 1.x 仍然可以满足您的大部分需求。 借助 AngularJS Bootstrap 和 2013 REST API，您可以实现的目标几乎没有限制。 我的座右铭是使用 SharePoint 基础功能（安全权限、列表等）并使用 JavaScript 呈现 UI 元素。

要求

  1. angular.js (建议最小化)
  2. bootstrap.js (建议最小化)
  3. bootstrap.css (建议最小化)
  4. 具有以下附加列的 SharePoint 图片列表
    • Comment：单行文本
    • LinkURL：超链接或图片
    • ListOrder：选项（添加从 0 开始的数字）
    • Initiative：查找（此列将提供查询字符串关联 - 根据需要）

Using the Code

节省时间的一个好方法是尽量减少对基本 Bootstrap css 的修改。 但是，根据您的需要，您可能会发现这是一件不可能的事情。 避免修改 Bootstrap 文件，并将所需的更改添加到您的 SPA。

<style type="text/css">
.carousel { }
.carousel-indicators li {background-color: #000\9; border: 1px solid #000000 !important;}
.carousel-indicators .active {background-color: #000000 !important}
.carousel-caption {color:#000000 !important; text-shadow:none !important; padding-top:0px !important}
.outlineMyCarousel {border: 1px solid #808080!important; padding:1px !important}
</style>

通常，我会将 JavaScript 函数和变量分离到单独的“实用程序”文件中，但为了简单起见，在本文中，我将 JavaScript 与使用的 AngularJS 结合在一起。

请参阅

<script type="text/javascript">
//openNewSliderImageDialog calls the dialog window for the image file upload target URL
function openNewSliderImageDialog(tUrl, tTitle) {
var options = {
url: tUrl,
title: tTitle
}; SP.UI.ModalDialog.showModalDialog(options);
}
//getParameterByName is used to extract querystring values later used 
//to associate with a SharePoint list column field value
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
//cd1 is the location of the images used for the slider (images should be the same size)
var cd1 = 'SliderImages/Forms/Thumbnails.aspx';
//initiativeName calls the querystring value that will be used to display the appropriate images
var initiativeName = getParameterByName('Init');
//listTitle is the name of the SharePiont list where images are uploaded
var listTitle = 'SliderImages';
//dTarget is the dialog id
var dTarget = '#myCarousel';
//spDomain is the root URL
var spDomain = "https://oursites.myngc.com/ENT/Innovation/";
//imgSource is the slider image URL before the image name
var imgSource = spDomain + 'SliderImages/';
// ************* Angular code starts here *******************
//sliderApp must be referenced in the html script
var app = angular.module('sliderApp', []);
//sliderCtrl must be referenced in the html script
app.controller('sliderCtrl', function ($scope, $http, sliderSvcs) {
//$scope objects are the {{referenced}} in the html script
$scope.CurrentReviewDate = new Date();
$scope.dTarget = dTarget;
//getEntries returns the data array to object sliderItems
sliderSvcs.getEntries(listTitle).then(function (result) {
$scope.sliderItems = result;
});
$scope.srcURL = spDomain;
$scope.imgSource = imgSource;
$scope.cd1 = $scope.srcURL + cd1;
});
//sliderSvcs must be added as a dependancy to sliderCtrl
app.service('sliderSvcs', ['$http', '$q', function ($http, $q) {
//header values required for SharePoint integration
$http.defaults.headers.common.Accept = "application/json;odata=verbose";
$http.defaults.headers.post['Content-Type'] = 'application/json;odata=verbose';
this.getEntries = function (listTitle) {
var dfd = $q.defer();
$http.defaults.headers.post['X-HTTP-Method'] = ""
//query statement calls list fields to be used, lookup list (xxx/xxx) values via expand, 
//orders by list field value "ListOrder" and filters via the list 
//field value identified in the query string [review SharePoint REST API]
var query = "?$select=Author/Title,Initiative/Title,FieldValuesAsText/FileRef,
ListOrder,Title,Comment&$expand=Author,Initiative,
FieldValuesAsText&$orderby=ListOrder asc&$filter=Initiative/Title 
eq '" + initiativeName + "'";
var restUrl = spDomain + "_api/web/lists/getByTitle
('" + listTitle + "')/items" + query;
$http.get(restUrl).success(function (data) {
dfd.resolve(data.d.results);
}).error(function (data) {
dfd.reject("error getting items");
});
return dfd.promise;
}
}]);
</script>

最后，是 html 组件。

<!--Angular and bootstrap references are integrated into html-->
<div ng-cloak ng-app="sliderApp" ng-controller="sliderCtrl">
<div>
<a href="#" onclick="openNewSliderImageDialog
('<mydomain>/_layouts/15/Upload.aspx?List={<sliderPhotoListGuid>}
&RootFolder=&IsDlg=1','New Slider Image');
" style="height: 30px; width: 30px;" 
data-toggle="tooltip" data-placement="left" 
title="Add a new Slider Image">
<i class="fa fa-plus-square-o fa-2x" 
aria-hidden="true"></i></a>
<a id="sliderList" ng-href="{{cd1}}" 
data-toggle="tooltip" 
data-placement="left" title="View Slider Image list">
<i class="fa fa-list fa-2x" aria-hidden="true" 
style="height: 30px; width: 30px;"></i></a>
</div>
<div id="myCarousel" 
class="carousel slide outlineMyCarousel" data-ride="carousel">
<ol class="carousel-indicators" style="color: #000000 !important">
<li ng-repeat="item in sliderItems" data-target="{{dTarget}}" 
data-slide-to="{{item.ListOrder}}" 
ng-class="{active:!$index}"></li>
</ol>
<div class="carousel-inner">
<div class="item" 
ng-class="{active:!$index}" ng-repeat="item in sliderItems">
<img ng-src="{{item.FieldValuesAsText.FileRef}}" alt="" 
class="img-responsive" style="min-height: 200px; min-width: 300px !important; 
max-height: 200px; min-width: 300px; text-shadow: none !important" />
<div class="carousel-caption">
<h3>{{item.Title}}</h3>
<p>{{item.Comment}}</p>
<p><i>-{{item.Author.Title}}</i></p>
</div>
</div>
</div>
<a class="left carousel-control" 
href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" 
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" 
href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" 
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

关注点

使用 REST API 访问 SharePoint 列表数据为我们带来了比我们看到的更多的数据。 在 XML 中查看您的数据，然后尝试使用 RoleAssignments、AttachmentFiles、ContentType
FieldValuesAsHtml、FieldValuesAsText 和 FieldValuesForEdit。 与操作查找数据类似，当您引用这些来源时，您通常会找到您需要的内容。 了解我在上面的代码中如何使用“FieldValuesAsText/FileRef”。 考虑以下事项

  1. 访问您的 REST API 的 XML (例如，<mydomain>/_api/web/lists/getByTitle('Announcements')/items)
  2. 请参阅文章：在使用 REST 过滤文档库时获取文档名称（而非标题） http://sharepoint.stackexchange.com/questions/126003/getting-document-name-using-rest-not-title-while-filtering-document-library
  3. 请参阅文章：了解 SharePoint 2013 REST 服务
    https://msdn.microsoft.com/en-us/library/office/fp142380.aspx
  4. 请参阅文章：使用 AngularJS 加速 SharePoint 开发
    http://www.sharepointbriefing.com/spcode/accelerate-sharepoint-development-with-angularjs.html

SharePoint 集成

  1. 将 SPA 文件（例如，imageSlider.html）放在 SharePoint 文档库中，例如 https://<mydomain>/Style%20Library/
  2. 将所需的参考库放在 SharePoint 文档库中，例如 https://<mydomain>/Style%20Library/js/
  3. 在将显示滑块的页面上
    • 将所需的引用放在脚本编辑器中。 <script src="<mydomain>/Style%20Library/js/jquery-1.12.0.min.js"></script> <script src="<mydomain>/Style%20Library/js/bootstrap.min.js"></script> <link href="<mydomain>/Style%20Library/css/bootstrap_custom.min.css" rel="stylesheet" />
    • 在您希望滑块出现在 SharePoint 页面布局上的位置插入内容编辑器 Web 部件 (CEWP)，将 SLA 文件的 URL 插入内容链接元素中，并将 Chrome 类型设置为 None（如果需要）。

© . All rights reserved.