0

我正在替换允许主应用程序页面触发与原始页面对话的无头窗口的服务器端解决方案。

现在我正在使用 SPFx 在 SPO 中执行此操作，到目前为止，我只使用了一个页面和 web 部件，其中包含一个无法退出发送页面的大对话框。

我的用户希望能够将对话框放在第二台显示器上，所以我认为我必须在不同的窗口/Web 部件中进行。我正在计划一个 2.0 版本并收集如何做的想法。

到目前为止，我认为我将使用“广播频道”在父页面/Web 部件和子页面/Web 部件之间进行通信。

我仍然需要弄清楚以下几点：

  1. 如何创建仅包含 SPFx Web 部件的共享点页面，而没有所有侧面和顶部 bla bla。（可以安全地被 CSS 隐藏？）
  2. 如何将 spfxContext 从父级传递给子级
  3. 如何在构建解决方案时同时调试 2 个单独的 SPFx 项目。

欢迎任何建议。样品更多  

先感谢您。

4

1 回答 1

0
  1. 尝试使用扩展：
export default class CssInjectApplicationCustomizer
  extends BaseApplicationCustomizer<ICssInjectApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    const cssUrl: string = '/SiteAssets/inject.css';
    const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
    let customStyle: HTMLLinkElement = document.createElement("link");
    customStyle.href = cssUrl;
    customStyle.rel = "stylesheet";
    customStyle.type = "text/css";
    head.insertAdjacentElement("beforeEnd", customStyle);

    return Promise.resolve();
  }
}

注入.css：

/* Hide header */
#SuiteNavPlaceHolder, .od-SuiteNav{
    display:none !Important;
}

/** Hide options header **/
div[class^="sideActionsWrapper-"], 
.sideActionsWrapper-53 .ms-searchux-searchbox {
    display: none;
}

/** Hide header lists**/
.CanvasSection .ms-DetailsList-headerWrapper,
.CanvasSection div[class^="itemsViewDetailsListCommandBar_"]{
    display: none;
}

/** Hide Header page **/
div[class^="detailsListContainer_"], 
.ControlZoneEmphasisBackground,
.root-63, 
.root-76{
    background-color:transparent;
}
于 2021-03-09T09:55:49.287 回答