SharePoint 2013 App 示例之图片墙

  应用程序实质上是 Web 应用程序。假若你明白如何变化 Web
应用程序,则您就清楚什么生成 SharePoint
相关应用程序。您可以动用别的语言,如 HTML、JavaScript、PHP 或
.NET,并且您可以采用喜爱的 Web 开发工具(包蕴 Microsoft Visual Studio
2012和根据 Web 的新工具 “Napa”Office 365 开发工具)以生成 SharePoint
相关应用程序。

  云应用程序模型支撑分层的种类布局,在此系统布局中,可以将应用程序的工作逻辑、数据和用户界面
(UI)
分配到独门的零件中。您可以利用专门为开发该层而规划的开发工具,而不是选用通用工具。

  Ø
SharePoint 托管的应用程序

  假如在 SharePoint 本身中托管应用程序,则代码为 HTML 和 JavaScript
并由 SharePoint 托管。

  Ø
提供商托管和自动托管的应用程序 – 在云中

  对于自动托管的应用程序(仅可安装在 Microsoft SharePoint Online
上),SharePoint 会将应用程序自动陈设到 Windows Azure 网站和 SQL Azure
中,这个应用程序在云中运行。

  对于提供商托管的应用程序,您或你的 IT
部门可以在专用服务器或第三方托管服务上托管应用程序。那几个应用程序在服务器上或在云中运转,具体取决于你选拔托管应用程序的点子。

  Ø 具有
SharePoint
中的组件以及云中的零部件的应用程序

  SharePoint 组件在 SharePoint 中运作,云中托管的组件在云中运转。

  1、创设一个“SharePoint 2013
应用程序”,如下图,新建Office/SharePoint的体系,拔取应用程序;

图片 1

  2、新建SharePoint相关应用程序向导,如下图,输入app名称,调试站点,怎么样托管应用程序,那里大家挑选SharePoint托管;

图片 2

  3、创造落成,查看解决方案的构造,Content里面是Css文件、Xml文件等,Images里面是图片素材和Flash等,Scripts里面是本子,包罗JQuery的引用和大家团结一心须要拔取的剧本引用,还有app.js的引用;

图片 3

  4、为SharePoint托管的app创造一个列表,用来储存大家的数据。这一成立进度,和开销SharePoint其余解决方案中成立列表是一致的,如下图,输入项目名称:

图片 4

  5、SharePoint创立列表向导,输入列表名称和急需持续的沙盘,那里大家选拔自定义列表即可;

图片 5

  6、为大家的自定义列表创制八个字段,分别是PicUrl和Description,分别是图片墙的图样地址和图表描述,自带的标题字段是图形的标题;

图片 6

  7、为自定义列表的实例,添加默许的内容,如下图的xml结构,首先是List也就是列表的定义,然后是Data能够精晓数据,然后是Rows和Row代表每一个列表项,最终是字段Field,字段体贴一个性质就是字段名,里面的值就是字段的值了;

  越发要说的是,若是字段的值须求使用HTML描述,需倘若CDATE[]本条标志括起来,具体请参见XML的施用

图片 7

  8、在筹划和形成列表实例未来,我们须要的就是在Default.aspx页面上写HTML,然后在App.js里面写JS代码了;这一部分必要参考MSDN关于ECMAScript客户端对象模型的介绍,大家要做的就是读取列表里的富有项,然后拼成HTML使用JavaScript脚本的艺术举行照片墙浮现;废话不多说了,依然贴代码吧!

  简单介绍一下上边的代码,就是一个赢得照片墙的JS方法,客户端对象模型load成功了实施onSuccess方法,load失利了则举行onFail方法并出口错误新闻;大家可以看看JS和SOM的不二法门很相近,上来取得当前目标,然后是得到web,这几个办法在msdn中我们都足以查到方法介绍,甚至于例子;

// 此代码在 DOM 准备就绪时运行,并且可以创建使用 SharePoint 对象模型所需的上下文对象
$(document).ready(function () {
    getPicWall();
});

