azure app service で kintone アプリデータ公開その５です。
ブラウザー上で、kintone アプリデータをグリッド表示します。
概要
これまで作ってきた REST API, JS API を使って、グリッド表示を実装します。
今回は、プラグインでも使っている ParamQuery Grid Pro を使ってみます。
参考情報
簡単なグリッド表示確認用なので、フリーの ParamQuery grid でもOKのはず。
グリッド表示処理の追加
list.js, list.pub で、グリッド表示処理を行います。
app.js の変更内容
listRouter 処理の２行を追加します。
app.js
varcreateError=require('http-errors');varexpress=require('express');varpath=require('path');varcookieParser=require('cookie-parser');varlogger=require('morgan');require('dotenv').config();varindexRouter=require('./routes/index');varapiv1Router=require('./routes/apiv1');varusersRouter=require('./routes/users');varcustomerRouter=require('./routes/customer');varlistRouter=require('./routes/list');varapp=express();// view engine setupapp.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 handlerapp.use(function(req,res,next){next(createError(404));});// error handlerapp.use(function(err,req,res,next){// set locals, only providing error in developmentres.locals.message=err.message;res.locals.error=req.app.get('env')==='development'?err:{};// render the error pageres.status(err.status||500);res.render('error');});module.exports=app;list.js を追加
customer.js から レコード取得を削除した処理です。
list.js
varexpress=require('express');varrouter=express.Router();/* GET customers listing. */router.get('/',function(req,res,next){constfinfos=[{label:'会社名',fcode:'会社名'},{label:'担当者名',fcode:'担当者名'},{label:'メールアドレス',fcode:'メールアドレス'}];constfields=finfos.map((finfo)=>{returnfinfo.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');varparm={app:549,query:'order by $id'};kbrowser.api('/api/v1/list','GET',parm).then(function(resp){console.log('list api',resp);varrecords=resp.records;vardata=records.map(function(row){return{'会社名':row['会社名'].value,'担当者名':row['担当者名'].value,'メールアドレス':row['メールアドレス'].value}});varcolM=[{title:'会社名',dataIndx:'会社名',width:200,dataType:'string'},{title:'担当者名',dataIndx:'担当者名',width:200,dataType:'string'},{title:'メールアドレス',dataIndx:'メールアドレス',width:200,dataType:'string'},];varobj={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 の組合せでいろいろ可能性がありますね。