Question

我有一个屏幕，我们有4个标签，每个标签应按照登录优先级显示。

例如：部门，角色，员工，屏幕是标签。

每个标签都有按钮来添加，编辑和删除数据。默认情况下，当我向任何用户登录时，它会转到第一个选项卡，但并非所有用户都将第一个选项卡作为他们的要求。

如何在html客户端应用程序中动态解决此问题

Answer 1

正如以下LightSwitch团队博客文章末尾所述，您可以使用screen.showTab方法以编程方式更改选项卡：

Creating a wizard-like experience for HTML client (Andy Kung)

但是，为了在加载屏幕时使用此showTab API命令，需要延迟其使用，直到屏幕完全显示。这可以通过使用jQuery mobile pagechange event（LightSwitch HTML Client使用jQuery mobile）和setTimeout with a zero timeout的组合在屏幕创建的方法中实现（延迟showTab直到呈现加载屏幕））。

以下显示了如何使用此方法动态设置初始屏幕选项卡的简短示例：

myapp.BrowseScreen.created = function (screen) {
    var initialTabName = localStorage.getItem("Rolename") + "Tab";
    $(window).one("pagechange", function (e, data) {
        setTimeout(function () {
            screen.showTab(initialTabName);
        });
    });
};

根据您的earlier post，您似乎正在使用LocalStorage来跟踪您登录的用户及其角色。

在此基础上，上面的示例假定用户的角色将是决定屏幕加载时显示的选项卡的因素（在上例中，屏幕被命名为BrowseScreen）。

它还假设您的标签以每个员工角色命名（后缀为文本'Tab'），例如分配了“DepartmentManager”角色的用户将被定向到名为“DepartmentManagerTab”的选项卡。

虽然稍微涉及一些，但如果您更愿意避免页面更改和setTimeout，则可以自定义LightSwitch库以引入新的navigationComplete屏幕事件。这个新事件非常适合执行依赖于完全渲染的屏幕的任何操作（例如使用showTab函数导航到不同的选项卡）。

如果您想介绍这个附加事件，您需要通过在HTML客户端的default.htm文件中进行以下更改来引用LightMwitch库的未缩小版本（从中删除.min库脚本参考结束）：

<!--<script type="text/javascript" src="Scripts/msls-?.?.?.min.js"></script>-->
<script type="text/javascript" src="Scripts/msls-?.?.?.js"></script>

上面一行中的问号将与您正在使用的LightSwitch版本有关。

然后，您需要在Scripts / msls中找到代码部分 - ？。？。？。js文件，声明completeNavigation函数并按如下所示进行更改：

function completeNavigation(targetUnit) {
    msls_notify(msls_shell_NavigationComplete, { navigationUnit: targetUnit });

    var screen = targetUnit.screen;
    var intialNavigation = !screen.activeTab;
    var selectedTab = targetUnit.__pageName;
    if (screen.activeTab !== selectedTab) {
        callNavigationUnitScreenFunction(targetUnit, "navigationComplete", [intialNavigation, selectedTab]);
        screen.activeTab = selectedTab; // Set at the end of the process to allow the previous selection to be referenced (activeTab)
    }
}
function callNavigationUnitScreenFunction(navigationUnit, functionName, additionalParameters) {
    var screenObject = navigationUnit.screen;
    var constructorName = "constructor";
    var _ScreenType = screenObject[constructorName];
    if (!!_ScreenType) {
        var fn = _ScreenType[functionName];
        if (!!fn) {
            return fn.apply(null, [screenObject, navigationUnit].concat(additionalParameters));
        }
    }
}

然后，您可以在屏幕中使用此新事件，如下所示：

myapp.BrowseScreen.navigationComplete = function (screen, navigationUnit, intialNavigation, selectedTab) {
    if (intialNavigation) {
        var initialTabName = localStorage.getItem("Rolename") + "Tab";
        screen.showTab(initialTabName);
    }
};

当导航事件完成时（包括更改选项卡），当初始加载屏幕时initialNavigation参数设置为true，并且反映所选选项卡的selectedTab参数将触发此事件。

尽管对一些经验丰富的LightSwitch开发人员来说，对LightSwitch库的修改并不少见，但如果您决定沿着这条路走下去，那么您需要彻底测试任何不良副作用的变化。此外，如果升级LightSwitch版本，则需要在新版本中重复库修改。

LightSwitch浏览模板中的选项卡式屏幕

1 个答案: