カスタム HTML

[カスタム HTML] コントロールは上級ユーザー向けです。HTML、CSS、JavaScript のプログラミング言語の柔軟性を利用し、ビジネス ニーズに応じてカスタムの対話型コントロールを作成できます。このコントロールには、HTML、CSS、JavaScript のコード専用のエディターが含まれているため、外部でホストされている CSS ファイルや JavaScript ファイルを URL を介して組み込めるという利点もあります。

デモ

カスタム HTML: グラフを作成する

はじめに

このアプリは、d3.js や chart.js などの JavaScript ライブラリを使用して、さまざまな種類のグラフを作成する方法を示しています。

デモアプリ (ご自身でお試しください)

対話型のグラフをご自分で試す場合はデモ アプリをご利用ください。

デモ アプリを GitHub からダウンロード

デモ アプリ (使用方法)

1. UiPath Apps で新しいアプリを作成し、ダウンロードしたデモ アプリをインポートします。
2. アプリをプレビューしてすべてのグラフの種類を操作します。

カスタム HTML: 変数の関数を使用して対話型の円グラフを作成する

はじめに

このアプリでは、エンティティ、[カスタム HTML]、および [編集グリッド] コントロールを組み合わせて、対話型の円グラフを表示します。対話機能をアクティブ化するには、ドロップダウン メニューからオプションを選択します。これにより、円グラフのセクションと編集グリッド内のレコードが変更されます。その後、グラフ セクションをクリックすると、編集グリッド内のデータが更新されます。

デモアプリ (ご自身でお試しください)

対話型の円グラフをご自身で試すには、以下のデモ アプリを使用するか、手順を実行します。

デモ アプリを GitHub からダウンロード
デモ アプリをクラウドでプレビュー

デモ アプリ (使用方法)

1. デモ アプリをプレビューします。
2. [Filter Tickets by Customer Name] ドロップダウンからオプションを選択します。チケットの合計数、円グラフの表現、および編集グリッド内のデータが変わります。
3. グラフのスライス上にカーソルを合わせます。ツールチップに、カテゴリ名とチケット数が表示されます。
4. グラフのスライスをクリックします。編集グリッドに、選択したカテゴリのレコードが表示されます。

手順

[カスタム HTML] コントロールでエンティティと変数がどのように使用されているかを確認するには、次のアプリ ファイルをローカル マシンにダウンロードします。

• エンティティ スキーマ
• チケット エンティティのデータ
• チケット ソース エンティティのデータ
• アプリ ファイル

ダウンロード後、次の手順を実行します。

1. UiPath Data Service で [スキーマをインポート] をクリックします。

   1. 先ほどダウンロードした ticket_entities_schema.json ファイルを選択します。
   2. [エンティティ] タブで、[Tickets] と [Tickets Source] のチェックボックスをオンにします。
   3. [チョイス セット] タブに切り替え、[Continents] と [Friction Level] のチェックボックスをオンにします。
   4. [インポート] をクリックします。

2. UiPath Data Service で、Tickets Source エンティティを選択します。

   1. [データをインポート] をクリックします。
   2. 以前にダウンロードした ticketsource_entity_data.csv ファイルを選択して、[開く] をクリックします。
   3. [データ] タブに切り替えて、アップロードされたレコードを表示します。

3. UiPath Data Service で、Tickets エンティティを選択します。

   1. [データをインポート] をクリックします。
   2. 以前にダウンロードした tickets_entity_data.csv ファイルを選択して、[開く] をクリックします。
   3. Relationship 型および Choice Set 型のフィールドのデータは、自動的にはインポートされません。これらのフィールドには手動でデータを入力する必要があります。
   4. [ データ ] タブに切り替えます。Tickets レコードごとに、Source フィールドの値をランダムに Chat、Phone、または Email を選択して更新します。
   5. [データ] タブの Tickets レコードごとに、Friction フィールドの値をランダムに 1、2、または 3 を選択して更新します。

4. アプリ ファイルをインポートするために、以下の手順を実行してから、手順 14 に進みます。 UiPath Apps で、新しい VB アプリを作成します。

   1. [ファイルからインポート] をクリックします。
   2. 以前にダウンロードした CustomHTMLPieChart_DemoApp.uiapp ファイルを選択して、[開く] をクリックします。
   3. エラーを修正するには、インポートしたアプリのエンティティを、前の手順 2 と 3 で作成したエンティティに置き換えます。
   4. インポートしたアプリで、「CustomFilterDropdown」という名前の [ドロップダウン] コントロールを選択し、[リストのソース] プロパティの [式エディター] を開いて保存します。

