ServiceNowのUI PAGEでREST APIの検索結果をページネーション付きのリストで表示する

13990 ワード
page ページネーション rest list ServiceNow rest テキストリンク

概要

UI PAGEで下記のような画面を作成する。

検索ボタンをクリックすると、検索ワードでiTunes Search APIを使って検索し、
その結果をリストに表示する。
リスト表示はServiceNowのList Layoutをそのまま使用したいため、検索結果を一旦テーブルに保持し、そのテーブルのレコードをList Layoutで表示している。
また、今回の検索結果のみを表示するようにフィルターをかけて表示する。
具体的には検索を実行するたびにGUID(ユニークな３２桁のID)を生成し、検索結果をテーブルに格納時にGUIDを合わせて保存する。表示する時に、今回のGUIDでフィルターをかけている。

なお、List LayoutにArtWorkのURLを保持しているが、このURLを元に、List Layout内でイメージに表示をする方法は不明であったため、そのまま画像のURLを表示している。

環境

ServiceNow : KINGSTONE

iTunesのSearch APIの起動は下記で作成したOutbound MESSAGEを使用している。
ServiceNowでiTunesのRestAPIを使用する(上編）

手順

テーブル作成

検索結果を保存するためのテーブルを作成する。

項目 値
Label TrackList
Name x_58872_needit_tracklist

なお、NameはLabelから環境に応じて自動生成されるため、環境によって異なる。
今後、このテーブルを使用時には、自動生成されたNameの値を使用する。

このテーブルに下記の列を追加する。

Label Name Type Max length
Track Name rack_name String(Full UTF-8) 200
Art Work art_work URL 1024
runid runid String(Full UTF-8) 50
Search Word search_word String(Full UTF-8) 200

List Controlの作成

「Form & UI」の「List Control」を新規作成し、下記の通り設定を行う。

これは、検索結果を表示したときに追加ボタンやフィルダー情報を表示しないようにするための制御となる。

Omit new button、Omit edit button、Omit filtersによりそれぞれ、新規ボタン、編集ボタン、フィルターが非表示の設定となる。

List Layoutの作成

「Form & UI」の「List Layout」を新規作成し、下記のようにTrackNameをArtWorkを選択しておく。

これにより、TrackListをリスト表示したときに、TrackNameとArtWorkの列のみ表示される。

UI PAGE の作成

「Form & UI」の「UI Page」を新規作成する。

HTMLに下記の通り入力する。

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">



<g:ui_form>
    <table>
        <tr>
            <td>
                <g:ui_input_field 
                    label="検索ワード" 
                    name="searchInput" 
                    value="${searchWord}" 
                    size="50"/>
            </td>
        <td>
            <g:ui_button>検索</g:ui_button>
            </td>
        </tr>
    </table>


</g:ui_form>


<div id="resultList">       

<iframe src="x_58872_needit_tracklist_list.do?sysparm_query=runid=${runid}" 
    style="min-height:1024px;width:100%;" 
    scrolling="no" 
    frameborder="0">
</iframe>
</div>

</j:jelly>

iframeのソースとして下記を指定しる。
これがリスト表示の肝となる部分だ。


x_58872_needit_tracklist_list.do?sysparm_query=runid=${runid}"

「x_58872_needit_tracklist_list.do」は、作成したテーブルの「Name」+ 「_list.do」で作成する。テーブルのNameは環境によって異なるので書き換えが必要だ。

「sysparm_query=runid=${runid}」の部分は表示するレコードのフィルターの設定を行なっている。
これにより、「runid」の値が${runid}の値のレコードのみ表示される。
${runid}はサーバー側のスクリプトで設定した値となる。

UI Pageのサーバースクリプト

UI PageのProcessing sriptには下記の通り入力する。

try { 


    var searchWord = searchInput;
    //var searchWord = request.getParameter('searchword');
     gs.info('searchWord = ' + searchWord);
    var r = new sn_ws.RESTMessageV2('x_58872_needit.iTunesSearch', 'Default GET');

    r.setStringParameterNoEscape('term', searchWord);
    r.setStringParameterNoEscape('country', 'jp');
    r.setStringParameterNoEscape('lang', 'ja_jp');
    r.setStringParameterNoEscape('media', 'music');
    r.setStringParameterNoEscape('attribute', 'artistTerm');
　
    var response = r.execute();
    var responseBody = response.getBody();
    var httpStatus = response.getStatusCode();

    var parser = new global.JSON();
    var parsed = parser.decode(responseBody);

    var gr = new GlideRecord('x_58872_needit_tracklist');
    //gr.deleteMultiple();

    var runid = gs.generateGUID();

    for (var i = 0; i < parsed.results.length; i++) {
        var result = parsed.results[i];
        gs.info('trackName = ' + result.trackName);

         gr.initialize(); // レコード初期化

        //　レコード設定
        gr.setValue('track_name', result.trackName);
        gr.setValue('art_work', result.artworkUrl60);       
        gr.setValue('search_word', searchWord);
        gr.setValue('runid', runid);

        gr.insert();     // レコード追加


    }



}
catch(ex) {
 var message = ex.getMessage();
}

REST Messageの起動部分については下記を参考にして欲しい。

ServiceNowでiTunesのRestAPIを使用する(上編）
中編
下編

今回は、REST Messageで取得したJSONメッセージからtrackname、artworkUrl60を取得している。
また、「var runid = gs.generateGUID();」は３２桁のユニークなIDを生成している。

取得した検索結果を検索ワード、IDと共にTrackListテーブルに追加している。

画面上のリストでは、このIDでフィルターをかけているので、今回の検索結果のみが表示される。

最後に

今回は検索のたびに、検索結果がテーブルに追加される。
たまったレコードは下記を参考に定期的に削除可能だ。

ServiceNowでお手軽にテストデータの追加と削除を行う