2017-10-04 3 views
0

私はVSTSエクステンションを構築しており、マイクロソフトが提供するプラットフォームUIコントロールを利用したいと考えています。つまり、私はスプリッタコントロールを利用したいと思います。私はできるだけ早くdocumentationに従おうとしましたが、それはうまく書かれていません。私はまた、GithubのMicrsoftが提供しているサンプルを見ました。VSTS Extension Splitterでパネルを折りたたんだかどうかを覚えておくにはどうすればよいですか?

最後に、UIスプリッタをトグルボタンで正しく機能させることができましたが、コントロールがステートフルであることも欲しかったのです。これの良い例は、バックログハブに行き、バックログエクスプローラを畳んで見ることができます。私がそのページを離れて戻ってくると、側はまだ崩壊しています。ソースコードを調べて、生成されたソースコードがどのように見えるのか確認しましたが、私のコントロールはまだその状態を保持していません。

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

答えて

0

あなたは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

+0

UIスプリッタ(折りたたまれて展開された状態)を保存するには、自分でデータストレージを管理する必要がありますか?プラットフォームが提供するものではありませんか? –

+0

@ m-yデータストレージはVSTS拡張の一部であり、自分でデータストレージを管理する必要はありません。データを設定して取得するためにAPIを呼び出すだけで済みます。 –

+0

私はその部分を理解しています。私の質問は、UIスプリッタの状態を管理するためにデータストレージAPIを利用することが期待される場合でしたか? UI Splitterは自動的に独自の状態を管理する必要があります。私はcssクラスを 'ステートフル'クラスに追加することを考えましたが、そうではありません。 –

0

"settingPath"オプションを引き起こすSplitterコントロールの状態を保存するためのSDKは公開していません(公式のドキュメントには記載されていないので、このオプションをどうやって取得するかわかりません)。だから今は自動的に実現する方法はありません。そのために残念。 Starainが提出した機能リクエストに投票して、他のメンバーと比較してこの機能を優先させることができます。

+0

私は別のページにソースを見て、そのオプションが文書化されていない機能だと思ってコピーしました。 –

関連する問題