React.jsの利用

kintone カスタマイズ
1

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

サンプル

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

完成図[

](https://github.com/cstap/tips-draft/blob/236718851193884420097cdb0d153f7db8b20f84/knowledge/react/result.png)

利用したテーブル

1.商品マスタ

2.受注管理

3.時価管理

作成したコード

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

1.getProducts.js

constproducts=getProducts();functiongetProducts(){returnnewPromise(resolve=\>{kintone.events.on('app.record.index.show',event=\>{resolve(Promise.all([orderManagementAppClass.factory(),priceManagementAppClass.factory()
        ]).then(([
          orderManagementApp,
          priceManagementApp
        ])=\>{returnevent.records.map(record=\>{returnproductClass.factory(record)
              .getOrders(orderManagementApp)
              .getPrices(priceManagementApp);
          });
        })
      );
    });
  });
}classproductClass{constructor(record){this.id=record.商品ID.value;this.name=record.商品名.value;this.orders=[];this.total;
  }staticfactory(record){returnnewthis(record);
  }getOrders(orderManagementApp){this.orders=orderManagementApp.searchOrders(this.id);returnthis;
  }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)=\>{returnx+y.subtotal;},0);returnthis;
  }
}classorderManagementAppClass{constructor(){this.appId=\*\*\*\*;//受注管理アプリIDthis.records=[];
  }staticfactory(){return(newthis).getRecords();
  }getRecords(){returnkintoneUtility.rest.getAllRecordsByQuery({
      app:this.appId,
      query:'order by 受注日 asc'}).then(response=\>{this.records=response.records;returnthis;
    });
  }searchOrders(productId){returnArray.prototype.concat(...this.records.map(record=\>{returnrecord.Table.value.filter(row=\>{returnrow.value.商品ID.value==productId;
      }).map(row=\>{return{date:record.受注日.value, number:row.value.個数.value};
      });
    }));
  }
}classpriceManagementAppClass{constructor(){this.appId=\*\*\*\*;//時価管理アプリIDthis.records=[];
  }staticfactory(){return(newthis).getRecords();
  }getRecords(){returnkintoneUtility.rest.getAllRecordsByQuery({
      app:this.appId,
      query:'order by 変更日 desc'}).then(response=\>{this.records=response.records;returnthis;
    });
  }searchPrice(productId,orderDate){returnthis.records.find(record=\>{return(record.商品ID.value==productId&&record.変更日.value\<=orderDate);
    }).価格.value;
  }
}

2.reactRender.js

products.then(products=\>{"use strict";classMainTableextendsReact.Component{render(){return(\<table className="mainTable"\>\<MainTableHead/\>\<MainTableBody data={this.props.data}/\>\</table\>)
    }
  }classMainTableHeadextendsReact.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\>)
    }
  }classMainTableBodyextendsReact.Component{render(){constMainTableRows=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\>)
    }
  }classSubTableextendsReact.Component{render(){letSubTableRows;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:5pxauto;width:95%;
}.subTableHead,.subTableBody{table-layout:fixed;margin:0;width:100%;
}.hasTable{width:50%;
}.subTableHeadth,.subTableBodytd{width:25%;
}.mainTableth,.mainTabletd{padding:0;border:1pxsolid#000;text-align:center;
}.subTableBodytr:first-childtd{border-top:none;
}.subTableHeadth,.subTableBodytr:last-childtd{border-bottom:none;
}.subTableHeadth:first-child,.subTableBodytd:first-child{border-left:none;
}.subTableHeadth:last-child,.subTableBodytd:last-child{border-right:none;
}

ファイルの読み込み方法

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

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

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

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

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