セレクトボックス

Warning

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

セレクトボックスを使用すると、定義されたリストから1つまたは複数の項目を選択できます（希望する構成によって異なります）。

{
  "id": "the-year",
  "type": "filter",
  "component": "selectbox",
  "customclass": "my-selectbox"
  "reference": "year",
  "placeholder": "Select a year",
  "sortBy": "value",
  "notEmpty": true,
  "multi": false,
  "default": [
    "2019"
  ],
  "dictionary": "year",
  "tableName": null,
  "order": null,
  "parents": [],
  "items": [
    {
      "value": "2020",
      "label": "Year 2020"
    },
    {
      "value": "2019",
      "label": "Year 2019"
    },
    {
      "value": "2018",
      "label": "Year 2018"
    }
  ]
}

field	description
`customclass`	セレクトボックスの周囲にカスタムCSSクラスを追加します。
`reference`	`filter`タイプの変換の場合、クエリ内で変更するフィールドの名前を指定します。
`placeholder`	項目が選択されていない場合に表示されるメッセージを設定します。
`sortBy`	値またはラベル（可能な値 `none`、`label`、`value`、`-label`、`-value`）で結果を順序付けることができます。
`notEmpty`	初回読み込み時に、notEmptyが使用され、デフォルト値が設定されていない場合、最初の要素が自動的に選択されます。
`multi`	この値が使用されている場合、セレクトボックスで複数の値を選択できます。
`default`	セレクトボックスを最初に表示する際に、この値が設定されます。
`dictionary`	DataPlantから項目を自動的に動的に読み込みます。詳細は下記を参照してください。
`tableName`	（オプション）`dictionary`を使用する場合、Analytics Managerに特定のテーブルを使用するよう強制します。これは推奨される使用方法ではありません。
`order`	（オプション）`type`が`scale`の場合のみ、詳細は下記を参照してください。
`parents`	このセレクトボックスの内容をフィルタリングするDynamic Parametersの`id`をリストする配列
`items`	セレクトボックスに表示する要素を手動で定義できます。ラベルは画面に表示され、値はクエリに送信されます。

dictionary

dictionary属性は以下のいずれかです：

フィールド名を参照するstring

"dictionary": "year"

フィールド名にidを使用するobjectと、いくつかの基準を指定するfilter

{
  ... 
  "dictionary": {
    "id": "year",
    "filter": {
      "year": {
        "gte": ["2015"]
      }
    }
  }
  ...
}

その後、Analytics Managerはそのフィールドを持つテーブルからそのフィールドのすべての値を要求します。

フィールド名が主キー（例：station_id）であり、Lakehouse Managerでオブジェクトのラベルに関連付けられている場合、Analytics Managerは自動的にラベルを取得して表示し、値を参照としてフィルタリングチャートに渡します。

order

動的パラメータtypeがscaleの場合、valueはscale.fieldsリクエストに追加されます。 orderは、各valueがどのように順序付けられるべきかを詳細に説明するオブジェクトです。例えば：

{
  "type": "dynamic-parameter",
  "dynamic-parameter": {
    "type": "scale",
    "id": "select_scale",
    "component": "selectbox",
    "default": "yearmonth",
    "order": {
      "yearmonth": "asc",
      "date": "asc"
    },
    "items": [
      {
        "label": "by month",
        "value": "yearmonth"
      },
      {
        "label": "by date",
        "value": "date"
      }
    ]
  },
  "label": "Scales"
}

コード例

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

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

セレクトボックス#

#dictionary

#order

#コード例

セレクトボックス

dictionary

order

コード例