カスタムコンポーネントの作成

Warning

再作業中、納期未定。 Front App SDK (ReactJS) と Front API SDK (NodeJS) の両方が置き換えられます。このページは現在のリリースを文書化し、置き換えが出荷されるまで正確で維持されます。これに対して書かれたコードは引き続き動作します。

Data Platformでは、独自の完全カスタマイズされたコンポーネントを作成できます。これは2つのステップで行います。まず、カスタムコンポーネントを作成し、次にそれをアプリケーションに追加します。

より具体的なガイドについては、独自の以下のページもご覧ください：

カスタムチャート 📊
カスタム動的パラメータ 🎛

ステップ1：コンポーネントの作成

メインコンポーネントファイルの作成

// ./src/components/Hello/Hello.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'

/**
 * Renders an hello-world
 */
class Hello extends Component {
  state = {}

  /**
   * render
   * @return {ReactElement} markup
   */
  render () {
    return (
      <div className='hello'>
        <img src='assets/img/logo.png' className='logo' />
        <h1>Welcome {this.props.name}</h1>
        <p>
          Welcome to your newly created Application
        </p>
      </div>
    )
  }
}

// You can add props, you will be able to set value from Architect or from JSON
Hello.propTypes = {
  name: PropTypes.string
}

export default Hello

スタイルファイルの作成

// ./src/components/Hello/Hello.less
.hello {
  .logo {
    margin-top: 20px;
    width: 200px;
  }
  text-align: center;
}

ファイルの作成と読み込み

インデックスを作成します

// ./src/components/Hello/index.js
import Hello from './Hello.jsx'
import './Hello.less'

export default Hello

コンポーネントインデックスに追加します

// ./src/components/index.js

import Hello from './Hello'


import FpSdk from 'forepaas/sdk'
import DashboardTitle from './DashboardTitle'
import Username from './Username'
import Toaster from './Toaster'

export default {
  components: {
    Hello,
    DashboardTitle,
    Username,
    Toaster
  },
  camelCaseToDash (myStr) {
    return myStr.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
  },
  init () {
    for (let component in this.components) {
      FpSdk.modules[this.camelCaseToDash(component)] = this.components[component]
    }
  }
}

この時点で、コンポーネントは使用可能です。Reactコンポーネントのrender関数内に設定されたHTMLを表示できます。また、歓迎メッセージを表示するためにprops name が必要です。

ステップ2：設定に追加する

JSONから

コンポーネントをアプリケーションの2つの異なる部分に追加できます。

ダッシュボード内

ダッシュボードファイルを開きます ./config/dashboards/overview.json ルート items 内またはパネル内の任意の場所に新しい項目を作成します。

次のサンプルでは、hello コンポーネントがパネル内に追加されています。 JSON内に直接propsを設定できます (name: サンプルではuser)

{
  "name": "Overview",
  "width": 36,
  "height": 36,
  "description": "",
  "items": [
    {
      "type": "panel",
      "sizeX": 36,
      "sizeY": 36,
      "row": 0,
      "col": 0,
      "items": [
        {
          "sizeX": 36,
          "sizeY": 34,
          "row": 0,
          "col": 0,
          "type": "hello",
          "name": "user"
        }
      ]
    }
  ],
  "url": "/overview",
  "path": "",
  "tags": []
}

メニューファイルを開きます ./config/menus/header.json コンテナ内に新しい項目を作成します。

{
  "id": "header",
  "class": "header",
  "containers": [
    {
      "id": "mycontainer",
      "items": [
        {
          "type": "hello",
          "name": "user"
        }
      ]
    }
    ...
  ]
}

コンポーネントは現在メニューに表示されるはずです。

Architectから

Warning

まず、新しいコードでアプリをアップロードし、再構築し、デプロイする必要があります。

次に、ダッシュボードに移動し、編集するダッシュボードを選択します。 +ボタン (メニューまたはダッシュボード内) を選択し、カスタムをクリックします。

JSONに追加する必要があります：

{
  "type": "hello",
  "name": "user"
}

確認をクリックします。

おめでとうございます！ 🎉 現在、ダッシュボード内にコンポーネントが表示されるはずです。

さらに進みたいですか？

?>➡️ カスタムチャートの作成方法を学ぶ！

?>➡️ カスタム動的パラメータの作成方法を学ぶ！

カスタムコンポーネントの作成#

#ステップ1：コンポーネントの作成

#メインコンポーネントファイルの作成

#スタイルファイルの作成

#ファイルの作成と読み込み

#ステップ2：設定に追加する

#JSONから

#ダッシュボード内

#メニュー内

#Architectから