【パブリッシャー】Sharperlightクエリーを利用したKENDO DataSourceの作成

[Sharperlight](https://sharperlight.jp/)で作成したクエリをSharperlight RESTfulサービス APIエンドポイントとして使用してデータセットを取得し、KENDO DataSourceオブジェクトを作成する方法を紹介してみたいと思います。

通常、Sharperlightは、社内ネットワークやクラウド上にあるアプリケーションサーバーにインストールされます。そして業務に必要なデータが保管されているデータベースとの接続を保持しています。

Sharperlightパブリッシャーで作成された公開クエリは、単にWEBレポートとしてサービス経由で公開されるだけではなく、JSON形式等のデータセットを供給するといった機能も持ちあわせています。

今回は、そのSharperlight RESTfulサービスを利用してJSON形式でデータを取得し、KENDO DataSourceオブジェクトを作成する方法を紹介します。KENDO DataSourceオブジェクトは、KENDO JavaScript Frameworkが提供する様々なコントールにデータを供給するオブジェクトとして使用されます。

## 公開クエリ ##
Sharperlightパブリッシャーを使用して公開クエリの作成を行います。このクエリによって必要なデータセットが返却されます。

**パブリッシャー**をSharperlightアプリケーションメニューより起動します。
`新規`ボタンで公開クエリの作成を開始します。
**コード**、**グループ**および**タイトル**を記入します。
ここで記入した**コード**と**グループ**は、後に指定するエンドポイントURLアドレスの一部として使用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6528a0b7-8eed-9339-6ab5-3a3d0e6ef898.png)
### クエリの作成 ###
`クエリを編集`ボタンでクエリの設計を行います。
#### フィルター ####
クエリビルダが起動したら、フィルターの設定から行います。
**製品**：どのデータソースを使用するかを設定します。ここでは`SAP Business One`を選択します。
**Company**: デモ会社 OEC Computers Australiaを選択。
**テーブル**：A/R Sales Invoice
テーブルの値を選択すると直ぐに必須フィルターが表示されます。背景色が赤色のものです。
また、選択可能フィールド一覧も表示されます。
必須フィルターの`Canceled?`に**N**を指定し、その他の必須フィルターは\<**ALL**\>とします。
選択リストから`Document Date`フィールドをドラッグ＆ドロップで、フィルターに設定します。

また、`Document Date`フィルターと`Customer Code`フィルターの名前をそれぞれ**DocumentDate**、**CustomerCode**とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/83295314-044f-8be6-47e2-3c9c853b50ba.png)
#### 出力アイテム ####
選択リストから以下のフィールドをドラッグ＆ドロップ、あるいはダブルクリックで出力アイテムとして出力領域に設定します。出力アイテムの名前は、参照コードとして後に使用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/68ff0f77-31a9-8b08-1625-840ef5da5713.png)

では、`プレビュー`ボタンでクエリを試行してみます。
クエリが正常に動作し、データが戻ってきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/882d5fdb-9d54-e3bf-1472-254bba5b9a10.png)

クエリを`OK`ボタンで保存します。
クエリの作成が済んだので、公開クエリも`OK`ボタンで保存します。

## クエリエンドポイントURL ##
クエリエンドポイントURLの形式は以下のようになります。
{Sharperlight サービスURL}/DataSource/?query={グループ}.{コード}&dfmt=jsonarray&dcat=UseNames
```
http(s)://xxxxx/mdService1Rest/DataSource/?query=QiitaSample._ds_SAPSalesInvoices&dfmt=jsonarray&dcat=UseNames
```

## KENDO DataSource ## 
下記のコードでSharperlight公開クエリを使用したKENDO DataSourceを作成することができます。
**url属性**に公開クエリのエンドポイントURLを指定します。最後尾にある`&usid={_System.Rest.Usid}`は、Sharperlightのコントロールタグで、実行時にセッション番号に置き換えられます。(このコードが Sharperlight で公開されたクエリに埋め込まれている場合に限る)

**schema -> model -> fields属性**では、公開クエリの出力フィールドをその`名前`で指定します。
```
function _Datasource_Create(){
    try {
        var ds = new kendo.data.DataSource({
            transport: {
                read: {
                    datatype: "jsonp",
                    url: "http://xxxxx/mdService1Rest/DataSource/?query=QiitaSample._ds_SAPSalesInvoices&dfmt=jsonarray&dcat=UseNames&usid={_System.Rest.Usid}"
                }
            },
            schema: {
                model: {
                    fields: {
                        DocNum: { type: "number" },
                        DocDat: { type: "datetime" },
                        CusCod: { type: "string" },
                        CusNam: { type: "string" }
                    }
                }
            }
        });
        return ds;
    }catch(err){
        console.log("Error in _Datasource_Create(): " + err.message);
        return null;
    }
};
```

エンドポイントURLのオプションパラメータとして、公開クエリのフィルターに値を設定することも可能です。
&flt{フィルター名}=xxx&flt{フィルター名}_2=yyyといった感じです。
e.g. &fltDocumentDate=2023/01/01&fltDocumentDate_2=2023/05/31
これは、下図のこの場所にそれぞれ渡されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/353b0f1d-eccf-88c6-5a9c-aeb44eba8341.png)

URL全体としてはこんな感じになります。
```
http://xxxxx/mdService1Rest/DataSource/?query=QiitaSample._ds_SAPSalesInvoices&fltDocumentDate=2023/01/01&fltDocumentDate_2=2023/05/31&dfmt=jsonarray&dcat=UseNames&usid={_System.Rest.Usid}
```

Webアプリケーション等の開発のお役に立てれば幸いです。
P.S. Sharperlightには、KENDO JavaScript Frameworkライブラリが梱包されています。