Search code examples
javascripthtmlazure-devopsazure-devops-extensions

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

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>
Solution

  • You can store the data with User scope through 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);
        });
    });

    User Voice: Persist toggle state of splitter control in VSTS extension