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

Question

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>

starian chen-MSFT · Accepted Answer · 2017-10-13T01:50:13.493

0

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

edited Oct 13 '17 at 01:50

answered Oct 05 '17 at 04:35

starian chen-MSFT

33,174
2
29
53

In order to store the state of the UI Splitter (collapsed, expanded) I have to manage the data storage myself? It isn't something that the platform provides? – myermian Oct 05 '17 at 13:18
@m-y The data storage is the part of VSTS extension and you don't need to manage the data storage by yourself, you just need to call the API to set and get the data. – starian chen-MSFT Oct 06 '17 at 01:34
I understand that part. My question was if I'm expected to utilize the data storage API to manage the state of the UI Splitter? It seems that the UI Splitter should manage its own state automatically. I thought adding the css class `stateful` would do that, but it doesn't. – myermian Oct 06 '17 at 15:12
@m-y You need to manage the state by yourself by using data storage API. – starian chen-MSFT Oct 09 '17 at 01:32
@m-y Do you solve the issue after using data storage? – starian chen-MSFT Oct 12 '17 at 06:56
I understand that I'll need to utilize the storage API to manage the state on my own, I have not done so yet, and don't plan on doing it. I will either skip this feature or hope that Microsoft shares the code or feature to automatically do this. I don't really feel like implementing this code myself when a solution already exists, it just has yet to be shared. – myermian Oct 12 '17 at 14:26
@m-y It is a good feature, I submit a user voice (Update my answer) that you can vote. – starian chen-MSFT Oct 13 '17 at 01:56
Although I chose not to implement the feature myself, I feel that at the current time your answer is the correct answer (to utilize the storage api). I personally will wait for the sdk to include this feature though and vote on the UV ticket. – myermian Oct 13 '17 at 14:44

score 0 · Answer 2 · answered Oct 13 '17 at 03:08

0

We haven't published the SDK to store the state of Splitter control which cause the "settingPath" option (Not sure how do you get this option since it is not in our official documentation) in you code will not work. So there isn't any way to achieve that automatically for now. Sorry for that. Please vote on the feature request that Starain submitted so that we can prioritize this feature relative to others.

answered Oct 13 '17 at 03:08

Eddie Chen - MSFT

29,708
2
46
60

I viewed the source on another page and copied that option thinking that it was an undocumented feature. – myermian Oct 13 '17 at 14:45

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

2 Answers2