HTML パネル

はじめに

HTML パネルは、アプリケーションにカスタムのビジュアル要素を追加するために使用できる柔軟な要素です。

グラフやプロセス グラフなどのその他のビジュアリゼーションの横に、ダッシュボードには、説明テキスト、画像、または単純な KPI を表示する必要があることがよくあります。 これには、HTML パネルを使用します。

ダッシュボードに KPI を表示する HTML パネルの例は、下の図をご覧ください。

HTML パネルを作成するには、以下の手順に従います。

手順	操作
1	[Dashboard] タブに移動し、ダッシュボード項目のリストを右クリックします。
2	[ 新しい HTML パネル ] を選択してから、HTML パネル内のデータを使用する表を選択します。 ダッシュボードの項目リストに新しい HTML パネルが追加されます。
3	HTML パネル タブに移動し、[ 全般 ] パネルの expression をクリックします。
4	目的の HTML コードを含む式を入力し、[OK] をクリック します。 以下の画像で例をご確認ください。

式の結果は、HTML パネルの内容となる テキスト 値である必要があります。 データ (請求書の数など) から HTML パネルに情報を取得するには、 displaytext 関数などを使用してテキスト フォームに変換する必要があります。

メモ： HTML パネル内の式の計算は、集計式と同様に評価され、テーブルのルート レベルで値が計算されます。

インラインスタイルタグ

HTML パネルから生成された HTML は完全な Web ページ用に HTML 内に挿入されるため、式は完全な HTML ドキュメントではなく innerHTML プロパティである必要があります。 インライン スタイル タグを使用して、HTML 要素ごとに一意のスタイルを適用するよう、外観をカスタマイズします。

たとえば、その中で定義された CSS プロパティを使用して、「style」属性を使用します。

<div style="font-size:20px;color:HotPink">
This text is Hot Pink.
</div>

大事な： HTML パネルで使用される (インラインではない) CSS は、ページ上の他の要素に影響を与える可能性があります。 HTML パネル外のページの要素のカスタマイズは推奨されておらず、サポートされません。

インライン スタイルを使用するときは、 UiPath Process Mining プラットフォームで指定されている既定のスタイル ( UiPath Process Mining プラットフォームで使用されるカスタム フォントなど) を利用できます。 これにより、プラットフォームの外観と操作感に適合する HTML パネルを作成し、 UiPath Process Mining のテーマの変更に自動的に適応することができます。

ツールチップ

data-tooltip 属性タグを使用して、HTML パネルにカスタム ツールチップを追加できます。データツールチップのテキストは自動的に HTML セーフにされ、'<' や '&' などの特殊文字は、対応する HTML に置き換えられます。'<' または '&'。

HTML 形式をツールチップに含める場合は、代わりに data-tooltip-html を使用してください。

エスケープ

多くのエスケープを必要とするHTMLやその他のテキストを書くときには、 <<<< と >>>>を使用してエスケープの量を減らすことができます。 式エディターで 4 つの角括弧で囲まれたテキストは、すべての改行を含めて、テキスト値として扱われます。

データ URL を持つ iframe

インライン スタイルを使用する代わりには、データ URL を含む iframe を使用します。

メモ： [ <iframe> ] オプションを使用すると、UiPath Process Mining プラットフォームで指定される既定のスタイルは使用できません。

選択可能なテキスト

HTML パネルでテキストを選択可能にしたい場合は、 user-select: text 追加してください。選択可能にするテキストのスタイルで指定します。 ソフトウェアの内部クラスであるため、 class="enableTextSelection" は使用しないでください。