Как я могу вспомнить мой VSTS Extension Splitter, если пользователь свернул панель или нет?

Я создаю расширение VSTS и хочу воспользоваться преимуществами элементов управления пользовательского интерфейса платформы, предлагаемых Microsoft. А именно, я хочу воспользоваться возможностью управления сплиттером. Я старался следовать документации как можно лучше, но она не так хорошо написана. Я также посмотрел образцы, предложенные Micrsoft на Github.

Я наконец смог заставить пользовательский интерфейс Splitter работать должным образом с помощью переключателя, но я также хотел, чтобы элемент управления был с состоянием. Хороший пример этого можно увидеть, перейдя в центр 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>
Источник

2 ответа

Решение

Вы можете хранить данные в области действия пользователя через хранилище данных:

// 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: постоянное переключение состояния управления разделителем в расширении VSTS

Источник

Мы не опубликовали SDK для хранения состояния элемента управления Splitter, который вызывает параметр "settingPath" (не уверен, как получить этот параметр, поскольку он отсутствует в нашей официальной документации), в вашем коде работать не будет. Так что пока нет способа достичь этого автоматически. Простите за это. Пожалуйста, проголосуйте за запрос функции, который подал Starain, чтобы мы могли расставить приоритеты этой функции по отношению к другим.

Источник
Другие вопросы по тегам