VisualForceとLightning メッセージ表示方法

認定上級Platformデベロッパー

2018.11.202019.06.16

試験対策でお伝えできるもの残り少なくなってきました。
今回はLightningさん登場です。

メッセージ表示の違いを押さえる
VisualForceのメッセージ表示
Lightningのメッセージ表示
1. 復旧可能なエラー
2. 復旧不可能なエラー
まとめ
1. いいね:

メッセージ表示の違いを押さえる

このページでは、ユーザインターフェースにエラーを表示する場合のメッセージ出力方法について述べた内容になります。
VisualForceとLightningでメッセージの出し方が異なるので、エラーの種類による出し方の違いと、使用するコードについて、違いを把握しておきましょう。

VisualForceのメッセージ表示

VisualForceでのエラーは、<apex:pageMessages>タグを使用します。
Apex側では、ApexPages.addMessageを使用して、エラー種別と一緒にメッセージを追加します。

こちらがコード例です。
シンプルにメッセージだけを出すページです。

VisualForceはこんな感じ。

VFmessage.page

<apex:page controller="VFmessageCtrl" action="{!init}">
　　　　<apex:pageMessages />
</apex:page>

Apexクラスはこのように記述します。
VFmessageCtrl.cls

public with sharing class VFmessageCtrl {

    public PageReference init() {
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.CONFIRM, 'Confirm', 'detail - confirm'));
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Error', 'detail - error'));
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.FATAL, 'Fatal', 'detail - fatal'));
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Info', 'detail - info'));
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.WARNING, 'Warning', 'detail - warning'));
        return null;
    }
}

そして表示するとこのような感じになります。

メッセージの表示は、ApexPages.addMessageで追加したメッセージの順にはならず、Fatal→Error→Warning→Info→Confirmの順に表示されています。
エラーの度合いが高い順ですね。

Lightningのメッセージ表示

Lightningのメッセージ表示は２種類あります。
使いわけとしては、復旧可能か復旧不可能かということです。
復旧可能なエラーの例としては、入力エラーなどユーザ次第でエラーが解消されるもの。
復旧不可能なエラーはシステムエラーなど、ユーザ自身でどうしようも無いエラーとなります。

復旧可能なエラー

まずは、復旧可能なエラーから。
Lightningコンポーネントのエラー表示は、ui:messageを使用します。
コントローラー側で定義したui:messageを、$A.createComponentsメソッドを使用してコンポーネントに追加します。

コンポーネント側はコンポーネント表示用のdivタグを配置します。
ShowMessage1.cmp

<aura:component>
    <div aura:id="msg" />
    <ui:button label="復帰可能なエラー" press="{!c.showErrMsg1}"/>
    <ui:button label="復帰不可能なエラー" press="{!c.showErrMsg2}"/>
</aura:component>

コントローラ側でエラー用のコンポーネントを定義して表示する処理を入れます。
ボタンを押すとエラーが発生するようにします。
ShowMessage1Controller.js

({
    showErrMsg1: function(cmp) {
        try {
            // 例外を発生させる
            throw new Error("あなたの人生やり直しがききます");
        }
        catch (e) {
            // エラー用のコンポーネントを定義
            $A.createComponents([
                ["ui:message",{
                	"title" : "復帰可能なエラー発生",
                	"severity" : "error",
                }],
                ["ui:outputText",{
                	"value" : e.message
                }]
            ],
            function(components, status){
                if (status === "SUCCESS") {
                    var message = components[0];
                    var outputText = components[1];
                    // ui:messageにui:outputTextの内容をセット
                    message.set("v.body", outputText);
                    // divタグにメッセージを表示
                    var div1 = cmp.find("msg");
                    div1.set("v.body", message);
                }
            }
        );
        }
    },
    showErrMsg2: function(cmp) {
        throw new Error("あなたの人生やり直しがききません");
    }
})

メッセージはこのように表示されます。