For AI agents: the complete documentation index is available at https://docs.dataplatform.ovh.net/ja/llms.txt, the full documentation bundle is available at https://docs.dataplatform.ovh.net/ja/llms-full.txt, and this page is available as Markdown at https://docs.dataplatform.ovh.net/ja/sdk/app-container-switch.md.
  • 🇯🇵 日本語

    • スイッチ

    Warning

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

    スイッチは、要素（グラフィック、ボタンなど）の表示に条件を設定するために使用されます。 複数の項目を追加した場合、最初に条件が満たされたもののみが表示されます。

    例:

    • ここで、チャートのみが表示されます:
      • 1番目のケース: true - チャート
      • 2番目のケース: true - ボタン
    • ここで、ボタンのみが表示されます:
      • 1番目のケース: false - チャート
      • 2番目のケース: true - ボタン

    スイッチの追加

    コンテナ > タブを選択します。

    Exemple Panel

    スイッチの設定

    シンプルな設定

    この設定により、スイッチを簡単で直感的に設定できます。

    Exemple Panel

    そのためには、要素の表示条件を入力し、要素の種類を選択するだけです。

    その後、必要に応じて、このスイッチを動的パラメータにリンクさせることができます。ドロップダウンメニューから選択することで、動的パラメータのデータを条件に使用できます。

    以下の例では、スイッチはsiege_socialパラメータにリンクされており、siege_socialとして「Acme」が選択された場合、チャート要素が表示されます。 Exemple Panel

    必要なだけ多くのケースを追加できます。

    高度な設定

    この設定により、スイッチをJSONドキュメントを介して設定できます。以下は、簡略化された設定で作成されたスイッチに対応するJSONです。

    {
  "type": "switch",
  "dynamic-parameters": [
    "siege_social"
  ],
  "items": [
    {
      "case": "\"this.siege_social.indexOf('Acme')!==-1\"",
      "type": "chart",
      "chart": {
        "dynamic-parameters": [
          "datepicker",
          "siege_social"
        ],
        "component": "jvectormap",
        "options": {
          "map": "fr_regions_mill"
        },
        "request": {
          "data": {
            "fields": {
              "qte": [
                "sum"
              ],
              "ca": [
                "sum"
              ]
            }
          },
          "scale": {
            "fields": [
              "ville"
            ]
          }
        },
        "id": "chart-9370143"
      }
    }
  ]
}