アクティビティ

タイトルの色を動的に変更する

トリガーの種類: シンプル アクションの種類: コンポーネントスキーマをマージ

この高度な論理は、ユーザーがリストから目的の色を選択すると、テキストフィールドコンポーネントのラベルの色を変更します。この変更は、カスタム CSS ファイルを使用して適用されます。

前提条件: テキストフィールドの新しい色を記述した CSS クラスをフォームの [カスタム CSS] プロパティフィールドに追加します。

たとえば、以下の CSS スニペットには、ラベルの色を緑または赤に設定するクラスが含まれています。

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

CSS クラスを [カスタム CSS] プロパティで参照したら、以下の手順に従ってフォームを設計します。

1 つのテキストフィールド コンポーネントと、1 つの ラジオ コンポーネントを追加します。コンポーネントのプロパティ名に注意してください。プロパティ名は高度な論理で使用します。
テキストフィールドコンポーネントの [表示] タブで、既定のカスタム CSS クラスを設定します。たとえば、赤をテキストフィールドの既定の色に設定するには、textFieldLabel-red クラスを使用します。このクラスは、「前提条件」セクションで作成した CSS ファイルで定義されている必要があります。
ラジオ コンポーネントで、色 green および red の 2 つの値を追加します。
テキストフィールド コンポーネントの [論理] タブに移動します。
論理を追加し、"color selection" という名前を付けます。
[シンプル] のトリガーの種類を選択します。
1. [条件として使用するフォームコンポーネント] ドロップダウンメニューから、[Radio ({radio_field_key})] を選択します。
2. [条件として使用する値] フィールドに、「"green"」と入力します。
上記の設定により、ユーザーがラジオオプションから [green] を選択した場合を検出し、テキストフィールドのラベルの色を変更するアクションをトリガーします。
アクションを追加し、"change color using css" という名前を付けます。
[コンポーネントスキーマをマージ] のアクションの種類を選択して、以下のスニペットを入力します。
```
return { customClass: "textFieldLabel-green" }return { customClass: "textFieldLabel-green" }
```
アクションと論理を保存します。
コンポーネントを保存します。