4. メッセージ種別追加プログラム¶

src/main/conf/imbox-message-config/imbox-message-config_information.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?xml version="1.0" encoding="UTF-8"?> <imbox-message-config xmlns="http://www.intra-mart.jp/imbox/imbox-message-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/imbox/imbox-message-config ../schema/imbox-message-config.xsd "> <public-message> <message-config display_flag="true" enabled_flag="true" sort_no="3" message_type_name="CAP.INFOMATION" post_type_path="app/message_type/type_information" display_path="app/message_type/information_timeline" message_type_cd="MESSAGE_TYPE_INFOMATION"/> </public-message> </imbox-message-config>

<message-config> タグで以下の属性の設定を行います。

属性	内容
display_flag	メッセージ種別セレクトボックス表示フラグ
enabled_flag	使用可否フラグ
message_type_cd	メッセージ種別識別CD
message_type_name	メッセージ種別名称のプロパティID
post_type_path	投稿欄表示用ファイルパス
display_path	タイムライン表示用ファイルパス
iconPath	アプリケーションの表示画像のパス
sort_no	メッセージ種別ソートナンバー

コラム

• メッセージ種別セレクトボックス表示フラグ に true を設定した場合、 メッセージ種別のセレクトボックスに表示されるようになります。通知のみに使用する場合は false を設定してください。
• 使用可否フラグ を true にした場合、使用可能となります。 false を設定した場合は、使用不可となります。
• 投稿欄表示用ファイルパス は投稿欄の表示として使用したいjsspのパスを設定してください。メッセージ種別セレクトボックスを切り替えた際に、表示されます。
• 投稿欄表示用ファイルパス は メッセージ種別セレクトボックス表示フラグ が false の場合は必要ありません。
• タイムライン表示用ファイルパス はタイムラインに表示として使用したいjsspのパスを設定してください。
• メッセージ種別ソートナンバー は既存のメッセージ種別が 1 となっています。メッセージ種別情報返却の際は、このソートナンバーで返却される保障はありません。

投稿欄表示用HTMLの作成

src/main/jssp/src/app/message_type/type_information.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<style type="text/css"> #imui-container #imbox-message-type textarea.imbox-textarea{ width: 98%; height: 45px; resize: none; overflow: hidden; } #imui-container #imbox-message-type input.imbox-text { width: 96%; } #imui-container #imbox-message-type div.imbox-button{ padding-top: 10px; text-align: right; } </style> <div> <div class="imui-box-supplementation mt-10"> <span class="im-ui-icon-common-16-information float-L"></span> <p class="imui-pgh-section imbox-timeline-question-info"> <imart type="string" value="お知らせしましょう" /> </p> </div> <form id="information_form"> <ul class= "mt-10"> <li class= "mt-10"> <imart type="imuiTextbox" id="information-title" class="imbox-text" name="information-title-name" placeholder="タイトル"/></li> <li class= "mt-10"><imart type="imuiTextbox" id="information-date" class="imbox-text" name="information-date-name" placeholder="日時" /></li> <li class= "mt-10"><imart type="imuiTextbox" id="information-place" class="imbox-text" name="information-place-name" placeholder="場所"/></li> </ul> <div class="mt-10"> <textarea id="information-detail" class="imbox-textarea" name="information-detail-name" placeholder="詳細"></textarea> </div> </form> </div> <form id="imbox_timeline_send_form" action="ui/filer/upload" method="POST" enctype="multipart/form-data"> <imart type="include" page="imbox/views/timeline/item/add_options" /> </form> <div id="information_button" class="imbox-button mt-20 align-R"> <button type="button" id="information_send_button" class="imui-medium-button">投稿</button> </div>

タグ・添付ファイルを表示する場合は、作成するHTMLに以下のタグを追加してください。

1 2 3

<form id="imbox_timeline_send_form" action="ui/filer/upload" method="POST" enctype="multipart/form-data"> <imart type="include" page="imbox/views/timeline/item/add_options" /> </form>

投稿処理のCSJS実装例