5. アプリを最初から作成するために、手順 5 から 14 を実行します。 UiPath Apps で、新しい VB アプリを作成します。

6. アプリで、手順 1 から 3 で作成したエンティティを参照します。

7. Data Service のエンティティに基づいて以下の変数を作成します。

   変数名	入力	参照されるエンティティ
   allTickets	ListSource	チケット
   filteredTicketListSource	ListSource	チケット
   selectedSourceType	テキスト	-
   ticketSourceTypes	ListSource	Tickets Source

8. [ドロップダウン] コントロールをアプリに追加し、名前を「CustomerFilterDropdown」に変更します。

   1. [ラベル] フィールドで、名前を「Filter tickets by customer name (チケットを顧客名でフィルター処理)」に変更します。

   2. [リストのソース] フィールドで式エディターを開き、次の VB 式を書き込みます。

      New ListSource(of String)With{.data = allTickets.data.Select(Function(x) x.CustomerName).Distinct.ToList}
      

   3. [イベント] タブに切り替えて、[ルールを作成] をクリックします。

   4. [値を設定] ルールを追加して、次の入力値を設定します。

      設定する項目	filteredTicketListSource
      値 (Value)	Fetch(of Tickets)

9. [ヘッダー] コントロールをアプリに追加し、名前を「TicketCountHeader」に変更します。

   1. [テキスト] フィールドで式エディターを開き、次の VB 式を書き込みます。

      (filteredTicketListSource.totalRecords).ToString +" Tickets"
      

10. [カスタム HTML] コントロールをアプリに追加し、名前を「Chart」に変更します。

    1. コード エディターを開き、プレースホルダーの内容を次のコード スニペットに置き換えます。

    • HTML: オープンソース ライブラリからテンプレートの JavaScript グラフを生成し、そのグラフにスタイル クラスを適用します。

      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      <div class="chartContainer">
        <canvas class="pieChart" id="myChart"></canvas>
      </div>
      

    • CSS: 2 つのスタイルクラスを定義します: .chartContainerと .pieChart.

      .chartContainer {
        height: 100%;
        background-color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #526069;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .pieChart {
        width: 50%;
        max-width: 400px;
        max-height: 400px;
      }
      

    • JavaScript: 変数の関数を定義し、グラフに対話機能を追加します。

      // Create an object to store counts
      var counts = {"Email": 0, "Phone": 0, "Chat": 0};
      
      // Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer
      var Tickets = [
        {Source: { Source: 'Phone' }},
      ];
      
      // Function to count the number of tickets per Source
      function countTickets(tickets) {
        counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Reset counts to zero
        for (var i = 0; i < tickets.length; i++) {
          counts[tickets[i].Source.Source]++;
        }
      }
      
      countTickets(Tickets); // Count tickets in the initial data
      
      // Create a Chart
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
          labels: ['Email', 'Phone', 'Chat'],
          datasets: [{
            label: '# of Tickets',
            data: [counts["Email"], counts["Phone"], counts["Chat"]],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          onClick: function(evt, elements) {
            if (elements.length) {
              var chartElement = elements[0];
              var label  = this.data.labels[chartElement.index];
              OutputSource = label;
              console.log(OutputSource); // You can see the stored value in browser's console on each click
              App.setVariable('selectedSourceType', OutputSource);
            }
          }
        }
      });
      
      // Function to update chart's data
      function updateChart(data) {
        NewTickets = data; // New data to update the chart
        countTickets(NewTickets);
        myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]];
        myChart.update();
      
        let sourceWithData = Object.keys(counts).find(ticketSource => {
          return counts[ticketSource] > 0;
        });
        if(sourceWithData) {
          App.setVariable('selectedSourceType', sourceWithData);
        }
      }
      
      //Listen for updates to the ticket data and update chart
      async function registerOnChangeEvent() {
        App.onVariableChange('filteredTicketListSource',(listSource) => {
          updateChart(listSource.data);
        })
        const listSource = await App.getVariable('filteredTicketListSource');
        if(listSource?.data?.length > 0) {
          updateChart(listSource.data);
        }
      }
      
      registerOnChangeEvent();
      

    2. [保存] をクリックします。

    3. [スタイル] タブに切り替えて、[サイズ] を次のように設定します。

       幅	1000 px
       高さ	400 px

