前 言
创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式、自带WebPart方式和JavaScript读取后台数据前台做展示的三种;
但是,对于复杂的展示来说,这些方式还是会比较难以实现,虽然对于首页的图片轮播来说,通过JavaScript方式已经完全能够胜任,但是,我还是想通过这个栏目,为大家介绍如何使用沙盒解决方案创建WebPart,来完成更加复杂的前台展示。
下面,让我们开始在SharePoint Online的门户网站中创建沙盒解决方案吧 。
一、 SharePoint Online 为滚动图片创建图片库
为产品展示创建一个图片库,用来存储信息,如下图:
创建一个多行文本字段,用来存储描述,记得最好先英文,改中文,如下图:
上传几张产品展示的图片,我这里没有什么图片,就随便上传了几张平遥古镇的图片,如下图:
二、在Visual Studio中创建沙盒解决方案的WebPart
先创建一个空的SharePoint 项目,如下图:
记得选择沙盒解决方案,上面是调试站点,如下图:
在项目中添加一个项目,如下图:
选择可视化WebPart,命名为VWPShow,VWP是Visual WebPart的缩写,方便我们知道这是个可视化WebPart;如果是WebPart,我一般命名WP开头;
一般,最好重命名一下Feature的名字,如果是Feature1这样的名字,将来维护起来实在是麻烦,如下图:
同时,修改Feature的Title,最好也写一点Description,方便激活的时候认识和查找,如下图:
还有一定要确定,我们添加的可视化WebPart,在Feature里面,否则部署上去,可能会发现激活Feature没有部件,因为我们根本没加进去。
我记得中文版VS会自动加进去,英文版不会自动添加,大家注意吧;
然后在可视化WebPart的前台页面上,添加div、脚本、样式,如下图:
然后添加一个获取数据,组成Html的方法,在页面加载的时候执行一下,如下图:
然后,在头部加上Microsoft.SharePoint;的引用,因为默认没有引用,而我们要用服务器对象模型读取数据,如下图:
编写核心代码,其实很简单,如下图:
public void GetDataHtml() { try { string DataHtml = string.Empty; string ElementDiv = "<div id='demo_pro'><a href='/Products/Forms/DispForm.aspx?ID={0}'><img src='{1}' border='0' width='160px' height='120px' /><span>{2}</span></a></div>"; SPSite site = SPContext.Current.Site; SPWeb web = site.OpenWeb(); SPList list = web.Lists.TryGetList("产品展示"); SPListItemCollection itemcoll = list.Items; DataHtml = "<div id='demo_p'><div id='indemo_p'><div id='demo1_p'>"; foreach (SPListItem item in itemcoll) { DataHtml += string.Format(ElementDiv, item.ID.ToString(), item.Url.ToString(), item.Title.ToString()); } DataHtml += "</div><div id='demo2_p'></div></div></div>"; VWPShowContent.InnerHtml = DataHtml; } catch { } }
然后在项目上右键,发布一下,即可:
三、上传部署沙盒解决方案,并添加到首页栏目中
可视化WebPart发布完毕,发现网站设置里,没有解决方案这一选项了,不知道何原因,索性直接敲Url,“/_catalogs/solutions/Forms/AllItems.aspx”;
然后插入WebPart中,可以看到我们新添加的WebPart了,如下图:
添加到页面上,就可以看到我们添加可视化WebPart的效果,如下图:
然后在页面上删掉原来的Html静态内容,添加WebPart Zone,在Ribbon菜单上插入选项卡,如下图:
然后在首页添加这个可视化WebPart,即可,预览效果,如下图:
总 结
沙盒解决方案是SharePoint Online非常有用的一项开发技能,这里我们介绍的是通过沙盒解决方案部署SPO的可视化WebPart,其实我们的功能并不复杂,完全可以用JavaScript API来完成,但是为了介绍多种方式完成类似功能,还是用了一下沙盒解决方案。
好了,产品展示就介绍到这里吧。