azure app service で kintone アプリデータ公開その５です。
ブラウザー上で、kintone アプリデータをグリッド表示します。

概要

これまで作ってきた REST API, JS API を使って、グリッド表示を実装します。
今回は、プラグインでも使っている ParamQuery Grid Pro を使ってみます。

参考情報

簡単なグリッド表示確認用なので、フリーの ParamQuery grid でもOKのはず。

グリッド表示処理の追加

list.js, list.pub で、グリッド表示処理を行います。

app.js の変更内容

listRouter 処理の２行を追加します。

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
require('dotenv').config();

var indexRouter = require('./routes/index');
var apiv1Router = require('./routes/apiv1');
var usersRouter = require('./routes/users');
var customerRouter = require('./routes/customer');
var listRouter = require('./routes/list');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/api/v1', apiv1Router);
app.use('/users', usersRouter);
app.use('/customer', customerRouter);
app.use('/list', listRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

list.js を追加

customer.js からレコード取得を削除した処理です。

list.js

var express = require('express');
var router = express.Router();

/* GET customers listing. */
router.get('/', function (req, res, next) {
    const finfos = [ 
        { label: '会社名', fcode: '会社名'},
        { label: '担当者名', fcode: '担当者名' },
        { label: 'メールアドレス', fcode: 'メールアドレス' }
    ];
    const fields = finfos.map((finfo) => {
        return finfo.fcode;
    });

    res.render('list', {
        title: '顧客一覧',
        finfos: finfos
    });

});

module.exports = router;

layout.pub の変更

ページのヘッダー部分に、rex0220-kbrowser.js を読込み共通でJS API が利用できるようにします。

layout.pub

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='/javascripts/axios.min.js')
    script(src='/javascripts/rex0220-kbrowser.js')
  body
    block content

list.pub の変更

グリッド表示に必要な JavaScript を読み込みます。
グリッド表示用ライブラリ等は、/public/lib/~ に配置しておきます。

list.pub

extends layout

block content

  div(class="kb-rex0220-page-mode") index
  div(class="kb-main-content")
    h1= title

    div(id="kb-list-grid")

  script(src='https://js.cybozu.com/jquery/1.11.3/jquery.min.js')
  script(src='https://js.cybozu.com/jqueryui/1.11.3/jquery-ui.min.js')
  link(rel='stylesheet', href='https://js.cybozu.com/jqueryui/1.11.3/themes/smoothness/jquery-ui.css')
  script(src='/lib/paramquery-7.1.0/pqgrid.min.js')
  link(rel='stylesheet', href='/lib/paramquery-7.1.0/pqgrid.min.css')
  link(rel='stylesheet', href='/lib/paramquery-7.1.0/pqgrid.ui.min.css')
  script(src='/javascripts/list-table.js')

list-table.js を追加

実際に JS API で、kintone アプリレコードを取得して、グリッド表示する処理です。
ページ読込後に実行されるように制御しています。
最終的には kintone のように、イベント処理で記述できるようにしたいですね。

list-table.js


jQuery.noConflict();
(function ($) {
    'use strict';

    window.addEventListener('load', function() {
        console.log('list.js');

        var parm = {
            app: 549,
            query: 'order by $id'
        };

        kbrowser.api('/api/v1/list', 'GET', parm).then(function(resp) {
            console.log('list api', resp);
            var records = resp.records;
            var data = records.map(function(row) {
                return {
                    '会社名': row['会社名'].value,
                    '担当者名': row['担当者名'].value,
                    'メールアドレス': row['メールアドレス'].value
                }
            });
            var colM = [
                { title: '会社名', dataIndx: '会社名', width: 200, dataType: 'string' },
                { title: '担当者名', dataIndx: '担当者名', width: 200, dataType: 'string' },
                { title: 'メールアドレス', dataIndx: 'メールアドレス', width: 200, dataType: 'string' },
            ];

            var obj = {
                width: '80%',
                height: 700,
                resizable: true,
                title: 'Grid From API',
                showBottom: false,
                scrollModel: { autoFit: true },
                colModel: colM,
                dataModel: { data: data }
            };

            $('#kb-list-grid').pqGrid(obj);            

        });
    });
})(jQuery);

グリッド表示結果

これで、グリッド表示が出来ました。
もう少しグリッド表示の設定を工夫すれば、業務でも使えそうです。

次にやること

REST API, JS API の土台ができましたので、ログイン・セッション管理などを追加して、一般公開できるところまで持っていきたいです。

あとがき

pub の使い方など、まだまだ分からないところが多いですが、各チュートリアルなどを参考にして短期間でグリッド表示までできました。
一般公開も azure app service を利用すれば、手軽にできます。
node.js, Express, kintone の組合せでいろいろ可能性がありますね。