11. [ヘッダー] コントロールをアプリに追加し、名前を「sourceTypeHeader」に変更します。

    1. [テキスト] フィールドで式エディターを開き、次の VB 式を書き込みます。

       "Tickets created through " & selectedSourceType
       

12. [編集グリッド] コントロールをアプリに追加し、名前を「TicketsListByType」に変更します。

    1. [データ ソース] フィールドで式エディターを開き、次の VB 式を書き込みます。

       Fetch(of Tickets)(createFilterGroup(Nothing, New FilterGroup(){createFilterGroup(New QueryFilter(){addFilter(MainPage.TicketsListByType.SearchColumn, "contains", MainPage.TicketsListByType.SearchTerm)}, Nothing, 0), createFilterGroup(New QueryFilter(){addFilter("Source.Source", "=", selectedSourceType), addFilter("CustomerName", "contains", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0)}, 0), New PaginationProps(MainPage.TicketsListByType.PageStart, MainPage.TicketsListByType.PageLimit), New SortOption(){addSortOption(MainPage.TicketsListByType.SortColumn, Not(Not(MainPage.TicketsListByType.isDescending)))}, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})
       

13. [MainPage] で、[イベント] タブに切り替えて、[ルールを作成] をクリックします。

    1. [値を設定] ルールを追加して、次の入力値を設定します。

       設定する項目	allTickets
       値 (Value)	クエリ ビルダーを開き、Tickets エンティティを選択して [保存] をクリックします。

    2. 2 つ目の [値を設定] ルールを追加し、次の入力値を設定します。

       設定する項目	filteredTicketListSource
       値 (Value)	クエリ ビルダーを開き、Tickets エンティティを選択して [保存] をクリックします。

14. アプリをプレビューし、ドロップダウンでオプションを選択して、グラフが更新されていることを確認します。グラフ セクションをクリックし、編集グリッドが選択したセクションのデータで更新されていることを確認します。

カスタム HTML: 日付/時刻選択を作成する

はじめに

このアプリは、カスタムの日付時刻ピッカーを作成する方法を示しています。

デモアプリ (ご自身でお試しください)

日付時刻ピッカーをご自身で試す場合はデモ アプリをご利用ください。

デモ アプリを GitHub からダウンロード

デモ アプリ (使用方法)

1. UiPath Apps で新しいアプリを作成し、ダウンロードしたデモ アプリをインポートします。
2. アプリをプレビューして日付時刻ピッカーを操作します。

カスタム HTML: パスワード フィールドを作成する

はじめに

このアプリは、パスワード フィールドを作成する方法を示しています。

デモアプリ (ご自身でお試しください)

パスワード フィールドをご自身で試す場合はデモ アプリをご利用ください。

デモ アプリを GitHub からダウンロード

デモ アプリ (使用方法)

1. UiPath Apps で新しいアプリを作成し、ダウンロードしたデモ アプリをインポートします。
2. アプリをプレビューしてパスワード フィールドを操作します。

カスタム HTML: 署名入力フィールドを作成する

はじめに

このアプリは、署名の入力フィールドを作成する方法を示しています。

デモアプリ (ご自身でお試しください)

署名の入力をご自身で試す場合はデモ アプリをご利用ください。

デモ アプリを GitHub からダウンロード
デモ アプリをクラウドでプレビュー

デモ アプリ (使用方法)

1. UiPath Apps で新しいアプリを作成し、ダウンロードしたデモ アプリをインポートします。
2. いくつかのエラーが見つかる可能性があります。エラーを修正するには、参照されているストレージ バケット「Demo app」をテナント内のバケットに置き換えます。
3. アプリをプレビューして署名の入力フィールドを操作します。

全般

• コード エディターを開く - 3 つのパネルで構成されるエディターを開いて、HTML、CSS、JavaScript のコードを追加できます。
• アクセシブル ラベル - コントロールの説明です。このプロパティはスクリーン リーダーによって使用され、アクセシビリティを向上できます。
• 非表示 - true の場合、実行時にコントロールが非表示になります。
• 無効化 - true の場合、実行時にこのコントロールを非アクティブにします。HTML、CSS、JavaScript のコンテンツは読み込まれますが、クリックなどのユーザーの操作には応答しません。

イベント

イベントはありません。

スタイル

• コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。
  注:

  配置は、親に対して選択したレイアウト ([縦方向 ]/ [横方向]) によって異なります。

• 枠線 - コントロールの枠線です。枠線の太さと半径を設定できます。
• マージン - コントロールのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。
• サイズ - コントロールの幅と高さです。既定では、サイズは [ auto] に設定されています。最小値または最大値を設定するには、3 点リーダー メニューのアイコン (...) をクリックします。

カスタム HTML 用のコード エディター

[カスタム HTML] コントロールのコード エディターには 3 つのパネルがあり、HTML、CSS、JavaScript のプログラミング言語でコードを入力できます。各エディターでは、IntelliSense (コードの自動補完機能) と構文の強調表示機能がサポートされています。

このパネルから入力したコードはプロジェクトにコンパイルされ、プレビュー用に App Studio でレンダリングされます。コントロールの機能を確認するには、アプリをプレビューします。

重要:

• 各エディターのコンテンツの最大サイズは 5 MB です。コンテンツがこのサイズを超えると、変更を保存できなくなります。
• IntelliSense は、HTML エディター内に記述した CSS と JavaScript コードでは機能しません。

外部リソースを追加する

定義済みのスタイルやスクリプトが既にある場合は、それらをこのコントロール内で参照できます。対応する CSS パネルや JavaScript パネルでコードを記述する必要はありません。

既存の .css または .js ファイルを参照するには、以下の手順に従います。

1. [カスタム HTML] コントロールのコード エディターで、[外部リソース] タブに切り替えます。
2. [CSS] セクションで、外部 CSS ファイルを追加します。相互運用性を確保し、アプリが実行される場所で確実にファイルを利用できるようにするため、ファイルはネットワークでアクセス可能な URL でホストされている必要があります。
3. [JavaScript] セクションで、外部スクリプト ファイルを追加します。 相互運用性を確保し、アプリが実行される場所で確実にファイルを利用できるようにするため、ファイルはネットワークでアクセス可能な URL でホストされている必要があります。
4. 外部リソースをすべて追加し終わったら、[保存] をクリックします。

Tab キーのアクセシビリティのショートカット キー

既定では、Tab キーを押すと、現在のエディター内にタブ スペースが追加されます。Tab キーの動作をカスタマイズするには、次のショートカット キーを使用します。

OS	ショートカット キー	動作
Windows	Ctrl + M	パネル間を移動し、エディターに表示されているボタンにフォーカスを変更するよう Tab キーに指示します。Ctrl + M キーをもう一度押すと、Tab キーの既定の動作に戻ります。
macOS	Ctrl + Shift + M	パネル間を移動し、エディターに表示されているボタンにフォーカスを変更するよう Tab キーに指示します。Ctrl + Shift + M キーをもう一度押すと、Tab キーの既定の動作に戻ります。

HTML エディター

このパネルではコントロールの構造を入力できます。通常は HTML コード ブロックの <body></body> タグ内に含まれています。

たとえば、対話型の円グラフのコンテナー要素をアプリに追加するには、次の HTML スニペットを使用します。

<canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas>

場所：

• id="myChart" は、HTML 要素内に対話型の円グラフを生成する、JavaScript の「myChart」要素を参照します。詳しくは、「JavaScript エディター」をご覧ください。
• class="chart-container" は、HTML 要素内に円グラフのスタイルを追加する CSS クラス「chart-container」を参照します。詳しくは、「CSS エディター」をご覧ください。

CSS エディター

このパネルでは、コントロールのスタイルと、そのコントロール内の要素を入力できます。

たとえば、円グラフに色と枠線を追加するには、次の CSS スニペットを使用します。

.chart-container {
    background-color: #f3f7e9;
    border: 1px solid #cccccc;
}

JavaScript エディター

このパネルでは、コンテンツのタイムリーな更新、マップ、2D/3D グラフィック アニメーションのような、コントロールの対話型の要素を作成できます。

たとえば、Apple 製品の全世界の売上を示す円グラフを作成し、選択したスライスの値を表示するようにデザインするには、以下の手順を実行します。

1. 次の JavaScript 外部リソースを追加します。

   https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js
   

2. 次の JavaScript スニペットを使用します。

   const ctx = document.getElementById('myChart').getContext('2d');
   const myChart = new Chart(ctx, {
     type: 'pie',
     data: {
       labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'],
       datasets: [{
         label: 'Sales',
         data: [120000, 80000, 50000, 40000, 30000],
         backgroundColor: [
           '#5CB85C', // Green
           '#F0AD4E', // Orange
           '#D9534F', // Red
           '#5BC0DE', // Light blue
           '#999',    // Gray
         ],
         borderColor: '#fff',
         borderWidth: 2,
       }],
     },
     options: {
       plugins: {
         legend: {
           position: 'top',
         },
         title: {
           display: true,
           text: 'Apple Products Sales',
         },
       },
     },
   });
   

カスタム HTMLで変数を使用する

[カスタム HTML] コントロールと、他のコントロールや連携との間の通信を設定するには、変数を作成し、組み込み関数 setVariable()、getVariable()、onVariableChange() を使用することをお勧めします。

getVariable()

既存の変数の値を取得するには、JavaScript エディターでこの関数を使用します。

たとえば、変数の値を internalValue に渡すには、次の JavaScript スニペットを使用します。

async function init() {
  let internalValue = await App.getVariable('<app_variable_name>');
}
init();

注:

• getVariable() 関数は非同期であるため、await を使用する必要があります。
• 関数内で getVariable() を呼び出す場合は、その関数は async としてください。この例では init() 関数を作成してすぐに呼び出しました。
• getVariable() を最上位レベルで呼び出す場合は、async 関数内に埋め込みます。

無効な変数名などのエラーを処理するには、トライ キャッチ ステートメントを使用します。以下に例を示します。

async function init() {
  try {
    const value = await App.getVariable("test");
  } catch (e) {
    console.log("Error in evaluating app variable:", e);
  }
}
init();

setVariable()

既存の変数に値を設定するには、JavaScript エディターでこの関数を使用します。最初の引数は変数名、2 番目の引数は設定する値です。

async function setValue() {
  await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();

注:

設定操作が完了するまで待ってから他のコードを実行するには、await を使用します。

無効な変数名や、変数と設定値の型の不一致などのエラーを処理するには、トライ キャッチ ステートメントを使用します。以下に例を示します。

try {
  App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
  console.log("Error in setting app variable:", e);
}

onVariableChange()

既存の変数の値の変更をリッスンし、変数の最新の値にアクセスするには、JavaScript エディターでこの関数を使用します。

App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});

