浏览模板中的 LightSwitch 选项卡式屏幕 [英] LightSwitch Tabbed screen in Browse template
问题描述
我有一个屏幕，其中有 4 个选项卡，每个选项卡都应根据登录优先级显示.
I have a screen where we have 4 tabs, each tab should be displayed as per the login priority.
例如:部门、角色、员工、屏幕是选项卡.
Ex:Department,Role,Employee,Screen are the tabs.
每个选项卡都有用于添加、编辑和删除数据的按钮.默认情况下，当我与任何用户一起登录时，它会转到第一个选项卡，但并非所有用户都将第一个选项卡作为他们的要求.
Each tab is having buttons to add,edit,remove the data. by default when i log with any user its going to the first tab, but not all the users are having the first tab as their requirement.
我如何解决这个问题以在 html 客户端应用程序中动态执行此操作
how can i resolve this to do it dynamically in html client application
推荐答案
如以下 LightSwitch Team 博客文章的结尾所述，您可以使用 screen.showTab 方法以编程方式更改选项卡:
As covered towards the end of the following LightSwitch Team blog post, you can programmatically change the tab by using the screen.showTab method:
为 HTML 客户端创建类似向导的体验 (Andy Kung)
然而，为了在你的屏幕加载时使用这个 showTab API 命令，它的使用需要延迟到屏幕完全显示出来.这可以通过使用 jQuery mobile pagechange 事件(如LightSwitch HTML 客户端使用 jQuery mobile) 和 setTimeout with a zero timeout(延迟 showTab 直到加载屏幕呈现).
However, in order to use this showTab API command when your screen is loading, its use needs to be delayed until the screen has fully displayed. This can be achieved in your screen's created method by using a combination of the jQuery mobile pagechange event (as the LightSwitch HTML Client uses jQuery mobile) and a setTimeout with a zero timeout (to delay the showTab until the loading screen is rendered).
下面是一个简单的例子，说明如何使用这种方法来动态设置初始屏幕标签:
The following shows a brief example of how you can use this approach to dynamically set the initial screen tab:
myapp.BrowseScreen.created = function (screen) {
var initialTabName = localStorage.getItem("Rolename") + "Tab";
$(window).one("pagechange", function (e, data) {
setTimeout(function () {
screen.showTab(initialTabName);
});
});
};
根据您的之前的帖子，您似乎正在使用 LocalStorage 以跟踪您的登录用户及其角色.
Based on your earlier post it appears that you're using LocalStorage to track your logged in user and their role.
在此基础上，上面的示例假设用户的角色将决定在屏幕加载时显示的选项卡(在上面的示例中屏幕名为 BrowseScreen).
On this basis, the above example assumes that the user's role will be the factor dictating the tab they are shown when the screen loads (the screen is named BrowseScreen in the above example).
它还假设您的选项卡以每个员工角色命名(后缀为文本Tab")，例如分配了DepartmentManager"角色的用户将被定向到名为DepartmentManagerTab"的选项卡.
It also assumes that your tabs are named after each employee role (suffixed with the text 'Tab') e.g. a user who is assigned the role 'DepartmentManager' would be directed to a tab called 'DepartmentManagerTab'.
虽然稍微复杂一点，但如果您希望避免 pagechange 和 setTimeout，则可以自定义 LightSwitch 库以引入新的 navigationComplete 屏幕事件.这个新事件非常适合执行依赖于完全呈现的屏幕的任何操作(例如使用 showTab 函数导航到不同的选项卡).
Whilst slightly more involved, if you'd prefer to avoid the pagechange and setTimeout it's possible to customise the LightSwitch library to introduce a new navigationComplete screen event. This new event is ideal for executing any operations dependent upon the screen having fully rendered (such as navigating to a different tab using the showTab function).
如果您想引入这个附加事件，您需要通过在 HTML 客户端的 default.htm 文件中进行以下更改来引用 LightSwitch 库的未缩小版本(以从库脚本参考结束):
If you'd like to introduce this additional event, you'll need to reference the un-minified version of the LightSwitch library by making the following change in your HTML client's default.htm file (to remove the .min from the end of the library script reference):
<!--<script type="text/javascript" src="Scripts/msls-?.?.?.min.js"></script>-->
<script type="text/javascript" src="Scripts/msls-?.?.?.js"></script>
上一行中的问号将与您使用的 LightSwitch 版本相关.
The question marks in the line above will relate to the version of LightSwitch you're using.
然后，您需要在 Scripts/msls-?.?.?.js 文件中找到声明 completeNavigation 函数的代码部分，并将其更改如下:
You'll then need to locate the section of code in your Scripts/msls-?.?.?.js file that declares the completeNavigation function and change it as follows:
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));
}
}
}
然后您可以在屏幕中使用这个新事件，如下所示:
You can then use this new event in your screens as follows:
myapp.BrowseScreen.navigationComplete = function (screen, navigationUnit, intialNavigation, selectedTab) {
if (intialNavigation) {
var initialTabName = localStorage.getItem("Rolename") + "Tab";
screen.showTab(initialTabName);
}
};
每当导航事件完成(包括选项卡的更改)时都会触发此事件，并且在屏幕初始加载时将 initialNavigation 参数设置为 true，并且 selectedTab 参数反映所选选项卡.
This event fires whenever a navigation event completes (including a change of tab) with the initialNavigation parameter being set to true upon the initial load of the screen and the selectedTab parameter reflecting the selected tab.
尽管对一些经验丰富的 LightSwitch 开发人员进行修改 LightSwitch 库的情况并不少见，但如果您决定沿着这条路走下去，则需要彻底测试更改是否有任何不利的副作用.此外，如果您升级 LightSwitch 的版本，则需要在新版本中重复库修改.
Although modification to the LightSwitch library aren't uncommon with some of the more seasoned LightSwitch developers, if you decide to go down this path you'll need to thoroughly test the change for any adverse side effects. Also, if you upgrade your version of LightSwitch, you'll need to repeat the library modification in the new version.
这篇关于浏览模板中的 LightSwitch 选项卡式屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
