Vue.jsを用いたプラグイン開発環境構築の記事を元に、今回はこちらの環境で実際に設定画面の作成について例を挙げます。
Vue.jsについての解説は詳しく行わないため、Vue.js公式ドキュメントを参照しながら試してみることを推奨します。
開発するプラグイン
kintoneにはない、フィールドごとに特定ユーザーの編集を制限するプラグインを作成します
仕様
- 編集を制限するユーザーはログイン名 (
kintone.getLoginUser().codeで得られる値)を,区切りで入力する - 今回は簡略化の為、実際には編集できないメタフィールドに関しても設定できるものにする
開発手順
設定画面用HTMLの作成
開発環境のディレクトリに移ったら、./plugin/html/config.htmlを以下のものにします。
<divid="app"></div>
フィールドリストの取得関数の作成
REST APIを用いてアプリのフィールド情報を取得する./src/config/fetchFeilds.jsを作成します。
exportdefault()=\>kintone.api(kintone.api.url('/k/v1/app/form/fields',true),'GET', {app:kintone.app.getId()})
.then(({properties})=\>properties)
.then((properties)=\>{for(constfieldCodeinproperties) {
properties[fieldCode].restrictedUsers=""}returnproperties;
})
取得したフィールド情報にproperties[fieldCode].restrictedUsers = ""として、制限するユーザーのリストを初期化します。
このrestrictedUsersというプロパティが実際の設定の部分になります。
設定UIコンポーネントの作成
今度は./src/config/App.vueを以下のものに置き換えます。
\<template\>\<div\>\<table\>\<thead\>\<th\>フィールド名\</th\>\<th\>フィールドコード\</th\>\<th\>編集を制限するユーザー\</th\>\</thead\>\<tbody\>\<tr v-for="field in fields":key="field.code"\>\<td\>{{field.label}}\</td\>\<td\>{{field.code}}\</td\>\<td\>\<textarea v-model="field.restrictedUsers"\>\</textarea\>\</td\>\</tr\>\</tbody\>\</table\>\<button v-on:click="save"\>保存\</button\>\</div\>\</template\>\<script\>exportdefault{
name:'App',
methods:{save:function() {
}
},
props:['fields'] }\</script\>
このコンポーネントでは以下のことをしています。
fieldsとしてフィールドのリスト (及び制限情報)を受けとり、そのデータを元にテーブル要素をレンダリングするv-forディレクティブを用いて、受け取ったfieldsの各プロパティに対して繰り返しテーブル行をレンダリングするv-modelディレクティブを用いて、各fields["fieldCode"].restrictedUsersにテキストエリア要素の内容をバインディングする
v-on:clickでボタン要素のクリックイベントに、<script>要素内のエクスポートしているオブジェクト内のmethods.save関数を登録する
この段階ではまだ設定の形式を決めていないので、save関数は後ほど実装します。
コンポーネントのレンダリング
./src/config/main.jsを編集し、実際に先程のコンポーネントを描画するためのコードを書きます
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.importVuefrom'vue'importAppfrom'./App'importfetchFieldsfrom'./fetchFields'Vue.config.productionTip=falsefetchFields().then(props=\>/\* eslint-disable no-new \*/newVue({
el:'#app',
data:{
fields:props
},
components:{ App },
template:'\<App :fields="fields"/\>'})
)
ここでは:fields="fields"として、コンポーネントのプロパティ名に結びつけるプロパティ名を指定しています。
ここまで実装できたらひとまずビルド及びパッケージングを行い、実際に描画できているかを確認してみましょう。
$ npm run build&&./package.sh ./plugin ./vault/keys/plugin.\<plugin_id\>.ppk
このような画面が設定画面に作成されていればOKです。
長くなってしまったので、設定の保存とフィールドの制限については別に投稿しますので、こちらを参照ください。