新規投稿
フォローする

React.jsの利用

今回はReact.jsを利用例をご紹介します。

サンプル

3つのテーブルの情報をまとめてカスタマイズビューで表示します。

完成図

利用したテーブル

1.商品マスタ

2.受注管理

3.時価管理

作成したコード

※フィールドコードは上記画像のフィールド名と一致させています。

1.getProducts.js

const products = getProducts();
function getProducts(){
  return new Promise(resolve => {
    kintone.events.on('app.record.index.show', event => {
      resolve(
        Promise.all([
          orderManagementAppClass.factory(),
          priceManagementAppClass.factory()
        ]).then(([
          orderManagementApp,
          priceManagementApp
        ]) => {
          return event.records.map(record => {
            return productClass.factory(record)
              .getOrders(orderManagementApp)
              .getPrices(priceManagementApp);
          });
        })
      );
    });
  });
}
class productClass{
  constructor(record){
    this.id = record.商品ID.value;
    this.name = record.商品名.value;
    this.orders = [];
    this.total;
  }
  static factory(record){
    return new this(record);
  }
  getOrders(orderManagementApp){
    this.orders = orderManagementApp.searchOrders(this.id);
    return this;
  }
  getPrices(priceManagementApp){
    this.orders.forEach(order => {
      order.unitPrice = priceManagementApp.searchPrice(this.id, order.date);
      order.subtotal = order.unitPrice * order.number;
    });
    this.total = this.orders.reduce((x, y) => {return x + y.subtotal;}, 0);
    return this;
  }
}
class orderManagementAppClass{
  constructor(){
    this.appId = ****; //受注管理アプリID
    this.records = [];
  }
  static factory(){
    return (new this).getRecords();
  }
  getRecords(){
    return kintoneUtility.rest.getAllRecordsByQuery({
      app: this.appId,
      query: 'order by 受注日 asc'
    }).then(response => {
      this.records = response.records;
      return this;
    });
  }
  searchOrders(productId){
    return Array.prototype.concat(...this.records.map(record => {
      return record.Table.value.filter(row => {
        return row.value.商品ID.value == productId;
      }).map(row =>{
        return {date:record.受注日.value, number:row.value.個数.value};
      });
    }));
  }
}
class priceManagementAppClass{
  constructor(){
    this.appId = ****; //時価管理アプリID
    this.records = [];
  }
  static factory(){
    return (new this).getRecords();
  }
  getRecords(){
    return kintoneUtility.rest.getAllRecordsByQuery({
      app: this.appId,
      query: 'order by 変更日 desc'
    }).then(response => {
      this.records = response.records;
      return this;
    });
  }
  searchPrice(productId, orderDate){
    return this.records.find(record => {
      return (record.商品ID.value == productId && record.変更日.value <= orderDate);
    }).価格.value;
  }
}

2.reactRender.js

products.then(products => {
  "use strict";
  class MainTable extends React.Component{
    render(){
      return(
        <table className="mainTable">
          <MainTableHead />
          <MainTableBody data={this.props.data} />
        </table>
      )
    }
  }
  class MainTableHead extends React.Component{
    render(){
      return(
        <thead>
          <tr>
            <th>商品ID</th>
            <th>商品名</th>
            <th className="hasTable">
              <table className="subTableHead">
                <caption>受注履歴</caption>
                <thead>
                  <tr>
                    <th>受注日</th>
                    <th>個数</th>
                    <th>単価時価</th>
                    <th>小計</th>
                  </tr>
                </thead>
              </table>
            </th>
            <th>合計</th>
          </tr>
        </thead>
      )
    }
  }
  class MainTableBody extends React.Component{
    render(){
      const MainTableRows = this.props.data.map(function(row, index){
        return(
          <tr key={index}>
            <td>{row.id}</td>
            <td>{row.name}</td>
            <td className="hasTable"><SubTable data={row.orders} /></td>
            <td>{row.total}</td>
          </tr>
        );
      });
      return(
        <tbody>
          {MainTableRows}
        </tbody>
      )
    }
  }
  class SubTable extends React.Component{
    render(){
      let SubTableRows;
      if(this.props.data.length){
        SubTableRows = this.props.data.map(function(row, index){
          return(
            <tr key={index}>
              <td>{row.date}</td>
              <td>{row.number}</td>
              <td>{row.unitPrice}</td>
              <td>{row.subtotal}</td>
            </tr>
          );
        });
      }else{
        SubTableRows =
          <tr key="0">
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
          </tr>;
      }
      return(
        <table className="subTableBody">
          <tbody>
            {SubTableRows}
          </tbody>
        </table>
      )
    }
  }
  ReactDOM.render(<MainTable data={products} />, document.getElementById('react'));
});

3.style.css

.mainTable{
  table-layout: fixed;
  margin: 5px auto;
  width: 95%;
}
.subTableHead,
.subTableBody{
  table-layout: fixed;
  margin: 0;
  width: 100%;
}
.hasTable{
  width: 50%;
}
.subTableHead th,
.subTableBody td{
  width: 25%;
}
.mainTable th,
.mainTable td{
  padding: 0;
  border: 1px solid #000;
  text-align: center;
}
.subTableBody tr:first-child td{
  border-top: none;
}
.subTableHead th,
.subTableBody tr:last-child td{
  border-bottom: none;
}
.subTableHead th:first-child,
.subTableBody td:first-child{
  border-left: none;
}
.subTableHead th:last-child,
.subTableBody td:last-child{
  border-right: none;
}

ファイルの読み込み方法

ファイルの読み込み方法が特殊なので例を記述しておきます。

「JavaScript / CSSでカスタマイズ」

「JavaScriptファイル」
「CSSファイル」

「カスタマイズビューHTML」

<div id="react"></div>
<script src="https://dl.dropboxusercontent.com/s/?????/reactRender.js" type="text/babel"></script>
1

0件のコメント

サインインしてコメントを残してください。