アプリの見た目にこだわるのであれば、フォーム部品の横幅を揃えたいですよね。 今回は、フォーム部品の横幅を一括統一するサンプルを紹介します。
※chrome拡張を利用しているので、chromeユーザーしか利用できません。
サンプル
フォームを保存した際にポップアップを表示し、入力した値でフォーム部品の横幅を揃えます。
コード
アプリの設定画面では、kintone全体JSなどは動作しないので、chrome拡張を利用します。 読み込み方法は下記などを参考にしてください。
https://qiita.com/querykuma/items/b41cd108e5df25ebbfda#chrome-%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%99
〇 ファイル構成
下記を全て同じ階層に置く。
・manifest.json (後述)
・main.js (後述)
・sweetalert2.min.css
・sweetalert2.min.js
・manifest.json
※7行目の"matches"に指定するURLは、お使いのkintone環境に合わせて変更してください。
{"name":"kintone field width formatter","version":"1.0.0","manifest\_version":2,"description":"kintoneのフォーム部品の横幅を統一する．","content\_scripts": [{"matches": ["https://\*\*\*\*.cybozu.com/k/admin/app/flow?\*"],"css": ["sweetalert2.min.css"],"js": ["sweetalert2.min.js","main.js"]
}]
}
・main.js
location.href='javascript: document.body.dataset.token = kintone.getRequestToken(), null';newMutationObserver(event=\>{if(!event[0].addedNodes[0])return;if(!event[0].addedNodes[0].classList.contains('notifier-success-cybozu'))return;swal.fire({title:'幅を統一しますか? (px)',input:'number',confirmButtonText:'統一する',showCancelButton:true,cancelButtonText:'統一しない',}).then(result=\>(!result.value? null :fetch(`${location.protocol}//${location.host}/k/v1/preview/app/form/layout.json?app=${location.search.replace(/[^0-9]/g, '')}`,{headers:{'X-Requested-With':'XMLHttpRequest'}}).then(response=\>response.json()).then(json=\>(fetch(`${location.protocol}//${location.host}/k/v1/preview/app/form/layout.json`,{method:'PUT',headers:{'X-Requested-With':'XMLHttpRequest','Content-Type':'application/json'},body:JSON.stringify({app:location.search.replace(/[^0-9]/g,''),layout:json.layout.map(row=\>({...row,fields:row.fields.map(field=\>({...field,size:{width:result.value}}))})),\_\_REQUEST\_TOKEN\_\_:document.body.dataset.token})}))))).then(()=\>location.reload());}).observe(document.body,{childList:true});
※本サンプルでは、ゲストスペース内のアプリには対応しておりません。 予めご了承ください。