サンプルプログラムによる作成例¶

サンプルプログラムの概要¶

サンプルとして実装する機能についての仕様は以下の通りです。

機能概要

会社一覧画面で任意の会社を選択すると、選択した会社の詳細情報が次画面にて表示される。

詳細画面にて表示される項目は以下の通りとする。
- 会社コード
- 会社名
- 市区町村
- 国コード
- 通貨コード
- 勘定コード表
- 会計年度バリアント
使用する BAPI

BAPI_COMPANYCODE_GETDETAIL 標準 BAPI

使用する汎用プロパティファイル名

sapapi_tutorial.properties

備考

業務用APIの会社取得APIのサンプルプログラムを元に作成する。

汎用プロパティファイルの作成¶

汎用モジュールビルダ（t-cd：SE37）で、「BAPI_COMPANYCODE_GETDETAIL」のパラメータ名、コンポーネント名等を確認して、

汎用プロパティファイル「sapapi_tutorial.properties」を作成します。

ファイルを保存する場所は、intra-mart のアプリケーションディレクトリ（例：C:/imart/doc/imart）直下の/WEB-INF/classes フォルダです。
servertype= 
commit=false 

bapiname=BAPI_COMPANYCODE_GETDETAIL 

import.import.COMPANYCODEID=imp_key1 

export.structure.COMPANYCODE_DETAIL.COMP_CODE=imp_str_key1 
export.structure.COMPANYCODE_DETAIL.COMP_NAME=imp_str_key2 
export.structure.COMPANYCODE_DETAIL.CITY=imp_str_key3 
export.structure.COMPANYCODE_DETAIL.COUNTRY=imp_str_key4 
export.structure.COMPANYCODE_DETAIL.CURRENCY=imp_str_key5 
export.structure.COMPANYCODE_DETAIL.CHRT_ACCTS=imp_str_key6 
export.structure.COMPANYCODE_DETAIL.FY_VARIANT=imp_str_key7

サンプルのコーディング¶

以下のファイルをサンプル用の画面、及び処理として実装します。

入力画面(im_sapapi.html)

<imart type="head">
  <title>チュートリアル</title>
  <script type="text/javascript">
  // 前の画面へと移動.
  function refresh() {
    $('#refresh-form').submit();
  };
  function back() {
    $('#back-form').submit();
  };
  </script>
</imart>

<header class="imui-title">
    <h1>SAP リアルタイム連携API チュートリアル（会社取得 API）</h1>
</header>
<div class="imui-toolbar-wrap">
  <div class="imui-toolbar-inner">
    <!-- ツールバー左側 -->
    <ul class="imui-list-toolbar">
      <!-- 戻る -->
      <li><a href="javascript:back();" class="imui-toolbar-icon"
        title="戻る"><span class="im-ui-icon-common-16-back"></span></a></li>
    </ul>
    <!-- ツールバー右側 -->
    <ul class="imui-list-toolbar-utility">
      <li><a href="javascript:refresh();" class="imui-toolbar-icon" title="最新情報"><span
          class="im-ui-icon-common-16-refresh"></span></a></li>
    </ul>
  </div>
</div>

<div class="imui-form-container-wide">
  <div class="imui-chapter-title">
    <h2>会社取得(BAPI_COMPANYCODE_GETLIST)</h2>
  </div>
  <label>※ 実行時の注意点</label><br />
  <label>１件以上の会社が SAP 上に存在すること。</label><br />
  <form method="POST" action="sapapi_tutorial/tutorial3-4-3/result">
    <div class="imui-operation-parts">
      <input type="submit" value="チュートリアル実行" class="imui-large-button" />
    </div>
  </form>
</div>

<!-- 画面更新用フォーム -->
<form id="back-form" name="backForm" action="sapapi_tutorial/tutorial_menu" method="POST"></form>
<form id="refresh-form" name="refreshForm" action="sapapi_tutorial/tutorial3-4-3/im_sapapi" method="POST"></form>

入力画面処理(im_sapapi.js)
function init(){ }

一覧画面(result.html)

<imart type="head">
<title>チュートリアル</title>
<script type="text/javascript">
  // 前の画面へと移動.
  function back() {
    $('#back-form').submit();
  };
</script> </imart>
<header class="imui-title">
  <h1>SAP リアルタイム連携API チュートリアル実行結果（会社取得 API）</h1>
</header>
<div class="imui-toolbar-wrap">
  <div class="imui-toolbar-inner">
    <!-- ツールバー左側 -->
    <ul class="imui-list-toolbar">
      <!-- 戻る -->
      <li><a href="javascript:back();" class="imui-toolbar-icon"
        title="戻る"><span class="im-ui-icon-common-16-back"></span></a></li>
    </ul>
  </div>
</div>
<div class="imui-form-container-wide">
  <div class="imui-chapter-title">
    <h2>
      会社一覧（
      <imart type="string" value=listCount />
      件 ）
    </h2>
  </div>
  <br />
  <table class="imui-table mt-20">
    <tbody>
      <tr>
        <th><label>No</label></th>
        <th><label>会社コード</label></th>
        <th><label>会社名</label></th>
      </tr>
      <imart type="repeat" list=listResult item="record" index="idx">
      <tr>
        <td><a rel="alternate"
          href="sapapi_tutorial/tutorial3-4-3/detail"
          name=record.LINK_KEY><imart type="string" value=idx></imart>
          </a>
        </td>
        <td><imart type="string" value=record.COMP_CODE></imart></td>
        <td><imart type="string" value=record.COMP_NAME></imart></td>
      </tr>
      </imart type="repeat">
    </tbody>
  </table>
