azure app service で kintone アプリデータ公開その５（グリッド表示）

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

概要

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

参考情報

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

• ParamQuery Grid Pro
• ParamQuery grid

グリッド表示処理の追加

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 の組合せでいろいろ可能性がありますね。