2016年12月2日,星期五

We’re starting to write production code on the SharePoint框架 现在. Should you?

I’ve been writing 和 speaking on the SharePoint框架 (SPFx) for a while 现在, but in 许多 ways it’到目前为止,一切都有些理论化。毕竟,在撰写本文时(2016年12月上旬),SPFx仍处于预览阶段,预计将很快提供一般可用性。但是,我’我开始意识到我们正在为客户指定和构建一些Web部件 现在 actually need to be done 在里面Framework. 的principal reason for 这个 是 that we need them to work in 现代页面 – 和 web parts developed using previous approaches way will not work there. On 这个, I’ve been using 这个 slide recently to explain what works where:

图片

Essentially, a 现代 (SPFx) web part can work in both 现代 和经典 pages. But a 经典 web part can only work in 经典 pages.

让’明确我们的意思是:

Modern pages use 现代 web parts
现代页面不能使用任何“classic”Web部件,包括“内容编辑器” Web部件,“脚本编辑器” Web部件,“内容搜索” Web部件,“内容查询” Web部件或基于这些部件之一的任何自定义Web部件。这意味着我们所有现成的Web部件’这些页面无法使用SharePoint中常用的功能。 Microsoft提供了一个新的OOTB Web部件系列,这些产品既可以满足许多常见需求,也可以解决较新的情况(例如,用于嵌入Power BI报告的Power BI Web部件)。
 
这也意味着“cloud-friendly”使用通用的自定义Web部件“脚本编辑器/内容编辑器Web部件+ JavaScript”嵌入方法将不起作用’s current form – 怎么样ever, I’d希望Microsoft至少提供一种等效的方法,以轻松地将JS添加到页面中,例如一个类似于脚本编辑器的新Web部件)。也许他们’甚至可以走得更远,并提供一种迁移此类Web部件的零摩擦方式?

So, 这个 是 kind of a big deal. Of course, the other aspect to consider 是 怎么样 much of a problem all 这个 是..

How prevalent are 现代页面? Which pages are 现代 ?

正如我在上一篇文章中提到的 Modern SharePoint pages 和 team 新闻 pages - 怎么样 to query/search for them, the new team 新闻 feature uses 现代页面 和 it’s 现在 the default when a new page 是 created. A more complete list of 现代页面 might be:

  • 使用“Add page”菜单项(从现在开始)
  • Any team 新闻 page
  • 现代化的列表/库页面(但目前无法扩展)–无法添加Web部件)
  • 的Office 365 profile page (but currently not extensible –无法添加Web部件)
  • Delve博客页面,尽管这些页面风格(稍早)有所不同

您 can IDentify a 现代 page quite easily –它显示了网站徽标,细长的工具栏,然后是包含页面标题的高大横幅:

SNAGHTML26d35183

Of course, Microsoft might update 这个 look 和 feel 在 some point, but that’s 怎么样 it 是 for 现在.

新的web part picker

At the heart of the matter 是 the new web part picker. When you edit a 现代 page 和 go to add a web part, you’ll see 这个 和 it’比以前更简单的体验–无需与功能区搏斗,无需浏览从未使用过的许多类别的Web部件:

图片

图片

当然,我在哪里’m getting to with 这个 是 that only Microsoft’s new web parts 和 our web parts developed 在里面SharePoint框架 will show up here. It’值得熟悉这些Web部件,因为它们是新的构建基块–但请注意,不久之后将添加更多内容,例如Power BI Web部件(如果以简单或自动的方式进行身份验证,则可能会很棒)。还考虑新的“突出显示的内容” Web部件– 这个 是 a 现代 version of something approaching the Content Search web part, but it 没有’相当有力量。它*(*)更(*)更容易使用,并且根据我与最终用户的经验,我认为这确实是Microsoft所必须遵循的方向。

要考虑的另一件事是,使用新的Web部件选择器时,以前需要 将Web部件添加到当前网站集的Web部件库中 没有’t necessarily still need to be the case. In the SharePoint框架, the requirement 是 currently that the app package must be installed to the App Catalog 和 for the app to be installed to the site –Web部件库中没有任何内容。但是SPFx仍在预览中,Microsoft在此处提供了一些选项-看到一旦达到“一般可用性”,事情将在哪里结束将很有趣。

概要

因此,一个新的页面和Web部件模型。我们’到目前为止,新页面主要应用于SharePoint团队网站,但我认为’很明显,发布站点将来会收到类似的更新。到那时’可以期待再次只有Microsoft’的新Web部件和SPFx Web部件将在这些页面中运行。这里的主要信息是现代页面开始流行(并且是默认页面),并且用户正在使用它们– so if you’重新自定义SharePoint或基于Web部件添加新功能,如果您的Web部件在这里不起作用,您可能很快就会遇到问题。这促使我们使用SPFx创建新的Web部件,也许您也应该这样做。只要确保您有一个后备计划,以防时间表不对’t align –例如,您需要使Web部件在完全生产模式下可用(并得到完全支持),然后Microsoft才能在非第一版租户中获得SPFx常规可用性。

2016年11月24日星期四

Modern SharePoint pages 和 team 新闻 pages - 怎么样 to query/search for them

Modern pages are 现在 in SharePoint team sites in Office 365, 和 这个 includes the new “team 新闻” facility. This 是 a simple way of creating 新闻 articles within a team site - it’s no replacement for an organization-wide intranet 新闻 facility, but it 对于团队在团队中传达新闻或其他信息很有用。虽然它’s called “news”,当然页面本身可以是任何东西 –提醒团队,当前的优先事项/重点领域,政策和程序以及其他任何内容。一个关键要素是用户可以轻松地从他们的移动设备提交这些文章–特别是SharePoint移动应用。但它’只是一个页面,其中包含作者添加的文本,图像和任何其他Web部件(尽管这需要PC经验)。

I spent a little time looking 在 怎么样 all 这个 works, 和 怎么样 developers 和 power users can query 和 search for such pages. Just to set the context since 这个 是 all shiny 和 new 在 the time of writing, 这个 是 what a display of team 新闻 looks like:

(By the way, excuse the horrible branding in 这个 tenant - I use it to clearly tell me which of my test tenants 这个 是!)

新闻页面

In the context of a group site (i.e. a 现代 site 在tached to an Office 365 Group), things look a little different in terms of the page header/banner, but largely the same:

新闻页面-组

..然后放大一点“News headlines” control:

新闻头条

..或作为替代,“News list” control:

新闻列表

Both of those are new web parts that you can add to a 现代 page – 和 since new-style web parts developed with the SharePoint框架 can be used in “classic” pages, it should be possible to use these new web parts everywhere. However, since 经典 pages use the old web part gallery 和 picker, it could be that we need to export 和 进口 one of these web parts to add them to a 经典 page.