<script type="text/javascript">
(function($){
  $('#information_send_button').click(function(){
    var button = $(this);
    var attributes = {
      informationDate : $('#information-date').val(),
      informationPlace: $('#information-place').val(),
      informationDetail : $('#information-detail').val()
    };
    var title = $('#information-title').val();
    var messageTypeCd = $('.imbox-timeline-sendtype-list').children(':selected').val();
    var boxCd = ($imbox.timeline.clientType === $imbox.constants.CLIENT_TYPE_LIST['COMPONENTS']) ? $imbox.timeline.boxCd: $('.imbox-timeline-grouptype-list').children(':selected').val();
    var url = 'imbox/send/' + encodeURIComponent(boxCd);
    var attachFlag = '0';
    var files = [];
    var tagNames = [];
    $('.imbox-timeline-send-tag-list-hidden').each(function(){
      tagNames.push($(this).val());
    });

    if(tagNames.length){
      attachFlag = '1';
    }
    
    for(i = 0, length = $imbox.fileName.length; i < length; i++){
        if($imbox.fileName[i].key === 'imbox_timeline_send_form'){
          files.push($imbox.fileName[i].name);
        }
      }
    
    var data = {
      'send_message': title,
      'messageTypeCd': messageTypeCd,
      'displayId': $imbox.timeline.displayId,
      'timelineType': $imbox.timeline.timelineType,
      'clientType': $imbox.timeline.clientType,
      'attributes': ImJson.toJSONString(attributes, false),
      'attachName[]':  files,
      'attachPath': $('#imbox_timeline_send_attach_file_name').data('store_to'),
      'attachFlag': attachFlag,
      'tag_name':   tagNames
    };

    if(!imuiValidate('#imbox_timeline_send_form', imboxTimelineSendRules, imboxTimelineSendMessage, '')){
      return false;
    }
    var success = $imbox.ajax.send('POST', url, data, $imbox.timeline.sendCallback, button);

    if (success) {
      $('#information-date').val('');
      $('#information-place').val('');
      $('#information-detail').val('');
      $('#information-title').val('');
      imuiResetForm('#imbox_timeline_send_form');
    }
  });
})(jQuery);
</script>

url パラメータは以下のようにエンコーディング処理を行う必要があります。

url = 'imbox/send/' + encodeURIComponent(boxCd);

$imbox.ajax.send メソッドを使用する際に渡すデータにおいて、以下のパラメータは必須となります。

パラメータ	内容
send_message	投稿内容（任意の文字列を入力する箇所で利用してください。）
messageTypeCd	メッセージ種別識別CD
displayId	画面ID
timelineType	投稿した画面のタイムライン種別（スレッド形式で表示している画面は「TIMELINE_TYPE_THREAD」の固定値、メッセージ形式で表示している画面は「TIMELINE_TYPE_MESSAGE」の固定値となります。）
clientType	操作しているクライアントの種別（PC版IMBoxを利用している場合は「IMBOX」の固定値、スマートフォン版IMBoxを利用している場合は「MOBILE」の固定値、IMBox連携用画面を利用している場合は「IMBOX」の固定値となります。）

コラム

• 拡張項目を使用する場合は attributes オブジェクトを作成し、作成したい情報を設定してください。
• SSJSの投稿処理を記述する必要はありません。

タイムライン表示用SSJSの作成

src/main/jssp/src/app/message_type/information_timeline.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var $imbox = {}; /** * インフォメーション用タイムライン画面初期処理 * @param {Object} request リクエストパラメータ */ function init(request){ let message = request.message; let attributes = request.message.attributes; $imbox.informationTitle = message.messageText; $imbox.informationDate = attributes.informationDate; $imbox.informationPlace = attributes.informationPlace; $imbox.informationDetail = attributes.informationDetail; $imbox.message = message; }

タイムライン表示用HTMLの作成

src/main/jssp/src/app/message_type/information_timeline.html

<div class="imbox-timeline-thread-post-right-body">
  <p>
    <a href="imbox/usermessage/<imart type="string" value=$imbox.message.encodePostUserCd escapeXml="true" escapeJs="false" />" class="imbox-timeline-thread-post-user-name">
      <imart type="string" value=$imbox.message.postUserName escapeXml="true" escapeJs="false" />
    </a>
    <span class="imbox-timeline-thread-from-to-icon imbox-icon-common-16-arrow"></span>
    <imart type="string" value=$imbox.message.postTypeInfo.postToName escapeXml="true" escapeJs="false" />
  </p>
  <div class="imbox-timeline-thread-post-right-body">
    <div class="imbox-timeline-thread-message">
      <div class="imbox-timeline-thread-message-area">
        <div class="imbox-timeline-thread-message-text">
          <div class="cf">
            <div class="float-L mt-10">
              タイトル ： <imart type="string" value=$imbox.informationTitle /></span><br>
              日時 ： <imart type="string" value=$imbox.informationDate /></span><br>
              場所 ： <imart type="string" value=$imbox.informationPlace /></span><br>
              詳細 ： <imart type="string" value=$imbox.informationDetail /></span><br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>