0

I'm building a VSTS Extension and I want to take advantage of the Platform UI controls offered by Microsoft. Namely, I want to take advantage of the splitter control. I tried to follow the documentation as best as I could, but it is not written out that well. I also looked at the samples offered by Micrsoft on Github.

I was finally able to get the UI Splitter to work properly with a toggle-button, but I also wanted the control to be stateful. A good example of this can be seen by going to the Backlogs hub and collapsing the Backlog explorer. If I leave that page and come back, the side is still collapsed. I inspected the source to see what the generated source code looks like, but my control still does not retain its state. Here is my code so far, I'm not sure what I'm missing:

<!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>
4

2 回答 2

0

您可以通过Data storage以 User 范围存储数据：

// 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);
        });
    });

用户语音：在 VSTS 扩展中保持拆分器控制的切换状态

于 2017-10-05T04:35:34.453 回答
0

我们尚未发布 SDK 来存储 Splitter 控件的状态，这会导致代码中的“settingPath”选项（不确定如何获得此选项，因为它不在我们的官方文档中）将不起作用。所以目前没有任何方法可以自动实现这一点。对此感到抱歉。请对 Starain 提交的功能请求进行投票，以便我们可以相对于其他功能优先考虑此功能。

于 2017-10-13T03:08:16.977 回答