General notes on 新闻:

  • When a 新闻 page 是 created, it gets displayed on the site *立即* 在里面“News headlines” 和 “News list” controls –无需等待搜索爬网
  • It’请务必点击“Add” button next to 新闻 to create a 新闻 page. Otherwise you’ll get a 现代 page, but it won’t show up as 新闻 - because it 是n’t a 新闻 page. As Elio points out in What makes a page be a 新闻 page in SharePoint Online?, 新闻 pages have a field called Promoted State 和 the 值 gets set to 2. 以便 晋升国=2 是 the thing that IDentifies 新闻 pages
    • Note that 这个 是n’不会暴露在用户界面中,因此’s no easy way (outside of code/PowerShell/tool) to update 这个 once a page has been created (at least for 现在)
  • 图片s uploaded during 新闻 page creation go into Site Assets/Site Pages/[escaped page name], like 这个:

     SNAGHTMLf13e9a2

以便’s a sense of 怎么样 team 新闻 works in team sites. But what if you want to search/query for these pages as a developer or power-user?

Searching for 现代页面 和 新闻 pages

Searching for 新闻 pages

的main thing I wanted to say here 是 to extend Elio’消息,并说还有一个具有相同名称的托管属性(“PromotedState”), 和 so we can use search to find these pages too (e.g. if we wanted to roll-up team 新闻 从 许多 sites):

图片

..and so with a Content Search web part or similar, we can use 这个 in a simple query to find results:

SNAGHTML16154ef2

For 现在 it seems only 新闻 pages use 这个 property, but it might be wise to add a filter on say, content type, in case Microsoft decide to use it elsewhere 在里面future.

其他说明:

  • 的content type 是 the same for standard 现代页面 和 新闻 pages –详细信息如下:
    • ContentType(名称)=“Site Page”
    • ContentTypeId = 0x0101009D1CB255DA76424F860D91F20E6C411800D294F66E48650D4DB0D1477463DC0B51
  • 所有Web部件的数据 是 stored in one page field 在里面content type,并将其转换为搜索中的一个托管属性–详细信息如下:
    • 栏位名称=“CanvasContent1”
    • 托管财产=“CanvasContent1OWSHTML”
    • Sample 数据:

      SNAGHTML16253821

So, 这个 IDea that everything 是 stored in one field can potentially be a challenge with 现代页面. It’无法轻易查询/过滤某些内容’存储在页面中,因为数据不存在’就像我们在发布场景中通常会在内容类型上分为不同的字段(例如,向我显示新闻类别=‘Politics’). That’s just a trade-off that comes with the flexibility 和 simplified page editing experience of 现代页面 I guess – I’我不确定Microsoft在那儿有太多选择。

的JSON response 从 the _api/sitespages/pages/feed endpoint (which the 新闻 headlines/news list controls use behind the scenes) looks like 这个:

概要

新的现代页面 are here, 和 the "team 新闻" feature in team sites 是 one example of their use. Developers 和 power-users will find it useful to understand what things look like underneath, 和 for 新闻 pages it's the 晋升国=2 field 值 (and managed property) that IDentifies them. Thanks to Elio for pointing out the field 值, 和 consider also the managed property which may be useful to you in search.

2016年11月1日,星期二

Pitfalls when developing with the SharePoint框架–我在阿姆斯特丹Unity Connect上的演讲

UnityConnect几周后’我会在 Unity Connect 会议于2016年11月17日至18日在阿姆斯特丹举行。’m looking forward to 这个 event! There are some great speakers there such as Waldek,Spence,Dan Holme,Scot Hillier,Marc Anderson,Neil Hodgkinson和 许多 其他,我认为现在是谈论SharePoint和Office 365的好时机–不管您使用哪一方面。当然对开发人员来说’s pretty good – 许多 of us have got past the initial learning experiences of working with the SharePoint框架 (SPFX), but 在 the same time it’s a 最佳ic, 和 there’仍有很多东西需要学习,并且需要一些首选的方法来解决。

在我的课程中,我想传达一些在开始使用SPFX时很容易犯的错误。在编码端和包装/部署端之间,肯定有一些小陷阱–到目前为止我已经发表了一些我认为很棒的文章,但是我认为’是一个不断发展的清单,我肯定有几件事。一世’我还送了20分钟“innova” session on developing a web part 在里面SharePoint框架.

这里 are the details of my sessions:

使用新的SharePoint框架进行开发时避免常见的陷阱 -11月17日,星期四13:20

开始使用新的SharePoint框架可能是一个挑战。无论您是选择在阳光下使用每个JavaScript框架,还是要使事情尽可能简单,都需要学习一些合理的知识。不可避免地,您会陷入一些陷阱,并且本节讨论了常见的陷阱,以确保您快速获得生产力。从添加JavaScript库到处理异步代码,从实现TypeScript模块到处理npm,此课程都试图简化您的学习道路。

INNOVA (20 minute session) : Developing a Client Web Part 在里面SharePoint框架 –你需要知道的 -11月18日,星期五,11:45

在新模型中创建客户端Web部件与开发人员习惯的经典SharePoint Web部件体验非常不同。从使用Yeoman Generator创建初始文件,到在TypeScript中添加代码,然后打包以进行部署–随时都有新的东西要学习!但是新方法有巨大的优势–为使用Web部件的用户提供了更好的体验,更好的性能以及使用现代Web技术进行开发的自由。您的JavaScript代码也可以托管在任何您喜欢的位置(例如CDN),这会打开一些新选项,这些新选项在SharePoint世界中非常受欢迎。该讨论和演示会话着眼于客户端Web部件的基础知识,因此您可以快速开始这个重要的开发人员主题。

的conference

反正那里’如果您仍然有时间注册会议,’重新感兴趣。查看时段和价格(€699), I think it’亲自讨价还价。去 //www.unityconnect.com/2016/Registration 了解更多

2016年9月30日,星期五

滑板– Modern sites 和 the SharePoint框架

只是我昨晚在SharePoint用户组中用于演讲的幻灯片的快速发布。我谈到了“modern sites” in SharePoint, 和 looked 在 things 从 the end-user 和 developer point of view (with respect to the SharePoint框架). 的link to the full deck 是 below.

I used 这个 slide to speculate why I think Microsoft are motivated to change things like the “create or edit page”SharePoint经验 微笑

的Mum test

我什么’我要了解的是,许多最终用户(尤其是那些偶尔仅使用SharePoint的用户)在当前的使用体验上苦苦挣扎-使用功能区,添加和配置Web部件等。对于SharePoint新手来说,事情太难了。

因此,我们有了一组新的Web部件,以及新的页面编辑体验。新的Web部件包括“突出显示的内容” Web部件,PowerBI Web部件,“ Yammer嵌入” Web部件,Office 365视频以及简化的文本/图像编辑器。

图片 

图片 图片

 

滑板

2016年9月21日星期三

Web部件属性– dynamically populate Dropdown 选项s in SPFx

SPFx RC0更新– JAN 2017

