概要
Salesforce Classicのリストビューや詳細画面でJavaScript実行のカスタムボタンでちょっとした入力値をユーザに入力させてからApex、Webserviceの処理させたい時ありませんか？
今まだとボタン内でjqueryを読み込んでからリッチなUIを作ってたり、いっそうVisualforceページに置き換えたりしてませんか？こうした大掛かりな実装しなくても、HTML5タグ＋querySelectorで簡単に実装できます
実装イメージ
実装概要
bodyタグにdialogタグと入力項目タグを挿入して、それらを表示するだけです
styleは入れていないですが、同じ要領でスタイルも埋め込めばいい感じに仕上がります
<body>
~~ 中略 ~~
<dialog class="qiita-dialog" open="">
<p>qiitaは好きですか？</p>
<select style="width: 100%;">
<option value="love">好き</option>
<option value="very_love">大好き</option>
</select>
<button id="qiita-save-btn">save</button>
<button id="qiita-close-btn">close</button>
</dialog>
</body>
コード
// dialogの初期化
const _eleExistDialog = document.querySelector("dialog.qiita-dialog");
if (_eleExistDialog) {
_eleExistDialog.remove();
}
// bodyタグを取得
const eleBody = document.querySelector("body");
// dialogを作成
const eleDialog = document.createElement("dialog");
eleDialog.classList.add("qiita-dialog");
// 説明文を作成
const eleDespTxt = document.createElement("p");
eleDespTxt.textContent = "qiitaは好きですか？";
eleDialog.appendChild(eleDespTxt);
// 選択リストを作成
const eleSelect = document.createElement("select");
eleSelect.style.width = "100%";
// 選択リストの選択肢を作成
const eleOption1 = document.createElement("option");
eleOption1.value = "love";
eleOption1.textContent = "好き";
eleSelect.appendChild(eleOption1);
// 選択リストの選択肢を作成
const eleOption2 = document.createElement("option");
eleOption2.value = "very_love";
eleOption2.textContent = "大好き";
eleSelect.appendChild(eleOption2);
eleDialog.appendChild(eleSelect);
// 保存ボタンを作成
const eleSaveBtn = document.createElement("button");
eleSaveBtn.id = "qiita-save-btn";
eleSaveBtn.textContent = "保存";
// 保存ボタンのイベント
eleSaveBtn.onclick = function() {
console.log("click save button");
/**
* webserviceをコールするなどの処理
*
**/
eleDialog.close();
}
eleDialog.appendChild(eleSaveBtn);
// 閉じるボタンを作成
const eleCloseBtn = document.createElement("button");
eleCloseBtn.id = "qiita-close-btn";
eleCloseBtn.textContent = "閉じる";
eleCloseBtn.onclick = function() {
console.log("click close button");
eleDialog.close();
}
eleDialog.appendChild(eleCloseBtn);
// dialogをbodyに追加
eleBody.appendChild(eleDialog);
// モーダル表示
eleDialog.showModal();