カスタム動的パラメータを作成する

Warning

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

カスタム動的パラメータを作成することで、お気に入りのライブラリを使用したり、使用ケースに必要なすべての詳細を実装したりすることができます。

アプリ開発のさらに深い理解をご覧ください。

始めるには、この動的パラメータのHello Worldを以下に示します。これを /src/FpDynamicParameterCustom.jsx にコピーします。

import React from 'react'
import {connect} from 'react-redux'
import {set} from 'forepaas/store/querystring/action'

// Our system uses Redux to store information in a store named "querystring".
// Here we connect this component to the relevant store.
@connect((state) => ({
  querystring: state.querystring
}))
class FpDynamicParameterCustom extends React.Component {
  constructor (props) {
    super(props)
    // We will always store our current value in this.state.model
    this.state = {
      model: ''
    }
    // At the creation of composant, we have to check if a previous value is already on store
    this.initFromModel()
  }

  // Initialize the value with the current state in store
  initFromModel () {
    if (this.props.id) {
      var model = this.props.querystring[this.props.id]
      if (model) {
        this.state.model = model
      }
    }
  }

  // Update the store with "model" value
  updateModel (model) {
    if (this.props.id) {
      this.props.dispatch(set(this.props.id, model))
    }
  }

  // For now we will only render a "hello world string"
  render () {
    return (
      <div className='my-dynamic-parameter'>
        Hello world
      </div>
    )
  }
}

export default FpDynamicParameterCustom

次に、ファイル /src/index.js に、これを宣言するための以下の行を追加します。これらは FpSdk.start() 行の前に配置する必要があります。

import FpDynamicParameterCustom from './FpDynamicParameterCustom.jsx'
FpSdk.modules['dynamic-parameter-custom'] = FpDynamicParameterCustom

これで、動的パラメータが動作します。これは custom と呼ばれます。

これを ダッシュボード に追加します。これは 動的パラメータ 内のこの構成JSONスニペットを介して行います。

{
  "id": "custom",
  "type": "filter",
  "component": "custom"
}

または、この例のように直接コードとして追加することもできます。

import React from 'react'
import FpDynamicParameter from 'forepaas/dynamic-parameter'
import moment from 'moment'

const myDynP =  {
  id: 'custom',
  type: 'filter',
  component: 'custom'
}
class MyComponent extends React.Component {
  render () {
    return (
      <div className='hello-world'>
        <FpDynamicParameter dynamic-parameter={myDynP} />
      </div>
    )
  }
}
export default MyComponent

あなたのコンポーネントは「Hello World」を表示します。

この例では、単に入力テキストを配置し、それを city フィールドでフィルタリングするために使用します。

この目的で、構成に reference フィールドを追加します。これはApp SDKで動的パラメータが作用するフィールドを定義します。

{
  "id": "custom",
  "type": "filter",
  "component": "custom",
  "reference": "city"
}

次に、コンポーネントを修正し、以下を追加します。

handleChange 関数
「hello world」の代わりに入力

  handleChange (event) {
    this.setState({model: event.target.value})
  }
  render () {
    return (
      <div className='my-dynamic-parameter'>
        <input type='text' value={this.state.model} onChange={this.handleChange.bind(this)} />
      </div>
    )
  }

入力の各変更時に、コンポーネントの状態を更新します。ただし、前述したように、これはストアに影響を与えません。 handleChange 関数に1行を追加する必要があります。

  handleChange (event) {
    this.setState({model: event.target.value})
    this.updateModel(event.target.value)
  }

動的パラメータの準備ができました！

その内容を変更すると、URLも変更されます（その値とともに）。
それをチャートに接続すると、自動的にフィルタリングされます。

カスタム動的パラメータを作成する#

カスタム動的パラメータを作成する