When building web parts 在里面SharePoint框架 (SPFx), there’通常需要实现自定义Web部件属性–这使用户可以根据需要配置您的Web部件。 Microsoft提供了一组用于此目的的核心控件,其中之一是下拉控件(PropertyPaneDropdown)。我的上一篇文章介绍了使用下拉控件(及其他控件)的基础知识,但有时您不仅仅需要提供静态‘hard-coded’下拉菜单中的选项集– in 这个 post, we’ll显示如何动态地填充控件。

For reference, 这个 article 是 part of the following series around web part 属性:

  • Web部件属性在里面SharePoint框架–part 1 (包含“文本框”,“下拉列表”和“复选框”控件)
  • Dynamically fetching 选项s for the Dropdown control [this article]
  • 切换,滑块,选择组和其他控件
  • 为Web部件属性实现自定义控件

Recap - populating the Dropdown control with static 选项s

As a reminder, to provide a simple static list of 选项s we use code like 这个 在里面getPropertyPaneConfiguration 方法:

属性PaneDropdown('dropdownProperty',{
                 标签:“这是标签”,
                  选项s: [
                   {键:“红色”,文字:“红色”},
                   {键:“绿色”,文字:“绿色”},
                   {键:“ DarkBlue”,文字:“ Dark blue”}
                  ]
                })

但是随着我们’re saying, having a static set of 选项s often 是n’t enough –当用户编辑Web部件时,我们需要从某个地方获取它们。所以让’s move on to that.

动态填充列表– a simple example

让’s start simple –在下面的代码中,我们进行了更改,以便从单独的方法中获取选项。一世’我只是展示了使用代码填充列表的基本知识,但到目前为止,’不与SharePoint或其他数据源交谈以获取它们:

所以,我们’重新简单地构建适当对象的数组(IPropertyPaneDropdownOption)并返回它。

动态填充列表– by fetching 数据 从 SharePoint

当我们需要与SharePoint交谈或进行某种其他类型的异步调用以获取数据时,事情会变得有些复杂。如果我们只是修改前面的代码以调用SharePoint(使用 spHttpClient 或类似),我们’会发现我们可能存在计时问题–我们的异步方法将触发,但是 getPropertyPaneConfiguration method continues to execute during 这个 time, 和 the collection of items 是 empty. Some time later the collection will be populated, but it’对于我们的下拉菜单控制,为时已晚。

的trick 是 to obtain the 数据, 和 then refresh the 属性窗格 by calling the onDispose() method of the web part. This patterns ensures that you are not delaying the load of the entire page or web part 属性窗格, but that the UI 是 refreshed once the dynamic 数据 has been fetched.
 
注意:在以前的SPFx版本中,指南是使用Web部件的OnInit()方法。–但是,这在某些情况下导致出现问题,因此指南已更新为此处描述的模式。对于其他事情,虽然OnInit()可以成为您的朋友– just not necessarily for web part 属性窗格 work.

In 这个 example we populate the dropdown with the SharePoint lists 在里面current site. We do 这个 with an async REST call to SharePoint, which uses Promises 在里面code structure:

..and then 在里面getPropertyPaneConfiguration method, we kick-off the call to fetch the 数据 在 the beginning, 和 then 在里面control declaration we simply set the 选项s 属性包含数组的变量:

以便’s it – a web part property control using dynamic 选项s!

概要

的web part property model in SPFx 是 quite powerful, 和 是 a great advantage of the SharePoint框架 compared to the 经典 “云友好的Web部件”使用脚本编辑器和一些JavaScript的方法。它’s possible to run code to build your web part 属性窗格, but just be aware of timing 和 lifecycle 是sues. 的onDispose method in a SPFx web part can be used to refresh the 属性窗格 once 任何 additional code you have has executed.

2016年9月19日,星期一

在英国SharePoint用户组上的演讲– 现代 sites 和 the SharePoint框架

苏古克I’我期待下周在英国用户群上的讲话(苏古克),在我伦敦的后院。它’这是SharePoint世界发生巨大变化的时期,并且由于用户组通常是混杂的受众,所以我认为从多个角度考虑事情会很有用–毕竟,这些变化将影响人员和角色的各个方面。一世’我主要考虑的是今年将在团队网站和发布网站上进行的更改,但是当然这些更改适用于Office 365组,PowerApps和所有内容的更广泛上下文,因此我们应该从这些角度考虑。当然,我将介绍一些开发人员方面的知识,并展示一些SharePoint Framework代码–并希望在所有这些背后进行一些很好的讨论!

这里 are the details:

的blurb

这里’我的演讲的标题和摘要:

Modern SharePoint sites 和 the SharePoint框架
Microsoft已开始发布其对Office 365中SharePoint网站的重大更改("modern" sites). This affects end-users in terms of user 接口 changes, but developers too with the introduction of the SharePoint框架. In 这个 session we'll consider both perspectives - we'll take a quick look 在 some of the changes in SharePoint Online team sites (including those which have not yet landed), including a look 在 "modern"页面编辑和Microsoft正在处理的一组新的Web部件。我们还将考虑这如何影响本地SharePoint的发展。

From there we'll switch to a dev perspective - we'll build a web part 在里面SharePoint框架, 和 start exercising our TypeScript, Gulp, 和 npm knowledge. It's a brave new world, but if you want your web parts to work 在里面new user experience you have to get on board!

希望你能做到’re local!

COB。

2016年9月13日,星期二

Web部件属性在里面SharePoint框架 – 第1部分

现代SharePoint页面具有新的Web部件编辑体验。这由现代Web部件和新的SharePoint Framework(SPFx)提供支持,希望使用这些新页面的开发人员需要了解新模型。当您开始构建现代Web部件时,’会发现需要实现Web部件属性–这样您的最终用户可以提供所需的任何选项或设置。微软提供了一套常见的“property pane”控件,例如文本框,下拉菜单,滑块等– 和 it’也可以添加完全自定义的控件(我’将在以后的文章中介绍)。在大多数情况下,核心控件是您的起点,因此在本文中,我’我将开始研究使用这些控件所需的TypeScript / JSON。

第一件事– 反应性 vs. non-reactive 属性窗格s

实施Web部件属性时,首先要了解的是默认情况下,当页面编辑器更改属性时,新页面框架支持Web渲染的“立即”更改。这被称为“reactive” 属性窗格 - no more having to click “Save”, “OK”, “OK”只是看到一个变化。让’s以Web部件属性为例,该属性指定了小部件的描述-如果用户在文本框中进行编辑,并且该内容显示在Web部件的主要区域中,则它将随着用户的输入而动态更新。尽管可以要求开发人员在更复杂的情况下实施某些操作,但这是自动发生的。

Sometimes you want to disable 这个 though – perhaps it’不适合使UI不断更新,或者每次都需要对SharePoint进行查找’s a change. 您 can disable the 反应性 behavior by adding 这个 code to your web part class:

protected get disableReactivePropertyChanges():boolean {
    return 真正;
  }

 

将Web部件属性构造为页面和组

