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" は使用しないでください。