ローカル CSS ファイルを使用してフォームをカスタマイズする

[フォームを作成] アクティビティの [ローカル CSS ファイル パス] フィールドを使用して、フォームを必要に応じて、自由にカスタマイズできます。

ローカル CSS ファイルを使用する場合には、いくつか注意すべきことがあります。

• グローバル スタイルは、CSS ファイル パスの設定後ただちに適用されます。
• 固有のコンポーネント スタイルをクラスとして設定する必要があります。関連する名前を使用します (たとえば、.username-label または .submitButton-color)。

• CSS ファイル パスを変数として設定した場合、フォーム プレビューにスタイルの変更は表示されません。変更内容をプレビューするには、CSS ファイルのパスにハードコードされた値を使用します。

注: [ローカル CSS ファイル パス] プロパティは UiPath.Form.Activities パッケージのバージョン 1.3.0 以降で使用できます。

チュートリアル

特定の表示要件を持つフォームをデザインするには、次の手順を実行します。

1. スタイル設定を含む CSS ファイルを作成して、ローカル デバイスに保存します。たとえば、ラベルの色を変更して、フォームにカスタムの背景を追加する場合には、次の CSS ファイルを作成します。

   body {
       background-image: url('https://images.pexels.com/photos/6590885/pexels-photo-6590885.jpeg');
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
   }
   .lastname-label
   {
      color : red;
      font-size : 15px;
      font-weight : 10px;
   }
   .firstname-label
   {
      color : green;
      font-size : 17px;
      font-weight : 30px;
   }
   .city-label
   {
      color : blue;
      font-size : 19px;
      font-weight : 50px;
   }
   .eligible-label
   {
      color : purple;
      font-size : 12px;
      font-weight : 30px;
   }

2. [フォームを作成] アクティビティ > [形式] プロパティ > [ローカル CSS ファイル パス] に CSS ファイルへのパスを入力します (例: "/file://C:\User heCssFile.css")。

   ローカル CSS ファイルへのパスを変数として保存し、[ローカル CSS ファイル パス] フィールドにその変数名を入力することもできます。

   
   

   

   
   
3. フォーム デザイナーを開き、カスタマイズするコンポーネントに移動します。
4. 対象のコンポーネントの [表示] タブ > [カスタム CSS クラス] フィールドに、ファイルで設定されたカスタム CSS クラスの名前を書き込みます。すると、CSS ファイル内のデータがフォームにバインドされます。たとえば、[City] ドロップダウンのラベルをカスタマイズする場合は、対応する CSS クラス city-label を入力します。
   
   

   

   
   
5. コンポーネントを保存します。
6. ローカル CSS ファイルを使用してカスタマイズする必要のあるコンポーネントごとに、手順 3 から 5 を繰り返します。
7. フォームを保存します。

サンプル ワークフロー

ワークフローの完成品を確認するため、または今後の参考資料として、サンプル XAML をダウンロードできます。