次の例では、onVariableChange() によって返される関数を deregister 変数に代入します。次に、変数の変更のリッスンを停止する場合は、deregister() 関数を呼び出すことができます。

const deregister = App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});

// To stop listening for value changes, the deregister function can be invoked like below
deregister();

注:

• リスナーは、[カスタム HTML] コントロールが完全にレンダリングされた後に開始されます。[カスタム HTML] コントロールが初期化される前に変数の値が変更された場合、更新後の値はキャプチャされません。 最新の変数値を取得するには、onVariableChange() を呼び出す前に getVariable() を呼び出します。
• HTML コントロールとその中の関数は、実行時にコントロールが表示された後に初期化されます。

変数の型

アプリの変数の型	変数の関数からの応答のサンプル
Text (String)	"Hello world"
UInt64 (Int)	100
Decimal number	50.25
True/False (Boolean)	True
DateOnly	2024-01-02 (形式: YYYY-MM-DD)
DateTimeOffset	2024-01-06T09:54:41.9170000Z (同等の JS 形式: Date オブジェクトの ISO 文字列)
AppsFile - [ファイル ピッカー] コントロールの値	JS File オブジェクト
AppsFile - URL から作成される値 以下に例を示します。 new AppsFile("https://image.jpg")	File オブジェクト: {FileSize: 0, Name: "", URL: "https://image.jpg", __infoType: "$metadata"}
GUID	"5637F7DB-391D-4C8B-805D-0A918531CA3E"
List(Of string)	["Banana", "Kiwi", "Apple", "Lemon"]
ListSource(Of <Entity>)	{ data: [{Name: "John", Age: "28", ...},{Name: "Kane", Age: "48", ...}], totalRecords: 2 }
<Entity> (Single entity row)	{ Name: "John", Age: "28", ... }
ListSource(Of <Choiceset>)	{ data: [{DisplayName: "Male", Id: "00F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Male", ...}, {DisplayName: "Female", Id: "01F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Female", ...}], totalRecords: 2 }
Datatable	[{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...]

カスタム HTML のベスト プラクティス

• [カスタム HTML] コントロールにはクライアント側からアクセスできるため、機密データを含めないでください。
• <html> タグと <head> タグは HTML エディター内で使用しないでください。コードは自動的に <body> タグ内に追加されるためです。
• [外部リソース] タブには Bootstrap、jQuery、その他の JavaScript SDK などの外部リソースの CDN URL を追加します。
• 変数の変更のリッスンを停止する場合は、deregister() 関数を使用します。
• アプリケーションの速度の低下を防ぎ、コントロールの応答性を維持するために、大きなデータ ループを回避します。
• DOM 要素の使用は可能な限り最小限に抑えます。DOM 要素は必要な場合にのみ作成し、古くなったら削除します。
• 大規模なデータセットには、標準的なスクロールではなく無限スクロールや仮想スクロールを使用します。
• クリーンで最適化された冗長性のないコードを作成・維持します。

機能制限

• JavaScript エディターで無限ループまたは長期実行ループを追加すると、メイン スレッドでブロックが発生し、ブラウザーのタブが応答しなくなります。これを防ぐには、ループ内の条件が無限に実行されないようにします。ただし、無限ループが残っていてタブが応答しなくなった場合は、ブラウザー タブを強制的に閉じてから再度開いてください。
• コントロールを Apps に接続するには、変数の関数 getVariable()、setVariable()、onVariableChange() を使用する必要があります。
• HTML コントロールのサイズは、ポップアップまたはドロップダウン メニューの表示に合わせて動的に調整されません。これらのメニューに合わせて HTML コントロールのサイズを手動で設定する必要があります。
• デザイン時に HTML コントロールを操作することはできません。
• setVariable()、getVariable()、および onVariableChange() 関数は、実行時にのみ動作します。
• 変数名の変更や変数の削除は、コード エディターに自動的に反映されません。現在の変数でコードを手動で更新する必要があります。
• [カスタム HTML] コントロールから画像データを転送してストレージ バケットへ、またはデータ URL を使用するエンティティへ送る場合、ファイル サイズが 1 MB を超えてはなりません。このサイズを超えるファイルはパフォーマンスの問題を引き起こす可能性があります。
• このコントロールがプロセス、キュー、ストレージ バケットなどの他の UiPath コンポーネントと通信するには、変数を使用する必要があります。
• LESS または SCSS を使用して前処理された CSS コードは、HTML コントロールとの互換性がありません。
• 以下の API は、セキュリティ上の理由により、使用すると警告なしに失敗します。
  • download 属性を使用してダウンロードする
  • Window.alert()、Window.confirm()、Window.print()、Window.prompt() を使用してモーダルを開ける
  • ポインターと向きをロックする
  • トップレベルのブラウザー コンテキストに移動する
  • requestFullscreen() を使用して全画面表示に入る
  • MediaDevices.getDisplayMedia() を使用して画面をキャプチャする
  • MediaDevices.getUserMedia() を使用してカメラまたはマイクにアクセスする
  • 支払いをリクエストする
  • navigator.geolocation() を使用して場所にアクセスする
  • navigator.share() を使用してデータを共有する

[カスタム HTML] コントロールのコードをデバッグする

[カスタム HTML] コントロールのコンソール ログを追加および絞り込む

1. JavaScript エディターで console.log() を追加します。
2. F12 を押してブラウザー コンソールを開き、[コンソール] タブを選択します。
3. コンソールの設定で、[Selected context only] チェックボックスをオンにします。
4. コンソール ページの上部にある JavaScript コンテキスト ドロップダウンから、目的の HTML コントロールの html-control-base.html オプションを選択します。

選択したコントロールのログがコンソールに表示されます。

詳しくは、以下のビデオをご覧ください。

ブレークポイントを追加する

1. JavaScript エディターで console.log() を追加します。
2. F12 を押してブラウザー コンソールを開き、[コンソール] タブを選択します。
3. ログの右側にある VM メッセージをクリックします。

デバッガーが開きます。目的の行番号をクリックしてブレークポイントを選択します。

詳しくは、以下のビデオをご覧ください。

VB のプロパティ

VB のプロパティ	データ型	説明
AccessibleLabel	文字列	コントロールの説明です。スクリーン リーダーなどのアクセシビリティ テクノロジで使用されます。
Hidden	Boolean	[カスタム HTML] の表示/非表示を指定します。true の場合、実行時にコントロールが非表示になります。
Disabled	Boolean	[カスタム HTML] コントロールを無効化するかどうかを指定します。true の場合、実行時にこのコントロールとの対話が無効化されます。HTML、CSS、JavaScript のコンテンツは読み込まれますが、ユーザーの操作には応答しません。