Perhaps the second thing to mention 是 that the new web part 属性窗格 can be structured into multiple pages, each with groups of 属性. And the best 新闻 是 that we don’在没有人使用过的每个Web部件上都包含旧的Web部件属性的包((“Allow Minimize”, “Allow Close” etc.). So 在里面new world, a simple web part 属性窗格 with a couple of pages 和 groups might look something like the 图片s below –注意页面标题,组标题和分页控件:

SNAGHTML61509e7e

This allows us to better structure our 属性, 和 so in my example the page 2 of the web part props might look like 这个:

SNAGHTML6152c7e6

您 can continue to define additional pages 和 the framework will take care of providing paging 在里面UI for you. In terms of the code to do 这个 (and define SPFx web part 属性 in general), all the action happens 在里面getPropertyPaneConfiguration() 方法。这里’上面的代码(顺便说一句,’m using Gist for longer code samples like 这个 one but have 其他 “inline”在帖子中,很抱歉,它们看上去有些不同!)– 任何way, we basically have two pages being defined in our structure 现在:

使用不同的控件

现在,我们了解了如何将控件分为页面和组,让’s move on to the controls themselves. 的first step in editing your web part code 是 to add 进口 statements for TypeScript 模组 –我们针对希望使用的每个控件执行此操作。因此,在您的Web部件类的顶部,从类似以下的步骤开始:

导入{
 BaseClientSideWebPart,
 IPropertyPaneConfiguration,
  IWebPartContext,
 PropertyPaneTextField
}来自 '@ microsoft / sp-webpart-base'

..至..

导入{
 BaseClientSideWebPart,
 IPropertyPaneConfiguration,
  IWebPartContext,
 PropertyPaneTextField,
 PropertyPaneCheckbox,
 PropertyPaneChoiceGroup,
 PropertyPaneDropdown,
  属性PaneSlider,
  属性PaneButton,
  属性PaneToggle
}来自 '@ microsoft / sp-webpart-base'

From there, we can start expanding the code 在里面getPropertyPaneConfiguration() 方法。在前面的代码示例中,我们看到了如何将属性划分为页面和组,但在此处将其放大一秒钟。’s a specific change to move 从 the default arrangement to something with a second group. So we would move 从 the default of 这个:

组:[
            {
              groupName: 串s.BasicGroupName,
              groupFields: [
               PropertyPaneTextField('description',{
                  标签: 串s.DescriptionFieldLabel
                })
              ]
            }
         ]

..至..

组:[
            {
              groupName: 串s.BasicGroupName,
              groupFields: [
               PropertyPaneTextField('description',{
                  标签: 串s.DescriptionFieldLabel
                })
              ]
            },
            {
              groupName: "COB settings",
              groupFields: [
               PropertyPaneTextField('query',{
                  标签: “Query” 
                })
              ]
            }
         ]

As with 任何 JSON, you have to take care with closing brackets 和 braces! Note that for simplicity/illustration, you can see I’我不在这里将我的字符串(例如groupName和控件标签文本)放入单独的字符串类中–但在现实生活中,我建议您这样做,以避免在您的代码中乱成一团的魔术字符串。

因此,将属性分为页面和组非常简单。现在让’开始查看各个控件– I’我会在这里看到一些,在以后的文章中也会看到。

文字方块(PropertyPaneTextField)
特性:

属性

描述

标签 标签显示在控件旁边。
描述 说明显示在控件旁边。
Value 在里面field –可用于设置默认文本。
ariaLabel 不可见的标签–根据ARIA标准,由针对可访问性的工具和浏览器使用。
多行 指定文本框是否为多行(布尔)。
占位符 允许您提供默认的占位符文本,当控件没有值时显示。
可调整大小 Specifies whether the control can be enlarged by the user (to make it easier to enter larger amounts of 数据).
下划线的 文本字段是否带下划线。
错误信息 错误消息的静态值– it’我不清楚你什么时候’d use 这个, because the error 是 always displayed. 的onGetErrorMessage property 是 what you’d似乎真的使用它。
onGetErrorMessage 用于验证的函数指针– returns either a 串 (containing the error message) for simple cases OR a Promise<string>对于更复杂的情况,您需要对SharePoint(或类似文件)进行异步调用以进行验证。

请参阅下面的更多细节。
deferredValidationTime 显示验证错误消息之前要等待的时间(毫秒)–例如允许用户完成输入值。
的code:

注意我’m在下面的代码中还显示了一个简单的文本框验证例程–注意onGetErrorMessage用法:

属性PaneTextField('textboxProperty',{
                 标签:“这是标签”,
                  多行: 真正,
                  可调整大小: 真正,
                  onGetErrorMessage: 这个.simpleTextBoxValidationMethod,
                  错误信息: "这是错误消息",
                 deferredValidationTime:5000,
                  占位符: "这是占位符文本(在未输入任何值时显示)",
                  "description": "This 是 the 描述"
                })

private simpleTextBoxValidationMethod(value: 串): 串 {
    if (value.length < 5) {
        return "值必须超过5个字符!";
    } else {
      return "";
    }
  }

看起来像什么:

SNAGHTML4d5ddb9f

..并在验证函数执行后显示一个更真实的示例:

SNAGHTML4df82741

文本框控件的更高级验证

So 在里面example above, I showed a simple function to check the 值 the user entered was more than 5 characters. But what if you want to talk to SharePoint, or make some other async call to validate 文本 box contents? In 这个 case our function referenced in onGetErrorMessage 必须返回一个承诺<string> rather than a 串 –由于需要正确的上下文,因此事情变得更加复杂‘this’在你的职能。这里’s异步文本框验证方法的示例– I’m检查输入的值是否与当前站点中的列表匹配:

但是那里’还有更多。最初我收到错误消息,指出‘this’在我的函数中未定义– manifesting in a ”未捕获的TypeError:无法读取未定义的属性“上下文”” error as I was trying to access 这个.context in my web part code. So why was ‘this’ not populated? 的answer 是 that it just 是n’t,此处带有默认功能指针。 To get around 这个, we need to use the JavaScript/TypeScript ‘bind’ method. 这允许重新调用我们可以通过的函数‘this’ as a parameter – the receiving function then has the context. So where we reference our function 在里面onGetErrorMessage property of the 文本box, instead of 这个:

onGetErrorMessage: 这个.asyncTextBoxValidationMethod,

..you need 这个:

onGetErrorMessage: 这个.asyncTextBoxValidationMethod.bind(this),

给我的同事和朋友的大道具 瓦尔达曼 for 这个 – he has a great article on 这个 specific subject (在官方文档中提及之前),’s there that I discovered 这个 solution. Thanks Vard!

复选框(PropertyPaneCheckbox)
特性:

属性

描述

文本 复选框旁边显示的文本。
已检查 指定是否检查控件。
残障人士 指定是否禁用控件。
码:
属性PaneCheckbox('checkboxProperty',{
                 文字:“这是文字”, 
                  已检查: 真正,
                  残障人士: false 
                })
看起来像什么:

SNAGHTML4e0dbd03

 

下拉菜单(PropertyPaneDropdown)
特性:

属性

描述

标签 标签显示在控件旁边。
选项s IPropertyPaneDropdownOption对象的数组(类似于HTML<option> tag – defines the key/text etc. of the 选项). Can be specified in a static way, or fetched dynamically – see my other post (coming soon!) for details on 这个.
selectedKey 所选项目的键名。可用于设置最初选择的项目。
残障人士 Specifies if the control 是 *disabled* (not sure why 这个 是 flipped the other way compared to other controls! Hopefully 这个 will be made consistent in future releases..)
码:
属性PaneDropdown('dropdownProperty',{
                 标签:“这是标签”, 
                  残障人士: false,
                  选项s: [
                   {键:“红色”,文字:“红色”},
                   {键:“绿色”,文字:“绿色”},
                   {键:“ DarkBlue”,文字:“ Dark blue”}
                  ]
                })
看起来像什么:

SNAGHTML5c0d42aa

概要

Building web parts 在里面SharePoint框架 brings a few new things, including a new model for web part 属性. This 是 where the framework shines compared to other techniques like using a Script Editor web part 和 a separate JavaScript file –该方法根本没有提供使用自定义属性的方法。在本文中,我们研究了前几个控件,并指出动态填充下拉列表需要一种特定的方法,我将在另一篇文章中详细介绍。

在以后的文章中,我’我们将看看其他现成的Web部件属性控件。

2016年8月30日星期二

Dealing with async REST API calls 在里面SharePoint框架 with Promises 和 HttpClient/jQuery AJAX

承诺调用代码

为了能够做任何有用的事情,SharePoint Framework中需要掌握的一件事是如何调用Web API(例如SharePoint)’s REST API,Office Graph或您将通过Web请求访问的任何其他REST API。显然,这些操作需要异步操作-如果您尝试以其他方式实现,’因为例如您的Web部件尝试在HTTP / AJAX调用实际返回之前进行渲染,所以会出现计时问题,因此不会显示任何数据。您以前可能曾经使用过Promises(也许是jQuery Promises),但是在SPFX中,使用的Promises Framework是 ES6的承诺 – so it’s a good IDea for your methods to return 这个 type of promise rather than a jQueryPromise. We also have to deal with 这个 in TypeScript, so in short there are a few changes to what you might have done before.

您最有可能使用jQuery’之前进行REST调用的AJAX方法–$ .ajax,$。get或$ .post。这些方法在SharePoint Framework中仍然可以正常工作,但请注意,SPFX带来了一些内置对象来发出Web请求–即HttpClient和BasicHttpClient对象。 HttpClient对象将自动将身份验证令牌添加到需要它们的传出请求中,因此调用Office 365 API,图形或其他由同一Azure AD保护的其他事物变得更加容易。一世’ll再说一些HttpClient / BasicHttpClient对象,但是在这篇文章中,我想重点介绍Promises和编码方面,所以让’s start there.

顺便说一句,我的建议是在jQuery AJAX上使用HttpClient对象,因为它简化了更改数据的POST请求。即使您有时可能会使用GET操作(例如我在针对SharePoint的这篇文章中’的搜索API),保持一致是有好处的。但是,我’在本文中,将显示两种方法(HttpClient和jQuery),以便您进行比较。

实施代码

的promise represents 数据 passed back 从 the async HTTP call, 和 provides 然后()抓住() 调用代码的方法–这使您可以实现一系列异步操作并处理每个操作的成功/失败。最好的做法通常是在TypeScript中创建一个接口或其他类型的协定来表示正在传递的数据。因此,在调用搜索的情况下,我们将返回结果项数组–但为了说明,让’s说我们也想返回其他一些属性,例如一条消息。然后,我们的界面可能类似于:

** N.B. There 是 a code sample here (and in several other places in 这个 article) but it will not show in RSS Readers - 点击这里查看全文 **

这就是我们定义的接口(和SearchResult类)。但也请注意,使用返回明确定义的JSON的API时,您可能会选择定义其他接口,以便使用TypeScript中的强类型对象。理想情况下,应该有其他人为这些类/界面所用的打字文件,但是您要使用的许多SharePoint东西(例如SharePoint搜索结果)目前没有好的打字文件。因此,您可以定义自己的对象来表示对象层次结构,如下所示:

(向 埃里奥·斯特鲁夫(Elio Struyf) 在这里,我注意到他在 他的搜索网络零件样本 - 这个 will be a common approach I think.)

使用HttpClient对象发出Web请求

Perhaps the first thing to mention here 是 the difference between the HttpClient 和 BasicHttpClient objects in SPFX. It can be summarized like 这个:

目的

采用

为什么

HttpClient 击中SharePoint REST服务 自动添加X-RequestDigest标头和值(您可以’d之前需要通过对/ _api / contextinfo的单独请求获得) 进行POST(即写)操作, 并设置其他一些合适的标题。
BasicHttpClient 打其他REST服务 采用ful for 任何 non-SharePoint API, without having to bring in an entire framework such as jQuery just for web requests.

的sample below uses the HttpClient with Promises. Some things to note about 这个 code:

  • 由于HttpClient对象是通过Web部件访问的’s Context property (IWebPartContext), we need access to that in 这个 “middle-tier” code.
  • As usual, we resolve or reject the promise with the object that represents our 数据 - in 这个 case an instance based on our custom 接口.
  • 的first function 是 a simple function that 是 largely re-usable. 的Promise type it returns 是 our custom object representing JSON 从 the SharePoint search API. 您 could work directly with the JSON by using “any”在TypeScript中而不是为此数据提供类型–但是您使用的代码不会自动完成。
  • 的second function does the surrounding work of obtaining the correct URL to use, 和 translating the raw search return 数据 into the object we really want to pass back to the calling code –一个ISearchResult类型的Promise(带有Message和SearchResults数组的Promise)。

以便’s the async method 和 the calling code using HttpClient. 让’现在来看一下jQuery AJAX。

使用jQuery AJAX发出Web请求

我可以’真的没有想到使用jQuery AJAX而不是HttpClient的优势,除了您的开发团队可能更习惯了(事实上,’总是需要HttpClient给您的东西)。但是也许’有足够的理由– the objects aren’太不同了,可能无法使用’这不是我们应该虔诚的事情。

Some things to note about 这个 code:

  • 的overall structure 是 very similar –我们返回类型为ISearchResult的Promise,我们必须根据核心请求的成功/失败来解析/拒绝Promise。
  • 同样,我们可以通过为传递给done()回调的对象提供一种类型来对强类型对象进行处理(命名为“data”在我的代码中)。这使我们可以自动完成调用代码。
  • 可能需要进一步改进TypeScript,例如输入拒绝/解决对象。一世’m assuming 这个 是 possible, 和 might be worthwhile if you find yourself using jQuery AJAX in TypeScript a lot.

概要

以便’s hopefully some use as you are starting to do more 在里面SharePoint框架. There are some other TypeScript things in there to think about, such as use of the “fat arrow” syntax (=>)的匿名功能,但如果您不愿意,TSLint和默认设置将很乐意为您指出此类信息’t使用它们(以编译错误的形式:))。这里需要考虑的其他几件事包括我的同事和好友Vardhaman提供的信息 从SPFx Webpart向SharePoint发出POST请求和also a TypeScript thing:

  • 如果你’为从SharePoint(或其他)API返回的JSON提供类型而苦苦挣扎,那么您可以选择将类型声明为“any”在您的TypeScript代码中。它’s nicer to avoid 这个 where possible, but hey, Rome wasn’一天建成吧? 微笑