</div>

<!-- 実行画面遷移用フォーム -->
<form id="back-form" name="backForm"
  action="sapapi_tutorial/tutorial3-4-3/im_sapapi" method="POST"></form>

一覧画面処理(result.js)

var listResult;
var listCount;

function init(request) {
    var objCon;
    var idx;

    //インスタンス生成
    objCon = new CompanyController();

    // コンストラクタでのエラーチェック
    if(objCon.getErrCode() != "0"){
        //エラーメッセージ出力
        Debug.browse(objCon.getErrMsg());
    }

    //会社の一覧を取得
    listResult = objCon.getCompanyList();

    //会社の一覧にページ間リンク用のKEYを追加
    for (idx=0; idx < listResult.length; idx++){
    	listResult[idx]["LINK_KEY"] = listResult[idx]["COMP_CODE"]
    }

    //一覧の件数を取得
    listCount = listResult.length;

}

詳細画面(detail.html)

<imart type="head">
<title>チュートリアル</title>
<script type="text/javascript">
  // 前の画面へと移動.
  function back() {
    $('#back-form').submit();
  };
</script> </imart>
<header class="imui-title">
  <h1>SAP リアルタイム連携API チュートリアル実行結果（会社取得 API）</h1>
</header>
<div class="imui-toolbar-wrap">
  <div class="imui-toolbar-inner">
    <!-- ツールバー左側 -->
    <ul class="imui-list-toolbar">
      <!-- 戻る -->
      <li><a href="javascript:back();" class="imui-toolbar-icon"
        title="戻る"><span class="im-ui-icon-common-16-back"></span></a></li>
    </ul>
  </div>
</div>
<div class="imui-form-container-wide">
  <div class="imui-chapter-title">
    <h2>会社情報 詳細</h2>
  </div>
  <table class="imui-table mt-20">
    <tbody>
      <tr>
        <th class="wd-20"><label>会社コード</label></th>
        <td><imart type="string" value=compCode> </imart></td>
      </tr>
      <tr>
        <th class="wd-20"><label>会社名</label></th>
        <td><imart type="string" value=compName> </imart></td>
      </tr>
      <tr>
        <th class="wd-20"><label>市区町村名</label></th>
        <td><imart type="string" value=city> </imart></td>
      </tr>
      <tr>
        <th class="wd-20"><label>国コード</label></th>
        <td><imart type="string" value=country> </imart></td>
      </tr>
      <tr>
        <th class="wd-20"><label>通貨コード</label></th>
        <td><imart type="string" value=currency> </imart></td>
      </tr>
      <tr>
        <th class="wd-20"><label>勘定コード表</label></th>
        <td><imart type="string" value=chrtAccts> </imart></td>
      </tr>
      <tr>
        <th class="wd-20"><label>会計年度バリアント</label></th>
        <td><imart type="string" value=fyVariant></imart></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 実行画面遷移用フォーム -->
<form id="back-form" name="backForm"
  action="sapapi_tutorial/tutorial3-4-3/result" method="POST"></form>

詳細画面(detail.js)

var compCode;  //会社コード
var compName;  //会社名
var city;    //市区町村
var country;   //国コード
var currency;  //通貨コード
var chrtAccts; //勘定コード表
var fyVariant; //会計年度バリアント

function init(request) {

    var objCon;
    var objResult;
    var strResult;

    //インスタンス生成
    objCon = new BapiController("sapapi_tutorial");

    // コンストラクタでのエラーチェック
    if(objCon.getErrCode() != "0"){
        //エラーメッセージ出力
        Debug.browse(objCon.getErrMsg());
    }
    
    //importの設定（会社コード）
    objCon.putImportParam("imp_key1", request.link_key);

    //BAPI実行
    objResult = objCon.executeBapi();

    //要素[ERR_CODE]に何らかの値がセットされている場合
    if (objResult["ERR_CODE"] != null) {
        //エラー情報を出力する。
        Debug.browse(objResult);
    } else if (!objCon.isSuccess()) {
        //BAPIエラーメッセージを出力する。
        Debug.browse(objCon.getErrMessage());
    }

    //structureの取得
    strResult = objCon.getStructureParam("COMPANYCODE_DETAIL");
    
    compCode  = strResult["imp_str_key1"];  //会社コード
    compName  = strResult["imp_str_key2"];  //会社名
    city      = strResult["imp_str_key3"];  //市区町村
    country   = strResult["imp_str_key4"];  //国コード
    currency  = strResult["imp_str_key5"];  //通貨コード
    chrtAccts = strResult["imp_str_key6"];  //勘定コード表
    fyVariant = strResult["imp_str_key7"];  //会計年度バリアント
}

コラム

スクリプト開発で作成されたシステムのメニューの登録方法、実行方法は「スクリプト開発プログラミングガイド」の内容を参照してください。

目次

サンプルプログラムによる作成例¶

サンプルプログラムの概要¶

汎用プロパティファイルの作成¶

サンプルのコーディング¶

目次