2017年6月29日,星期四

Office 365开发人员愿望清单(SPFx和现代站点),2017年夏季

显然我们’re in a 过渡时期 in Office 365 在 the time of writing (June 2017), where modern SharePoint experiences are available - modern sites and pages for example - but not everything is fully joined-up yet. That said, it’瞬息万变的景观,是顾问的一部分’其作用是跟上提供解决方案的最佳方法。一次,我希望这是一篇博客文章,可以很快–当然,我必须添加一些信息’我一直在写它,而我’随着事情的宣布/发布,我将再次回来并更新下表。

回到那个‘transitional period’-对于具有协作工作负载的组织,情况尤其如此’需要为团队双色球推荐一注创建某种双色球推荐一注模板。即使对于我们的客户来说,这仍然很常见’只需提供不同的首页体验或向站点添加一些列表/库/内容类型/全局管理员即可。毕竟,我认为无论Microsoft提供什么作为默认体验,许多组织都可以从对此的一些轻量级更改中受益–因此,双色球推荐一注模板在SharePoint中仍然很重要。我希望微软不要’不要忽视这一点。当然,当我考虑我的愿望清单时,有很多项目与“大规模地进行团队协作” in SharePoint – so perhaps let’首先考虑一下。

当前站点模板挑战

当前站点模板具有挑战性,因为:

  • 要使用网上论坛双色球推荐一注吗? 好吧’目前很难模板化这些模板,因为:
    • 能够’当前指定自定义模板
    • 能够’t currently be notified that a 新 site has been created, because there are no web hooks
      • [顺便说一句,我同意  ways around this (e.g. web job/function which polls for 新 sites), but none are pretty because users may start using the site in one state, only for it to change as they are working in it..]
  • 是否要使用非Group SharePoint双色球推荐一注? 目前很难为这些模板提供模板并获得现代体验,因为:
    • 甚至模式和实践(PnP)站点模板都没有’当前允许配置现代页面–至少,并非没有一些开发人员的努力来扩展它

对于不这样做的客户’如果不想使用网上论坛,第二种方法对我们来说已经很普遍了。但是,如果更多地投入/减少工作量,那就太好了。它’我知道即将到来(请参阅下表中的信息),但是’在沿途抚弄人没有害处;)

我目前的愿望清单

这里’是PowerPoint幻灯片的摘录,我最近讨论了我当前的清单“asks” to Microsoft:

SPFx和现代页面的愿望清单-2017年6月

让我详细介绍一下:

事情

状态(2017年6月)

笔记

SPFx Web部件的全球部署

  • 不需要将SPFx应用安装到每个站点
  • Ideally 在 different 范围 e.g:
    • 某种类型的所有双色球推荐一注,例如所有小组站点,所有常规团队站点等。
    • 行李袋中带有X的双色球推荐一注
    • 除[列表]外的所有双色球推荐一注集
    • 等等

部分解决方案“imminent” (weeks not months)

2017年9月5日 – now delivered, see //dev.office.com/sharepoint/docs/spfx/tenant-scoped-deployment

请参阅本文结尾处的幻灯片。最初的解决方案将允许Web部件可跨站点使用,但无需过多控制(例如,“scopes” examples).

扩展PnP模式以包括配置现代页面和Web部件

  • 需要允许提供团队站点*以现代页面作为主页*–没有代码/即插即用可扩展性提供程序)

预计在下一版的PnP Core(2017年8月版)中发布。它’已在XML模式中...

更多网钩

No 新s

I’d想查看用于以下方面的网络挂钩:

  • 双色球推荐一注创建,例如集团双色球推荐一注
  • 子双色球推荐一注创建
  • 清单建立
  • 权限变更
  • 其他变化

