新規投稿
フォローする

フォーム部品の横幅を統一

アプリの見た目にこだわるのであれば、フォーム部品の横幅を揃えたいですよね。 今回は、フォーム部品の横幅を一括統一するサンプルを紹介します。
※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';
new MutationObserver(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});

※本サンプルでは、ゲストスペース内のアプリには対応しておりません。 予めご了承ください。

2

0件のコメント

サインインしてコメントを残してください。