【Visualforce】コマンドボタンのactionの前に確認メッセージを表示するサンプル

Salesforce

2020.01.06

コマンドボタンクリックでactionが実行される前に、Javascriptを実行して確認メッセージを表示するサンプルです。もちろん確認メッセージで”キャンセル”を選択した場合はactionは実行されません。

<!-- Visualforceページ -->
<apex:page controller="SampleController">
    <apex:form>
        <apex:pageMessages />
        <apex:pageBlock>
        	<apex:pageBlockButtons location="bottom">
                <apex:commandButton value="ボタン" action="{!buttonClick}" onclick="return confirmExecAction();"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
    <script type="text/javascript">
    	// action実行確認
    	function confirmExecAction() {
        	if (window.confirm("実行します。よろしいですか？")) {
            	return true;
            } else {
            	return false;
            }
        }
    </script>
</apex:page>

<apex:page controller="SampleController">

<apex:form>

<apex:pageMessages />

<apex:pageBlock>

<apex:pageBlockButtons location="bottom">

<apex:commandButton value="ボタン" action="{!buttonClick}" onclick="return confirmExecAction();"/>

</apex:pageBlockButtons>

</apex:pageBlock>

</apex:form>

// action実行確認

function confirmExecAction() {

if (window.confirm("実行します。よろしいですか？")) {

return true;

} else {

return false;

}

</script>

</apex:page>

ポイント
onclick属性でJavascriptの確認メッセージ表示処理を行います。その結果をreturnすることで、確認結果がtrue（OK）の場合にはactionが実行されますし、false（キャンセル）の場合にはactionが実行されなくなります。