如何让我的 VSTS Extension Splitter 记住用户是否折叠了面板？

Question

我正在构建 VSTS 扩展，我想利用 Microsoft 提供的平台 UI 控件。也就是说，我想利用拆分器控件。我尽力遵循 documentation，但写得不是很好。我还查看了 Micrsoft 在 Github.

上提供的示例

我终于能够让 UI 拆分器通过切换按钮正常工作，但我还希望控件是有状态的。一个很好的例子可以通过转到 Backlogs 中心并折叠 Backlog 浏览器 来查看。如果我离开那个页面再回来，那一边仍然是折叠的。我检查了源代码以查看生成的源代码是什么样的，但我的控件仍然没有保留其状态。到目前为止，这是我的代码，我不确定我遗漏了什么：

<!DOCTYPE html>
<html>
    <head>
        <script src="dist/vss-web-extension-sdk/lib/VSS.SDK.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            VSS.init({
                explicitNotifyLoaded: true,
                usePlatformScripts: true,
                usePlatformStyles: true
            });

            VSS.ready(function () {
                require(["VSS/Controls", "VSS/Controls/Splitter"]);

                VSS.notifyLoadSucceeded();
            });
        </script>

        <div class="hub-view explorer">
            <div class="splitter horizontal stateful toggle-button-enabled">
                <script class="options" defer="defer" type="application/json">
                    {
                        "collapsedLabel": "Custom Explorer",
                        "settingPath": "Web/UIState/Custom/Splitter",
                        "initialSize": 217
                    }
                </script>

                <div class="leftPane">
                    <div class="left-hub-content">
                        Left Pane Content
                    </div>
                </div>
                <div class="handleBar">
                    <div class="handlebar-label" title="Custom Explorer">
                        <span class="handlebar-label-text">Custom Explorer</span>
                    </div>
                </div>
                <div class="rightPane">
                    <div class="hub-title">Content Placeholder</div>
                    <div class="right-hub-content">
                            Right Pane Content
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

您可以通过 Data storage:

存储用户范围内的数据

// Get data service
    VSS.getService(VSS.ServiceIds.ExtensionData).then(function(dataService) {
        // Set value in user scope
        dataService.setValue("userScopedKey", 12345, {scopeType: "User"}).then(function(value) {
            console.log("User scoped key value is " + value);
        });
    });


// Get data service
    VSS.getService(VSS.ServiceIds.ExtensionData).then(function(dataService) {
        // Get value in user scope
        dataService.getValue("userScopedKey", {scopeType: "User"}).then(function(value) {
            console.log("User scoped key value is " + value);
        });
    });

用户声音：Persist toggle state of splitter control in VSTS extension

Answer 2

我们还没有发布 SDK 来存储 Splitter 控件的状态，这会导致代码中的 "settingPath" 选项（不确定您如何获得此选项，因为它不在我们的官方文档中）不行。所以目前没有任何方法可以自动实现。对不起。请对 Starain 提交的功能请求进行投票，以便我们可以优先考虑此功能。

如何让我的 VSTS Extension Splitter 记住用户是否折叠了面板？

How can I have my VSTS Extension Splitter remember if a user collapsed the panel or not?

html

javascript

azure-devops

azure-devops-extensions