2016年8月9日星期二

Introduction to the SharePoint框架 –提供演示幻灯片

我最近在2016年伦敦周六举行的SharePoint活动上做了演讲,主题是使用新SharePoint框架进行开发。随着越来越多的SharePoint开发人员开始意识到这一点,’这是一个巨大的变化时期,尽管SharePoint框架尚未达到总体可用性(在本文撰写时),’非常非常接近’最好开始吸收信息。我推迟发布此幻灯片,因为我知道自从我第一次看到Microsoft以来,它一直在对Framework进行一些更改,并打算向我们提供一些更新的信息,以便早期使用。我想要这个‘early preview’信息,以确保您*获得*框架时尽可能准确,而我’现在,我们已验证卡座中的所有内容仍然准确。

的deck 是 available for download on SlideShare 在 http://www.slideshare.net/chrisobrien/chris-obrien-introduction-to-the-sharepoint-framework-for-developers,但您也可以浏览下面的幻灯片。不幸的是演示没有’t在活动中记录– so I’我们添加了几张幻灯片来描述它们,以防万一。

 

期待

希望SharePoint框架将很快开始以“第一发行版”模式向Office 365租户推出。它’完全不同的开发经验,其回报是您可以开发出高性能的Web部件,这些部件在响应式设计中可以很好地工作,并且可以用于“modern pages”. Rememeber that it's not possible to use what we're 现在 calling "经典" web parts in 现代页面, 和 given that both team sites 和 publishing sites in Office 365 will soon be able to use 现代页面, that alone makes the new model worthy of 在tention. 加itionally, it will come to on-premises SharePoint 2016 in a Feature Pack in 2017, so even if you're on-prem only it's perhaps advisable to start looking 在 这个.

