【问题标题】:How can I set selected tab in EPiServer CMS edit view?如何在 EPiServer CMS 编辑视图中设置选定的选项卡?
【发布时间】:2019-01-24 11:42:19
【问题描述】:

我们有一个带有多个选项卡的 EPiServer(表单)编辑视图。客户要求当编辑打开编辑页面时,在特定条件下应自动选择#2 选项卡(称为“替代内容”)。我们不想重新排序选项卡。如何实现?我们正在运行 EPiServer 11。

更新:

我已尝试使用 Dojo 脚本来完成此操作。 EPiServer 中的结果取决于我如何设置它,在这种情况下这对我来说有点奇怪。这是文件

Web\modules\CMSDefaultTabSelector\module.config

这是在 ModifyMetadata 中的调用方式:

...脚本本身 CMSDefaultTabSelector.js 如下所示:

根据您是发送 EditLayoutContainer、Dialog 还是完全跳过它(应该看起来),结果如下:

EditLayoutContainer 的结果

对话框结果

应有的结果

如果我尝试跳过此参数,则会收到错误 “ctor 不是构造函数”。其他布局元素只会呈现一个空选项卡、更奇怪的错误,或者您会收到其他错误消息。如果我使用require([...]),则在每次重新加载页面时都会调用该函数,这不是我想要的。我希望仅在 ModifyMetadata 的代码启动时才调用它。希望有人能提供帮助。

【问题讨论】:

  • 老实说,如果不创建自定义 Dojo 小部件,例如订阅contentContextChanged 事件以确定是否应该选择不同的选项卡,我真的认为没有任何方法可以做到这一点。如果您愿意更改排序顺序,您可以有条件地显示/隐藏选项卡或在满足特定条件时更改排序顺序。这可能会有所帮助:gregwiechec.com/2018/03/hide-tabs-and-properties-in-edit-mode
  • 感谢您的意见。我已经完成了大部分工作,而且我几乎已经完成了 Dojo 部分。我能够在 ModifyMetaData 函数中选择性地加载小部件,并且在加载 Dojo-DOM 时,我在要选择的选项卡上执行 JS 单击。在这一点上,我更好奇是否有更聪明的方法来做到这一点,因为这感觉有点像为了执行一个简单的 hello world 而跳槽和架构。
  • @Ted:我已经用新信息和 Dojo 方法(有自己的怪癖)更新了这个问题。
  • 你试过继承LayoutContainer吗?如果是这样,它是如何呈现的?否则我会避免更改ClientLayoutClass,而是简单地连接到合适的事件。您可以使用 registry 在 UI 中找到 dijit.layout.TabContainer 小部件,以便与编辑选项卡中的小部件进行交互。
  • 仅供参考,我对此很陌生。我试过“dijit/layout/TabContainer”(导致一个空选项卡)、“dijit/layout/ContentPane”(只有属性、没有空格和没有前导文本的选项卡)、“epi/shell/layout/LayoutContainer "(产生一个带有属性和正确间距的选项卡,但每个属性仍然没有前导文本)和“epi/shell/layout/GroupContainer”(产生一个具有完整属性和前导文本的选项卡,但带有选项卡标题文本在选项卡内重复第二次)。这是迄今为止我们得到的最接近的。不知道如何使用注册表找到 TabContainer,就像你说的那样。

标签: c# .net dojo content-management-system episerver


【解决方案1】:

折腾了半天,终于找到了魔法密码。由于其他人可能也想知道这是如何完成的,所以最后是如何解决的(使用 Dojo):

define([
"dojo/_base/declare",
"epi/shell/layout/SimpleContainer"
],

function (
    declare,
    SimpleContainer
)
{
    return declare([SimpleContainer], {
        //constructor: function () {},

        postCreate: function () { /* PostCreate fires too soon, and the tab strip is not completely rendered */ },

        startup: function () {
            // Use Jquery to select the tab we manually want to change to, and click it:
            var tabElement = $("div.dijitContentPane span.tabLabel:contains('Additional content')");
            if ($(tabElement).length) {
                $(tabElement).trigger("click");
            }
        }

    });
}

);

【讨论】:

  • 一个小部件在其postCreate 事件被触发时不一定附加到DOM,这与startup 不同,它在小部件被渲染后被触发。查看 Dojo 小部件上的 生命周期dojotoolkit.org/reference-guide/1.9/dijit/_WidgetBase.html
  • 是的,我知道。我添加了评论以供参考。
猜你喜欢
  • 2011-03-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-23
  • 2011-10-17
  • 1970-01-01
  • 1970-01-01
  • 2012-01-20
相关资源
最近更新 更多