PowerCMS 5でフォームの項目を手間なく並べるスクリプト

公開
更新

本番環境とテスト環境にそれぞれPowerCMS 5がインストールしてあり、テスト環境で設定したフォーム項目を本番環境でサッと再現したい、という趣旨です。フォーム項目が少なければたいした手間ではないのですが、フォーム項目が多いと大変です。JSONでフォームの設定をエクスポート・インポートしたら設定が再現される、という機能があれば良いのですが今のところありません。phpMyAdminが利用できればそれで操作するのですが、それが許されないサーバーもあります。
画面キャプチャ：PowerCMS 5のフォーム項目設定画面

そこで、ブラウザの開発者ツールのコンソールでJavaScriptを実行してフォーム項目を設定することを考えました。フォーム項目はテスト環境にてCSVでエクスポートし、本番環境でインポートしている前提です。IDが異なる可能性は大いにあるので、フォーム項目名で処理します。

まずテスト環境でフォーム項目の並び順を収集します。

const fields = document.querySelectorAll('#item-right .ui-sortable li');
const items = [];
fields.forEach(field => {
    const spanElem = field.getElementsByTagName('span')[0];
    items.push(spanElem.childNodes[4].textContent.replace(/[\s\xA0]/g, ''));
});
console.log(items.join(','));

上記を実行すると「Bootstrap:お名前<テキスト>,Bootstrap:Email<電子メール>,Bootstrap:問い合わせ内容<テキスト(複数行)>,ファイル<ファイル>」のようにカンマ区切りのフォーム項目名がコンソールに出力されます。

次に本番環境でフォーム項目を設定します。新規フォームの作成画面を開いてブラウザのコンソールで下記を実行し、プロンプトにカンマ区切りのフォーム項目名を入力します。瞬時に「このフォームの項目」にフォーム項目が並びます。

const items = window.prompt('Form items:').split(',');
const leftSpanElems = document.querySelectorAll('#item-left .ui-sortable li > span');
const rightUlElem = document.querySelector('#item-right .ui-sortable');
items.forEach(name => {
    const foundElem = Array.from(leftSpanElems).find(
        elem => name === elem.childNodes[4].textContent.replace(/[\s\xA0]/g, '')
    );
    if (foundElem) {
        const listNode = foundElem.parentNode;
        const cloneNode = listNode.cloneNode(true);
        rightUlElem.appendChild(cloneNode);
        listNode.parentNode.removeChild(listNode);
    }
});

画面キャプチャ：PowerCMS 5のフォーム項目設定画面（スクリプトで「このフォームの項目」をセットしたところ）

これで作業が楽になりますし、誤った設定になる可能性はなくなるでしょう。