取消限制“no script”双色球推荐一注(尤其是物业包)

  • 需要为Group双色球推荐一注(或其他具有“no script” enabled
  • 在许多自定义方案中,写属性包很常见

做完了!

It’现在可以禁用“no script”在现代团队双色球推荐一注(包括小组双色球推荐一注)上。的 自定义现代团队双色球推荐一注 页面已更新以反映此内容(2017年6月26日)

缺少控件和标记支持

  • 分类控制
  • 人/组控制
  • 日历控件(适用于非组双色球推荐一注)
  • 完整内容搜索Web部件(或类似内容)

No specific 新s

团队双色球推荐一注中的现代页面非常适合编辑和显示,但是目前在某些类型的内容和标记方面还不够好。缺少控件包括我’已列出(很难有一个“Page contact” or “Site owner”(例如),但由于“双色球推荐一注页面”内容类型上的(缺少)字段,因此也缺乏标记/元数据支持。在当前的安排中,使用过滤器汇总这些页面非常棘手。

页数

  • 多列支持
  • 固定横幅/标题高度

未来“soon”

2017年9月5日 –现在已交付,请参见“Section layouts”此帖子的“传播双色球推荐一注”部分(但请注意,相同的页面模型也适用于团队双色球推荐一注中的现代页面)- //techcommunity.microsoft.com/t5/SharePoint-Blog/Reach-your-audience-via-SharePoint-communication-sites-in-Office/ba-p/70079

这些页面的灵活性存在更多已知问题–特别是单列方面。但是,这对于Microsoft来说是一笔微不足道的成果,我认为这些问题很快就会解决。

扩展SPFx扩展模型(奖励项目)

No specific 新s

定位的其他领域,而不仅仅是“PageHeader” and “PageFooter”。该产品小组表示,将在团队站点(可能也是通信站点)中为现代页面提供更多区域。

    关于第一个项目,SPFx Web部件的全球部署,Vesa最近使用这张幻灯片来讨论’s coming:

      SNAGHTML46ce695

      这听起来像是一个合理的计划,因为至少长期解决方案可以使我们完全掌控。短期解决方案显然意味着所有SPFx Web部件到处都是可用的(例如,在我的团队站点,我的Intranet和我的通讯站点中),因此可能没有长期的安排’t too far away.

      通讯双色球推荐一注

      通讯站点开始启动,Microsoft’s “Ask Me Anything”会议是昨天(2017年6月28日)。令我感到失望的是,我没有听到有关通信站点模板的任何详细信息,因此这肯定是另一个愿望清单。我知道有“new”为即将到来的人提供模板选项,但我仍然希望能够使用PnP双色球推荐一注设置和XML–毕竟,我们仍然需要控制和能力来指定PnP提供的双色球推荐一注模板的所有方面,所以为什么要使用另一种方法?而且,我之间不匹配’在其他任何地方以及对于通讯站点而言,双色球推荐一注也将不是最佳选择。希望在那里也可以进行PnP配置– I really hope so!

      什么 else?

      我当然可以想到其他一些项目。但是我想念什么’目前在您的清单上?

      更新2017年7月26日–等等,我怎么想念缺少Microsoft Teams的API?同样,我知道’s coming, but I’很期待来创建用于相应的选项卡和连接器,以及(旁边的办公室365组/ SharePoint站点也许)编程创建团队的能力的团队模板的能力。希望不要等待太久!

        张贴者 Chris O'Brien 07:53 2 comments 链接到这篇文章  

        2017年6月11日,星期日

        Use an SPFx Application Customizer to add JavaScript (e.g. 头er) to every page in a site

        [2017年9月更新了SPFx 1.2 RC0]

        用于自定义Office 365中现代SharePoint双色球推荐一注和页面的新工具已经到来(在撰写本文时进行预览,2017年6月)。  These are known as “SharePoint Framework(SPFx)扩展”,并替换一些SharePoint开发人员长期用于提供关键方案的工具,例如:

        • 将JavaScript添加到站点/双色球推荐一注中的每个页面
        • 在每个页面中注入一些内容(例如,巨型菜单/全局导航或消息栏)
        • 集成弹出对话框
        • 将项目添加到SharePoint中的某些工具栏/菜单
        • 更改列表中特定字段的呈现/行为

        换句话说,SPFx扩展提供了与CustomActions和JSLink等效的功能–以前的开发方法没有’不一定要翻译成现代网页。

        在本文中,我想重点介绍上面列出的前两种情况(粗体)–在每个页面上引用一些JS,并运行一些代码以将某些内容放置在页面的页眉区域中。 Microsoft提供的文档在第二种情况下做得很好,但有时’有一点点视觉效果很好,所以我’将提供更多屏幕截图。一世’我还会谈谈你不这样做的情况’不一定要在页面上添加*内容*,但是您确实想添加*其他形式的脚本*以在每个页面上运行(例如,分析/其他)。

        在向页面中注入内容方面,我们现在在现代页面中具有以下区域(注:这些是从SPFx 1.2起的名称):

        • 最佳
        • 底部
        • 对话框容器

        N.B.我们可以期望将来有更多区域!这里’顶部(页眉)和底部(页脚)区域的外观如下:

        SNAGHTML4eec1a

        关键信息

        微软目前表示,SPFx扩展将在2017年秋季/秋季达到“一般可用性”(即在所有租户中全面发布并适合生产使用)。在此之前,它们均处于预览状态。

        Also be aware that what makes the 新 extensions possible is Microsoft's updates to tenants (only in developer tenants 在 the time of writing, not even in First Release), and updates to the Yeoman Generator that developers use to get started - this has a 新 set of component types which get you started with the right default code.

        SPFX 1.2的更改

        • 占位符名称的更改– “Top” and “Bottom” insteaad of “PageHeader” and “PageFooter”
        • 不推荐使用onRender()方法/在SPFx扩展中不再使用该方法

        现代页面的先前限制

        现代页面之所以令人沮丧,是因为:

        • 无法运行自定义脚本
          • 以前的方法(CustomAction + JSLink)添加的全局JS不在此处运行– only on “classic” pages
        • 相应缺乏页面扩展性
          • 无法将内容注入页面

        什么’此处的更改是Microsoft提供了一个运行您的代码的钩子,并且还提供了 命名占位符 在现代页面上–您可以向其中添加内容的页面区域。只要您坚持这些区域并且不要’t arbitrarily “hack”通过更改其他DOM元素(例如使用jQuery或类似的元素)来显示该页面,则Microsoft有效地保证对Office 365的更新不会影响您的自定义设置。

        您提供的脚本必须安装到应用程序目录并以这种方式部署,这意味着实际上存在批准步骤。这意味着,简单地编辑页面以添加脚本编辑器Web部件不再是简单的选择–脚本必须正常’d由管理员提供。当然对此有很多争论,但最终还是’Microsoft需要采取的措施,以促进更多的治理并保护Office 365作为一个稳定的平台。

        Targeting placeholders such as the 最佳 and 底部 zones

        在早期版本的SPFx中,某些页面仅具有“顶部”区域,但没有“底部”区域。那’现在已修复,并且如果页面类型(例如,现代页面,双色球推荐一注内容页面,文档库或列表页面等)上存在“顶部”区域,则“底部”区域也会出现:

        SNAGHTML53485bb

        我在上方显示了一个相对较窄的条形,但是’如果要使用CSS(此图像被缩小),则没有什么可以阻止您将顶部区域变大:

        SNAGHTML2418631

        但是,当然,这仅适用于现代页面–传统页面通常没有这些区域或不支持SPFx扩展:

        SNAGHTML48946

        I’稍后将讨论端到端的过程,但是直接看代码-对文档中建议的代码进行一些小的调整/简化,我的代码看起来像这样:

        通过在扩展名中添加SCSS文件来实现CSS’s directory –我的名为AppCustomizer.module.scss,具有以下内容:

        请记住,这已导入到您的定制程序的类中,例如:

        import styles from './AppCustomizer.module.scss';

        So, the key elements 这里are:

        • ApplicationBaseCustomizer
        • 使用 this.context.placeholderProvider.tryCreateContent() 引用合适的占位符的方法及其’的内容-它使您可以操作DOM元素的事实(例如,设置innerHTML)

        部署选项–全球或逐站点

          在什么方面 同事 您在双色球推荐一注上的定制程序,可以通过两种方式在生产环境中执行此操作:

          • 逐站点 –通过这种方法,您可以在应用程序包装中添加一些声明性XML,然后确保将应用程序从“应用程序目录”安装到扩展应在其中运行的每个站点。具体来说,您的定制程序有一个包含清单文件的清单文件’s ID ([MyCustomizer].manifest.json), and on top of this you actually add an elements.xml file with a CustomAction element (just like the old days!). This has a 新 "’ClientSideComponentId”属性,并且必须指向您的定制工具的ID。
          • 全局/脚本 –在这种方法中,您将 skipFeatureDeployment 归因于“true” in youre package-solution.json 文件,然后使用CSOM或REST根据需要以编程方式将CustomAction添加到每个双色球推荐一注(例如,通过迭代或包含在某些配置代码中)。看到 //dev.office.com/sharepoint/docs/spfx/tenant-scoped-deployment 更多细节。使用这种方法时,管理员可以选择在安装到应用程序目录中时使SPFx Web部件/扩展名全局可用:

            SNAGHTMLf7281c2

            SPFx Web部件将显示在每个站点中,但是正如我所说,对于SPFx扩展,您还需要使用CustomAction / ClientSideComponentId来照顾到您所需的每个站点/双色球推荐一注的程序化关联/注册。 看我的帖子 管理跨SharePoint双色球推荐一注的租户范围的SPFx扩展 一些PowerShell / C#代码可以做到这一点。

          但是在包装生产之前’是一种模式,您可以在担心打包之前开发/测试定制程序。通过运行一个“gulp serve”在本地并向现代页面添加一些querystring参数,以便从本地主机加载清单– it’s a bit like the “local SPFx workbench”等效,但适用于SPFx扩展程序/定制程序。

          但是我不’t need placeholders –我只想在每个页面上引用一些JavaScript!

          在这种情况下,代码会更简单。如果您有一个外部JS文件,想以一种快速而肮脏的方式进行引用,可以通过将脚本标签动态添加到<head>页面的元素。我的测试表明,在onInit方法中执行此操作似乎很安全,但是onRender方法也可以– in any case, it’只是这样的老式方法:

          但是考虑一下!

          • 如果JS托管在另一个域上,则可能需要在该域上启用CORS(取决于您的JS在做什么)
          • 如果您要引用模块脚本,则可以通过将其作为外部模块中的外部模块来引用,从而以一种更简洁的方式进行操作"externals"config.json文件的部分(请参阅 将外部库添加到SharePoint客户端Web部件 了解更多)。我已经测试过,这种方法确实可以与Application Customizer一起使用
          • 您也可以选择捆绑脚本(如果有必要的话),并确保在定制程序的onRender方法中引用了该脚本。那也应该工作。

          处理

          无论您要定位页面占位符还是仅在每个页面上引用脚本,此过程实际上都是相同的:

          如果需要,更新SPFx Yeoman Generator

          您可能需要做的第一步是更新SPFx Yeoman Generator–假设您已经安装了所有位,则可以通过键入“yo”在命令行上,然后执行更新过程:

          SNAGHTML38f4e932

          选择“更新您的发电机” option and select “@ microsoft / sharepoint”:

          SNAGHTML38f64e11

          SNAGHTML38f7128a

          创建应用程序定制程序扩展

          [注:一世’m本质上是复制/遍历 主要“建立您的第一个扩展” documentation 这里–您也应该参考。]

          一旦您’准备好实际创建您的应用定制程序,可以通过运行该生成器来完成:

          SNAGHTML3902e5e2

          为您的解决方案命名,并确保选择“Extension” option:

          SNAGHTML1dbcd6b

          在这种情况下,我们’重新使用应用程序定制程序(而不是ListView命令集定制程序[CustomAction /工具栏替换]或字段定制器[JSLink /字段替换]):

          SNAGHTML1d772eb

          为您的定制器提供一个名称,然后提供一个描述:

          SNAGHTML212d82d

          然后,生成器将忙于使用适当的文件创建您的应用程序,然后您’ll see:

          SNAGHTML2114dd4

          现在,您的应用程序已创建,您’将获得样板代码(在更高版本的SPFx中看起来可能与此稍有不同):

          SNAGHTML2152c30

          It’s a good idea to test running this in debug mode before making any code changes, so do this by running a 喝一口 with the “nobrowser” switch:

          SNAGHTML216506c

          下一步是浏览到新页面,但在URL中添加了一些querystring参数,以便加载定制程序的* local *清单。首先,打开浏览器到现代页面–文档库是一个不错的选择:

          SNAGHTML21b7c46

          然后在记事本或类似工具中,构建所需的querystring参数。这种基本格式是:

          ?loadSPFX=true&
          debugManifestsFile=//localhost:4321/temp/manifests.js&
          customActions={"badba93c-7f98-4a68-b5ed-c87ea51a3145":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}
            

          但是你’我需要用您的定制工具中的ID替换ID’s manifest file:

          SNAGHTML224e8a1

          SNAGHTML226aa94

          如果将其粘贴到浏览器窗口中文档库的URL的末尾并按Enter,您将看到与调试模式有关的警告消息:

          SNAGHTML228610e

          点击“Load debug scripts”按钮,然后您的代码应执行,您应该看到结果–在样板代码的情况下,’s an alert box:

          SNAGHTML22a488b

          成功!您’现在,可以在调试模式下运行Application Customizer。

          生产包装(逐站点/声明性方法)

          为此,我建议您按照文档中的步骤操作(从 将扩展部署到SharePoint) –但以下是主要步骤的摘要。最终,它围绕:

          1. 生成您的应用程序,并将捆绑的JS文件部署到CDN之类的地方(就像SPFx Web部件一样)
          2. 将一些打包文件添加到您的应用程序,以便在将应用程序添加到双色球推荐一注时调用自定义程序(有点像功能激活)–实际上,它是功能激活;))
          3. 将应用程序包部署到应用程序目录,然后将其添加到站点

          在过程方面,关键步骤为:

          • 创建SharePoint / Assets文件夹并添加一个elements.xml文件:

            SNAGHTML3954c9a1
          • 将内容添加到elements.xml– set the “ClientSideComponentId”到您的定制工具的标识符,即在[MyCustomizer] .manifest.json文件中找到的标识符 (请记住,如果您打算使用skipFeatureDeployment = 真正并通过脚本进行全局部署,则可以跳过此步骤):

            <?xml version="1.0" encoding="utf-8"?>
            <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
                <CustomAction
                    Title="COB Global JS"
                    Location="ClientSideExtension.ApplicationCustomizer"
                    ClientSideComponentId="5dba1a34-6bbe-42ef-be72-94e01b527ce2">
                </CustomAction>
            </Elements>
                  

          • 编辑config \ package-solution.json文件– add a “Features”节点以引用您的elements.xml文件。它需要类似于以下内容:

              "features": [{
                  "title": "COB AppCustomizer - global JS",
                  "description": "Adds 一些 JavaScript to every page in the site",
                  "id": "456da147-ced2-3036-b564-8dad5c1c2e34",
                  "version": "1.0.0.0",
                  "assets": {        
                    "elementManifests": [
                      "elements.xml"
                    ]
                  }
                }]
          •       
          • 请注意与JS捆绑包的CDN托管相关的其他一些步骤(例如,更新‘cdnBasePath’ property in the ‘write-manifests.json’文件),然后分别使用“ gulp bundle --ship”和“ gulp package-solution --ship”来捆绑和打包您的应用。
          • As I say, 头 to 文档 实际执行此操作的全部步骤。

            然后将应用上传到应用目录:

            SNAGHTML2dc2e6a

            请注意,此时,管理员需要信任该应用程序,并将看到远程文件的托管位置-在我的情况下,我使用了Office 365公用CDN:

            SNAGHTML9a5ac5

            然后,您应该看到您的定制程序生效,并且如果您继续查看,’会看到一个网络范围的功能(默认情况下),它将您的定制程序绑定到该站点:

            SNAGHTML2cbe9ae

          其他事项 

          • 财产袋– as shown in the “建立您的第一个扩展” page, there’可以与定制程序一起使用的各种属性包。在生产模式下,属性是在elements.xml文件的CustomAction元素中指定的。在我的示例中,我选择使用直接在代码中指定的值,但是此属性包提供了 一些 分离级别(但仍会烧入您的包装中)

          定制愉快!

          张贴者 Chris O'Brien 23:07 3 comments 链接到这篇文章