向上和向上!

2016年8月1日,星期一

沙箱代码在Office 365中不再可用–立即生效

Most technical people working with Office 365 have known that sandbox code has been deprecated for some time. This 没有’t mean 任何 沙盒解决方案已弃用–取而代之的是,弃用在沙箱解决方案中专门指代* code *,因此我们指的是使用服务器端API的代码。不再支持任何代码沙箱解决方案(NCSS)。有关沙盒代码的预先警告是在2014年1月发布的, //blogs.msdn.microsoft.com/sharepointdev/2014/01/14/deprecation-of-custom-code-in-sandboxed-solutions/。但是从那以后,没有宣布实际删除功能的时间表– 和 in fact there was no 新闻 whatsoever. I even heard 从 some Microsoft folks that the urgency of removing sandbox code 从 SharePoint Online had gone away, since the original operational concerns weren’实现后,实际上,工程团队能够在Office 365中很好地运行和扩展功能。

So a big surprise last week was the sudden removal of the feature in 许多 tenants. 的“Activate”解决方案上的按钮不可用,并显示以下消息:

"Activation of solutions with sandboxed code has been 残障人士 in 这个 site collection. Contact your administrator to enable 激活 using the guidance published here."

SPO-禁用沙箱代码

One very interesting aspect of 这个 是 that you will see 这个 even if you’不使用沙盒代码,而是*正在*部署代码汇编– 和 这个 是 the default in Visual Studio! 因此,许多解决方案’真正使用沙箱代码仍然需要注意– developers will need to repackage the WSP again, 这个 time without including the auto-generated assembly. I discuss the specific change later 在里面“如何删除自动生成的沙箱程序集?” section.

微软官方公告

What effect will 这个 have?

好吧,这取决于您属于哪个营地:

  1. 您’实际上并没有使用沙盒代码,而是部署了一些自动生成的程序集。
  2. 您 genuinely are using sandbox code.

对于数字1,您的开发人员将需要进行一些相对简单的更新。见“如何删除自动生成的沙箱程序集?” section.

对于数字2,简短的答案是您有问题。多少取决于 怎么样 沙盒代码正在使用中,以及您拥有多少。最终,您需要立即采取行动重新设计解决方案。您可以’不要等到计划了一些代码更改之后,因为解决方案的某些部分可能很快就会停止工作,并且您可能会遇到服务问题。 Already, you will not be able to add new sandbox code or reactivate an 现有 sandbox WSP with code. 加itionally, the Microsoft message states that you have 30 days before 现有 代码将停止工作。 用技术术语来说,这意味着以下操作将停止工作:

  • 活动接收者
  • 功能接收器
  • 工作流程(编码)
  • InfoPath表单(如果在表单后面使用代码)
  • Web部件(如果使用沙盒代码进行编码)

确切地说,这对您的Intranet或解决方案意味着什么,取决于原始开发人员如何使用这些构建基块。

考虑影响

I’m really surprised 在 这个 –在最初的弃用公告中,微软表示:

We realize that our customers have made investments in coded sandboxed solutions 和 we will phase them out 负责任地. Existing coded sandboxed solutions will continue to work in on-premises SharePoint farms for the foreseeable future.

幸运的是,我的客户/项目都没有受到影响,因为我们比使用这种方法构建解决方案更了解。但是我对处于不同情况的组织感到。我当然期待“final warning” period 和 I’d听说它说从那时起至少还有12个月的时间。但显然不是–而且我知道Microsoft可能没有违反这里的Office 365服务说明的任何合同或元素,但是我很难看到这是“responsibly”从服务中删除功能。

在相关说明中,我’我们正在与一家全球企业(超过100,000个用户)与Microsoft一起做一些工作,这些企业的Office 365内联网中具有沙箱代码–鉴于此,它’也许幸运的是他们还没有活着。我们没有’创建初始解决方案,但在我们的代码审查中标记了此内容以及其他一些内容。我建议Microsoft人员与他们的同事联系,以澄清关闭沙盒代码的时间表。有趣的是,回来的信息是“一切都应该至少持续12个月”, 和 so if it’这些家伙让我感到惊讶’s fair to say it’也让其他许多人感到惊讶。

通讯麻烦

Notably, there was some confusion as 这个 was playing out initially. At first, 这个 was being reported as a temporary service 是sue, 和 administrators may have seen a message to 这个 effect 在里面Office 365 信息 Center:

SPO-沙盒代码服务问题_

但是,沙箱代码 真的是 被禁用–似乎有一段时间,Office 365中的其他团队没有’其实也不知道。现在,您将在Office 365管理中心中看到两件事之一:

状态

信息

您 have a problem –检测到沙盒代码

MC73347-我们’ve检测到您的租户帐户正在使用基于代码的沙箱解决方案.

