掲示板でのSnackbar表示

本日から実践編に入りました。

取り組んだチケットは以下のチケットです。 https://trello.com/c/evatVJ7g

snackbarの表示

チケットの内容は、操作完了時にsnackbarを表示するというものです。

snackbarは、JavaScriptのソースコードに

App.showSnackbar('hogehoge');

と記述することで表示されます。

今回は掲示板に関する編集を行いました。 /saas/portlets/msgboard/src/main/webapp/javascript/aipo/msgboard/form.js の aipo.msgboard.onReceiveMessage を以下のように書き換えます。

aipo.msgboard.onReceiveMessage = function(msg){
    //送信時に作成した場合selectを削除。
    var select=dojo.byId("attachments_select");
    var modalDialog = document.querySelector("#modal-dialog form");
    var mode = null;
    if (modalDialog.mode != null){
            mode = modalDialog.mode.value;
    }

    if(typeof select!="undefined"&& select!=null)
        select.parentNode.removeChild(select);
    if(!msg) {
        var arrDialog = dijit.byId("modalDialog");App.closeModal();
        if(arrDialog){
            arrDialog.hide();
        }
        aipo.portletReload('msgboard');
        aipo.portletReload('timeline');

        if (mode == 'insert') {
            App.showSnackbar('トピックを追加しました');
        }else if(mode=='update'){
            App.showSnackbar('トピックを編集しました')
        }
    }
    if (dojo.byId('messageDiv')) {
        dojo.byId('messageDiv').innerHTML = msg;
    }

}

これで、トピックの追加と編集を行なった際に画面の下部にメッセージが表示されます。

var arrDialog = dijit.byId("modalDialog");App.closeModal();
        if(arrDialog){
            arrDialog.hide();
        }
        aipo.portletReload('msgboard');
        aipo.portletReload('timeline');

の動作は、 https://hacknote.jp/archives/1557/ が参考になります。