LoginSignup
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-21

概要

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

検索結果.png

検索ボタンをクリックすると、検索ワードでiTunes Search APIを使って検索し、
その結果をリストに表示する。
リスト表示はServiceNowのList Layoutをそのまま使用したいため、検索結果を一旦テーブルに保持し、そのテーブルのレコードをList Layoutで表示している。
また、今回の検索結果のみを表示するようにフィルターをかけて表示する。
具体的には検索を実行するたびにGUID(ユニークな32桁の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」を新規作成し、下記の通り設定を行う。

ListControl.png

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

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

List Layoutの作成

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

ListLayout.png

これにより、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();」は32桁のユニークなIDを生成している。

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

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

最後に

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6