请注意,我们’ve推进了我们删除2014年以前宣布的基于代码的沙箱解决方案的计划,如下所示: http://aka.ms/sandboxcode

请注意,仍然完全支持声明性(无代码)沙箱解决方案。

How does 这个 affect me?

作为删除过程的一部分,不再提供基于代码的新沙盒解决方案的激活以及现有解决方案的更新。在大约30天之内,SharePoint Online环境中当前正在运行的基于代码的沙箱解决方案将被禁用。如果您遇到麻烦,请与我们联系,因为我们的产品和客户支持团队已准备好在此过渡期间为您提供支持。

您’re OK – no检测到沙盒代码

SP73009-定制解决方案和工作流程-误报

Incident customer impact scope has been updated. Ongoing analysis of customer impact has determined that your service 是 not impacted by 这个 incident

以便’这似乎是最后的故事。

如何删除自动生成的沙箱程序集?

如前所述,开发人员可能需要在没有自动生成的程序集的情况下重新打包WSP解决方案。 您 can do 这个 by setting the “将组件包括在包装中”项目属性为false:

clip_image005

下次进行某些开发或维护时,可能需要此步骤– effectively 任何thing that would require 激活 WSP的另一个版本。

概要

我们依靠Microsoft在运行Office 365(和本地SharePoint)方面做出正确的决定。一世’我不知道现实解决方案中沙盒代码的规模,但我真的希望这种处理方式不会’不会对太多组织造成严重影响。您受此影响吗?还是您有其他观点?一世’d有兴趣了解如何收到此信息–随时发表评论,让我知道。

2016年7月1日,星期五

Understanding the web part manifest, 束.json 和 other key files 和 folders 在里面SharePoint框架

新的“SharePoint Framework”客户端Web部件和客户端应用程序的模型使用了一系列文件,开发人员必须学会使用此方法成功扩展SharePoint。有一个新的Web部件清单文件(现在是JSON,而不是XML)和bundle.json,package-solution.json和upload-cdn.json之类的文件,它们与新的基于Gulp的开发人员工具进行交互以控制解决方案的方式打包并部署–全部包裹在一个新的文件夹结构中。所以那里’学习曲线并了解这些文件和文件夹至关重要。在上一篇文章中 Develop a client web part 在里面SharePoint框架 - a walk-through 我们看了整体“getting started” process which 使用Yeoman Generator为您创建文件– but in 这个 article I’我将解释文件和文件夹。

夹s used 在里面SharePoint框架

让’s start with a rundown of the various folders 和 what they contain. My last post had a cut-down version of 这个 table, but I expand on the 描述s here, 和 add a list of key files 和 an 图片 so you can see what that folder looks like:

目的

关键文件

图片

src 的place where you add/edit code files –您将在此处建立文件结构。
  • [MyWebPart1.ts](TypeScript)
  • [MyWebPart1.manifest.json]
SNAGHTML72de5c5_thumb
LIB 包含“processed”准备移入与应用程序一起分发的捆绑软件中的代码文件。

For example, TypeScript files have been compiled to JavaScript files in 这个 directory.
  • [MyWebPart1] .js
  • [MyWebPart2] .js
SNAGHTML72e6ac4_thumb
dist 包含the final code files which are distributed with your application.

的most 进口ant file 是 the final JavaScript 束 file [MyWebPart] .bundle.js– 这个 是 all of the JS for your web part, including some framework stuff.
  • [MyWebPart] .bundle.js
  • [MyWebPart] .bundle.js.stats.json
  • webpart.manifest.js
SNAGHTML4ed93fd_thumb
配置 包含该工具用于构建过程的一组JSON文件。特别是要控制应用程序的打包方式-使用.spapp文件,JavaScript / CSS捆绑等等。
  • build.json
  • 束.json
  • package-solution.json
  • serve.json
  • upload-cdn.json
SNAGHTML4e02bfb_thumb
node_modules 包含JavaScript 模组 used by the solution. TypeScript follows the standard set by node.js for resolving 模组 (i.e. when you use the 进口 keyword to use an object defined in another module/library), 和 the node_modules folder 是 a key part of 这个.  Whatever JavaScript LIBraries your code OR the underlying SharePoint框架 has a dependency on. SNAGHTML73042df_thumb
打字 包含TypeScript类型文件– these are used to give you auto-complete (IntelliSense) against JavaScript LIBraries you are using, such as jQuery. Typings for whatever JavaScript LIBraries you’在代码中重复使用。这些通常是通过TypeScript Definition Manager添加的,例如
tsd install jQuery的 jQuery的ui --save
SNAGHTML14200135
共享点 包含.spapp文件,该文件由‘gulp包装解决方案’. This 是 what you’将添加到您实际环境(例如生产)的“应用程序目录”中。

也有一个‘debug’文件夹,以便您查看包装中包含的内容。
  • [MyApp] .spapp
SNAGHTML20029fca

的web part manifest

的[MyWebPart].manifest.json file 是 where core details such as the display name 和 描述 are specified. Critically, other associations are specified here such as the associated JavaScript file (usually a 束) 和 任何 dependent JavaScript 模组 which will be loaded – yes, there’是一个内置的JS加载框架。这里’s清单.manifest.json文件中指定的一些关键属性的摘要:

元件

样本值

目的

清单版本 1 Represents the version of the manifest schema that the build system 是 expected. Currently 这个 must be “1” – 任何 other 值 will be rejected.
ID 41d9c141-e10f-4373-8a24-84383fa95592 客户端Web部件的ID– the same as we’习惯,即它提供了一种识别Web部件的具体方式(例如通过API)
bootstrapModule http:// localhost:4321 / dist / cob-latestnews-wp.bundle.js

//cob.azureedge.net/intranet/cob-latestnews-wp.bundle.js
这是Web部件的JS文件所在的位置。在开发人员中,您’将会有一个本地主机路径(该工具将使用node.js为您托管)。对于生产,您’ll replace 这个 with the path where you deployed the JS file to for real –CDN,网站路径或类似内容。
moduleName CobLatestnewsWebPart Web部件对象的JavaScript模块名称。
localizedScripts ? I believe 这个 是 an array of locale/JavaScript file mappings –支持本地化。
preloadModules

"preLoadModules": ["jquery","jqueryui"]

Specifies JavaScript 模组 that the web part should load before execution. 的module names specified here must match names/paths specified 在里面“config”接下来描述的元素–换句话说,您为模块命名并指定其位置’s loaded 从.
配置

"config": {
        "paths": {
            "jquery": "//code.jquery.com/jquery-1.10.2.js",
            "jqueryui": "//code.jquery.com/ui/1.11.4/jquery-ui.js"
        },
        "meta": {
            "jqueryui": {
                "scriptLoad": "true",
                "deps": [
                    "jquery"
                ]
            }
        }
    }

采用d to specify 路径 to JavaScript LIBraries pre-loaded by the web part (as specified 在里面“preloadModules”标签)。还在此处指定了脚本之间的依赖关系-例如,在jQuery UI之前先加载jQuery(如左图所示)。
属性

