かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

LightSwitch(HTML Client)のVisual Collection覚書

LightSwitch JavaScript

リファレンス的なドキュメントってどこにあるんでしょう…LightSwitchのJavaScriptライブラリ達。（コードがドキュメント？）
とまぁいきなり愚痴ですが、ちょいちょいとLightSwitchのHTML Clientを触ってみてます。こいつは、なかなかデキルやつでレスポンシブでタッチフレンドリーなUIをさくさくと作れる優れもの。JavaScriptを要所要所で書くことが出来るので、その気になればダサいテーブルとかも自分で組み込むことが出来ちゃう。つまり細部まで知ったうえで使えば、簡単なアプリ作りをするうえでの心強い味方になってくれる可能性が無きにしも非ずな可能性を感じます。

ということで、今日の本題。

JavaScriptのVisualCollection覚書

色々試してて、データを読み込んだりするのに使ったメソッドとかです。

VisualCollectionの取得方法

ページにProductsというクエリやテーブルを作ってる場合は、以下のようなJavaScriptで取得できる。

var collection = screen.Products;

その他に、Productsをレンダリングするカスタムコントロールの場合は、関数の引数のcontentItemのvalueがProductsのVisualCollectionになってる

myapp.BrowseProducts.ProductsItem_render = function (element, contentItem) {
  var collection = contentItem.value; // これで取得できる
}
読み込み完了かどうかの判定と読み込み

isLoadedプロパティで読み込み完了かどうか確認できる。falseの場合はloadメソッドを使ってデータの読み込みを行う。

var collection = contentItem.value;
// renderRowsというデータを描画する関数があるとする
function isLoadedChanged() { renderRows(collection.data); }
if (collection.isLoaded) {
    // 読み込み済みならレンダリングする
    renderRows(collection.data);
} else {
    // 読み込み済みじゃないならisLoadedにイベントハンドラしかけて、loadを呼ぶ
    collection.addChangeListener('isLoaded', isLoadedChanged);
    collection.load();
}
実際に読み込まれてるデータを取得する

上の例でも出てますがdataで取得できます。

var collection = contentItem.value;
// 読み込み済みデータを取得（配列になってる）
var items = collection.data;
続きを読み込む

canLoadMoreプロパティで、まだ続きのデータを読み込めるか判定して、読み込めるようならloadMoreメソッドで読み込みを行う。loadMoreメソッドはPromiseを返すのでthenとかで繋げて読み込み完了時の処理とかが書ける。

// まだ続きがあるか確認
if (screen.Products.canLoadMore) {
    // 続きがあるならloadMoreで読み込む。
    screen.Products.loadMore().then(function (result) {
        // 読み込み結果はitemsで取得できる
        renderRows(result.items);
    });
}
選択中のアイテムを取得

selectedItemプロパティで取得・設定可能。

// 選択中のアイテムを取得
var item = screen.Products.selectedItem;