function getPicWall() {
    var ctx = new SP.ClientContext.get_current();
    var web = ctx.get_web();
    var list = web.get_lists().getByTitle('PictureWall');//获取特定的文档库
    var query = SP.CamlQuery.createAllItemsQuery();
    allItems = list.getItems(query);
    ctx.load(allItems, 'Include(Title,PicUrl,Description)');//载入特定列
    ctx.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFail));
}

function onSuccess(sender, args) {
    var htmlstr = "";
    var ListEnumerator = this.allItems.getEnumerator();
    while (ListEnumerator.moveNext()) {
        var currentItem = ListEnumerator.get_current();//获取当前项
        htmlstr += "<li><img src=\"" + currentItem.get_item('PicUrl') + "\" data-img=\"" + currentItem.get_item('PicUrl') + "\"/><div><h2>" + currentItem.get_item('Title') + "</h2><p>" + currentItem.get_item('Description') + "</p></div></li>";
    }
    $("#iw_thumbs").html(htmlstr);
}

function onFail(sender, args) {
    alert('Error:' + args.get_message());
}

  9、当然,页面上还有照片墙显示的HTML和JavaScript,这几个不是我们App实例的显要,所以就不贴那段代码了,大家看看展现的功能呢!

图片 8

  10、当然,我觉得下面SharePoint自带的Ribbon菜单分外难看,所以就用样式去掉了;

<style type="text/css">
    #s4-titlerow {
        display: none !important;
    }
    #suiteBar {
        display: none !important;
    }
    #s4-ribbonrow {
        display: none !important;
    }
</style>

  下图是去掉Ribbon将来的Default页面,看起来清爽多了!

图片 9

  11、在创设完SharePoint 2013 App将来,我们得以上传到App
CateLog中,分发给应用程序下的依次网站集,如下图,打开应用程序目录:

图片 10

  12、点击网站内容,进入适用于SharePoint的应用程序,将SP2013PictureWallApp.app上流传那里;

图片 11

  13、上传落成,可以见见大家上传的app以及部分关于app的版本新闻等;

图片 12

  14、打开一个改应用程序下的站点,点击站点内容,来自您的团伙;

图片 13

  15、可以观看大家开发的app了,点击,即可添加;

图片 14

  16、信任大家自定义开发的app,如下图;

图片 15

  17、信任未来,如下图突显正在增进,不必刷新,稍等片刻会添加落成,变成和其余app一样的金科玉律;

图片 16

  18、查看大家app的意义,如下图:

  特其余,本土应该是Gif动态效果,不过在此处可能来得不出来,表示有点缺憾!

图片 17

  效果解释:点击图会突显图片的详细消息,包含图片、标题、描述七个信息;可以重复点开打开页中的图片,会显示那张图纸。

  19、效果截图呈现,如下图:

图片 18

  20、特其余,大家得以查看大家插入的列表,不过只能够手动敲URL的款式,除非您把那个Url输出到Default.aspx做成超链接;

图片 19

  以上便是SharePoint
App开发进度的一个粗略示例,我驾驭就是讲需求的JS引用,图片素材,样式表等资源,首先拷贝的SharePoint
App的解决方案中;然后在Css中编辑样式,在JS中编辑脚本,使用REST服务依然ECMAScript客户端对象模型和SharePoint交互,结合使用JQuery或者JavaScript或者其他第三方脚本。

  当然,那里介绍的只是是SharePoint 2013 App的一个大约示例,SharePoint
App应该还足以形成更复杂的事物,甚至于包装一个不分外复杂的作业种类,然后在应用程序目录中散发给各样站点使用。

  好了,前些天的SharePoint 2013
App图片墙的以身作则,就介绍到此地,上面看看动态的Gif图,来赏析下这些大概而漂亮的App吧!

SharePoint客户端对象模型

http://technet.microsoft.com/zh-cn/library/jj163201

wsp解决方案包下载

http://files.cnblogs.com/jianyus/SP2013PictureWallApp.rar