"properties": {
    "description": "显示当前用户的最新文档。",
    "headerText": "您最近的文件:",
    "searchQuery": "*",
    "itemLimit": "5"
  }

指定Web部件属性的默认值。请注意,Web部件属性中的其他元素在Web部件代码中定义– specifically the 接口 代表网页部分’的属性,以及 propertyPaneSettings method. 您 can see these 在里面code sample above.

请注意,清单文件中还有其他属性,’m not listing here –但是这些现在是一些重要的!

Other key files 在里面“src” folder

除了Web部件清单之外,代码文件也位于此处。这些其他文件可以更容易地汇总,所以我’ll切换到项目符号点。您将在此处创建子文件夹,并根据需要构建我们的代码库。但是让’s以单个Web部件为例,并查看使用的文件集:

  • [MyWebPart] .test.ts– 将Mocha JavaScript测试添加到的文件
  • [MyWebPart] .less– 一个添加LESS CSS指令的文件。如果你’不熟悉LESS,它’一种更整洁地构造CSS的方式–它允许变量(例如@ cob-title-color:#FFB900;–然后您可以使用不同的样式)。除变量外,CSS标记可以以与HTML结构匹配的方式嵌套。这两件事使您的CSS代码更易于维护。  看到 http://lesscss.org 更多细节。
  • [MyWebPart] .strings.ts– a file to add resource 串s to (to keep them in a separate place 从 your code, 和 therefore avoid magic 串s)

Files 在里面“lib” folder

的lib folder serves as an intermediate folder 在里面build system. A few things happen between the src 和 LIB folders:

  • 将TypeScript文件编译为JavaScript文件
  • LESS文件被编译为CSS文件 
  • 压缩CSS文件,并为CSS加载程序做准备
  • HTML模板文件已编译为JavaScript(N.B.’我仍然在努力工作!)
  • 每个.ts文件都会生成TypeScript类型文件(即“foo.d.ts”,按照TypeScript约定)

Files 在里面“dist” folder

这些是与应用程序一起分发的文件–其中一些在运行时使用,例如:

关键文件:

  • [MyWebPart] .bundle.js– 这个 是 all the JavaScript required to run your solution, 和 是 CRUCIAL to your web part or client-side application working properly. When you package for production, you can host 这个 file 任何where you like (CDN, Azure web app, on-premises web server etc.) but whatever URL it lives 在 must be reachable by end-users AND it must be specified 在里面“bootstrapModule” key 在里面web part manifest.
  • [MyWebPart] .bundle.js.map– map file to support browser 调试ging
  • [MyWebPart] .manifest.js– 这个 是 the shipped version of your web part manifest file.
  • [MyWebPart] .bundle.js.stats.json– 包含有关生成的JS捆绑包的元数据的文件。这里真正有用的一件事是“modules”节点,其中列出了捆绑软件中所有的原始JavaScript文件。如果您真的很有用’重新排查为什么使用JavaScript库’re using 是n’t making it’进入捆绑包的方式(反之亦然)–比尝试读取捆绑包本身中的丑陋的JavaScript(例如,尝试找出jQuery停止和jQuery UI开始的位置!)要容易得多。

Files 在里面“config” folder

的config directory holds a collection of JSON files which mainly control 怎么样 the app gets packaged. 的most critical files are:

  • 束.json – 这个 controls which JavaScript files make their way into your final JS 束. Note that by default, 任何 3rd party JS LIBraries you load as a module into your code (e.g. with something like 导入$ = require('jquery'))  will get included into the 束. However, you can override 这个 (for example if you’重新引用CDN上的jQuery),方法是添加一个“exclude” 条目 with the same name. More on 这个 in another article.
  • package-solution.json– 控制由gulp包装解决方案生成的应用程序包的详细信息。这是您所用的.spapp文件’d上传到App Catalog,以在为非开发环境打包时使Web部件可用
  • upload-cdn.json– I’不确定发布时最终工具链中的格式是否如此,但是此文件提供了一种方便的方式将文件(例如JavaScript捆绑包)推送到Azure文件存储(如果需要,还可以推送到Azure CDN)’ve 配置ured that). 的file takes parameters which IDentify your area in Azure BLOB storage so the files get uploaded to the right place, such as:
    • 帐户
    • 容器
    • accessKey

Bundle.json是一个重要文件,尤其是当您添加多个JavaScript文件并引用越来越多的外部库时。一世’我会在以后的文章中更深入地探讨这一点,但现在让我们’仅考虑几个关键点。这里’■当前工具中的bundle.json是什么样的:

的“entries”节点指定解决方案的元素–例如每个应放入捆绑包的JavaScript文件。值得注意的是,如果您愿意,可以将第三方JavaScript库与JS代码捆绑在一起–实际上,如果您将它们用作解决方案中的模块,则必须明确排除它们,但是’re referencing a CDN 在 run-time for example. 的key children of the “entries” element are:

元件

样本值

目的

条目 “./lib/webparts/cobLatestnewsWp/CobLatestnewsWpWebPart.js” Path to a source file to go into the JavaScript 束. 的“lib”文件夹应该包含JavaScript文件,而不是TypeScript文件– 任何 TS files 在里面“src”文件夹被编译为JavaScript文件,这些文件将在此处输出(请考虑gulp.dest()’熟悉它)。

但是,这不是最终的 所有JavaScript文件中-这是生成到“dist” folder.
outputPath "./dist/cob-latestnews-wp.bundle.js" 整个捆绑包的最终JavaScript文件的路径。这将随您的应用程序一起分发,最终用户也会受到打击。 
排除

"@ ms / sp-client-platform",
  "jquery"

所使用的模块不应纳入捆绑包中(例如,因为您’重新引用CDN上的jQuery(例如)。

Files 在里面root folder

最后,我们进入根文件夹中的文件。这里有几个重要文件,例如gulpfile.js,这是构建系统的入口点– you might choose to extend 这个 to add custom Gulp tasks. 的following list details the key files:

  • gulpfile.js – the “top” of the build system, 和 这个 defines the Gulp tasks you call 从 the command-line such as:
    • 吞咽建立
    • 口香糖束
    • 喝一口
    • gulp包装解决方案
    • gulp上传-cdn
    • [注: Gulp任务本身在node_modules \ @ms \ ms-core-build \ tasks文件夹中定义]
  • package.json – similar to “packages.config” in NuGet, in that it defines the JavaScript LIBrary dependencies (and their versions) used by your solution.
  • tsconfig.json –定义TypeScript编译设置
  • tslint.json –定义TypeScript样式检查设置

概要

Phew! As you can see there are lots of new files 和 folders to get to grips with 在里面SharePoint框架. Remember that 这个 information 是 based on an early version of the Framework, 和 there may be some changes by the time things actually become generally available –我将使用我发现的任何更改来更新此帖子,以保持信息的准确性。一世’ll also be covering more aspects of the SharePoint框架 在里面next few articles.