マイクロアプリ

ページビルダー

ページビルダーとそのコンポーネントについて理解することで、アクションページを作成できるようになります。ページビルダーのさまざまなコンポーネントとセクションについては、以下のセクションで説明します。自身の要件に応じて、追加のフィールドとボタンを追加し、カスタマイズします。

ページビルダーのチュートリアル

次のスクリーンショットは、各セクションがコールアウトされた完全な状態のページビルダーです。番号が付いている各セクションを参照しながら、以下で説明していきます:

上記のコールアウトごとに線を引いたページビルダーの全体ビュー

  1. 上部のバーの左側には、選択可能なパンくずリストがあります。ページ名(右端に太字で表示され、開いていることを示すメニューアイコンが付いている)を選択すると、ページ間をすばやく移動できます。バーの中央で、標準モニターまたはモバイルビューのいずれかを選択できます。バーの右側には、プレビューオプションがあります。[ページのプレビュー] は、ビルダーで表示するこのページのビューを表示します。[マイクロアプリのプレビュー] は、マイクロアプリのアクションのモックワークフローを提供します。ここですべてのページを開いて、通知とアクションを表示できます。
  2. 画面左側には、マイクロアプリの各画面へのクイックナビゲーションオプションがあります。上から下にかけて、このマイクロアプリ内のすべての通知またはページのリスト、ローカリゼーション画面、および、名前、説明、アイコンを変更できるプロパティ画面が表示され、それぞれに移動できます。詳しくは、次を参照してください:

  3. コンポーネントは左側のペインにあります。それらを選択して、画面中央のビルダーキャンバスにドラッグします。「ページビルダーのコンポーネント」を参照してください。コンポーネントは、[入力]、[表示]、および[レイアウト]に分けられています。

    • 入力コンポーネントは、ボタン、テキスト入力、ラジオボタンなど、アクション可能なセクションをページ上に作成します。
    • 表示コンポーネントは、テーブル、静的テキスト、画像など、マイクロアプリのエンドユーザーに情報を提供します。
    • レイアウトコンポーネントは、ページのレイアウトを設定するためのグリッドコンポーネントを備えています。
  4. ビルダーキャンバスは中央のセクションです。コンポーネントをこのあたりに移動して、必要に応じて配置できます。ここでコンポーネントを選択して、右側ペインに表示されるコンポーネントのプロパティ、アクション、その他のタブを有効にします。
  5. コンポーネントをカスタマイズし、右側ペインにページの詳細を追加します。[ページの詳細] タブでは、名前を入力し、情報のフィルターを設定し、ページコンポーネントに論理を追加することで、作成するページを構成できます。また、情報デバッグ機能を使用できます。このタブはページに対し同じままで、このタブは選択したコンポーネントに依存しません。その他のタブは、選択したコンポーネントによって異なります。使用可能なタブには、次のようなものがあります:

    • プロパティ:各ページビルダーのコンポーネントには、さまざまなオプションを備えた固有のプロパティメニューがあり、コンポーネントに応じて選択できます。
    • 入力検証規則:一部のコンポーネントでは、そのコンポーネントに固有の検証規則が有効になります。
    • アクション:コンポーネントに応じて、さまざまなアクションを使用できます。アクションは、マイクロアプリの受信者(Workspaceユーザー)がアクション可能な入力で応答できるようにします。

    1つのコンポーネントに固有のその他のタブについては、下記の「表示コンポーネント」および「レイアウトコンポーネント」セクションで、関連するコンポーネントとともに詳しく説明しています。

使用可能なコンポーネントプロパティフィールド、トグル、および選択可能な要素をすべて示すリストとそれらの説明については、「コンポーネントのプロパティ」を参照してください。

ページテンプレート

ページを作成するとき、必要な情報に応じて、次の基本的なページレイアウトから選択できます:各テンプレートは、目的のページを作成するアクティビティを高速化することのみを目的としています。

  • 詳細 - 静的な詳細を提供し、キャッシュから特定のレコードに接続されるページテンプレートです。
  • フォーム - ページにユーザーデータを入力する機能に加えて、静的な詳細を提供するページを作成します。
  • テーブル - ターゲットのアプリケーション統合から読み込むデータテーブルに基づいて、複数のレコードを一覧表示するページを作成します。
  • 静的コンテンツ - 見出し、エラーメッセージ、リマインダーなど、静的でアクションを必要としない情報を提供するページコンポーネントをセットアップします。
  • 埋め込み -マイクロアプリにカスタムWebページを埋め込むためのインラインフレーム(iFrame)をレンダリングするページを作成します。

ページビルダーのコンポーネント

ページビルダーでは、さまざまなページコンポーネントから選択することができ、マイクロアプリの出力、情報、および表示のカスタマイズと設定を行うことができます。以下に記載されたコンポーネントを使用し、予測とニーズに基づいてページマイクロアプリを構築します。たとえば、ユーザーのリストを表示する場合は、テーブルコンポーネントを使用して構築します。さまざまなテンプレートページに、デフォルトで使用可能なさまざまなコンポーネント機能があります。以下のリストは、使用可能なすべてのオプションを網羅しています。

入力コンポーネント

入力セクションには、ボタン、テキスト入力、ラジオボタンなど、アクション可能なセクションをページ上に作成するコンポーネントがあります。

入力コンポーネントの詳細ビュー

ボタン

クリックして使用する、アクションと論理が含まれたコンポーネントをページに追加します。ボタンのサイズとスタイルを調整できます。アクションとして、[サービスアクションの実行]、[URLに移動]、[通知トリガーの実行]のオプションがあります。たとえば、アクションを使用すると、ボタンでユーザーを別のページに誘導したり、エントリを送信したりできます。ボタンアクションについて詳しくは、「アクション」を参照してください。

テキスト入力

ページでユーザーに表示されるデータテーブル、列、および値を指定することで、表示されるデータのテキストソースを定義します。このコンポーネントはオプションマークを付けることができます。フィールド幅は変更できます。検証規則は、最小または最大の長さやテキストパターンをベースにして構成し、ユーザー入力を識別できます。このコンポーネントの使用例については、「作成ページの構築」および「リストページの構築」を参照してください。

テキスト領域

ページでユーザーに表示されるデータテーブル、列、および値を指定することで、表示されるデータのテキストソースを定義します。このコンポーネントはオプションマークを付けることができます。検証規則は、最小または最大の長さやテキストパターンをベースにして構成し、ユーザー入力を識別できます。

番号入力

ページでユーザーに表示されるデータテーブルと列を指定して、表示されるデータのソースを定義します。時間、日付などの形式を定義できます。コンポーネントをオプションとしてマークしたり、フィールド幅を変更したりできます。検証規則は、最小または最大の長さやテキストパターンをベースにして構成し、ユーザー入力を識別できます。精度では合計桁数を定義します。スケールでは小数点の右側の桁数を定義します。

選択

ユーザーが値の一覧から選択できるようにします(値の上限は100個)。ソースシステムからデータが入力されるか、値の一覧を手動で入力できます。コンポーネントをオプションとしてマークしたり、フィールド幅を変更したりできます。時間、日付などの形式を定義できます。このコンポーネントの使用例については、「作成ページの構築」を参照してください。

検索

ユーザーが大量の値を検索できるようにし、何かを検索して値を選択できるようにします。データのプール元を指定する必要があります。このコンポーネントはオプションマークを付けることができます。このコンポーネントの使用例については、「作成ページの構築」を参照してください。

「次を含む」戦略に沿って検索コンポーネントを構成すると、検索用語の読み込みに時間がかかる可能性があります。パフォーマンスとユーザーエクスペリエンスに影響するかどうかを確認するには、まとまった量のサンプルデータを使用してテストすることをお勧めします。または、「次から始まる」戦略を使用してパフォーマンスを向上させることができますが、この場合は検索用語で始まるレコードのみが返されます。

複数選択検索

複数選択検索検索コンポーネントと同様に機能するため、ユーザーは、取り得る値を検索することで、大量の値を検索して選択できます。

たとえば、ユーザーは会議をスケジュールするときに複数のユーザーまたはユーザーのメールアドレスを検索して追加したり、Jiraチケットを作成するときに複数のラベルを追加したりできます。複数選択検索コンポーネントで使用するデータのプール先を指定するには、HTTP統合でサービスアクションを構成するときに配列データ型を構成する必要があります。

複数選択のユースケース例:

  • Webex - 会議出席依頼を送信する複数のユーザーを選択します。
  • Smartsheet - シートを共有する複数のユーザーを選択します。
  • Jira - 1つのJiraチケットに割り当てる複数のラベルを選択します。
  • Office 365のカレンダー - イベントをスケジュールするときに、複数の参加者を選択します。
  • Office 365のメール - 複数のメール受信者を選択します。

構成

構成については検索コンポーネントの場合とほぼ同じですが、2つの構成オプション:「最大アイテム数」と「新規アイテムを作成可能」が追加されています。複数選択検索を構成するには、ページビルダーの標準的な構成オプション以外に以下を定義します:

レコード値へのマップ - 事前に選択された値のデータソースを定義します。詳細ページでのみ使用できます(レコードIDが必要です)。選択の場合と異なり、複数選択検索では1つの値に制限されません。

オプションのデータソース -ドロップダウンリストのオプションのデータソースを定義します。

検索語一致戦略 - 検索語がデータベース値の最初の部分と一致するか、またはデータベース値内の任意の部分と一致するかを選択します。

最大アイテム数 - 検索中に選択されるアイテムの最大数を設定します。

新規アイテムを作成可能 - ユーザーは検索の選択で提供されていないアイテムを作成できます(例:Jiraチケットに新しいラベルを追加)。

整合性チェック

整合性チェックは、検索と同様に機能しますが、選択されるアイテムの最大数を負でない値にする必要があります。データソースのテーブルが存在し、値、表示値、追加データのテーブル列が外部キーを使用してデータテーブルに正しくマップされている必要があります。

複数のエントリが返されるように配列を構成する方法について詳しくは、「データ型」を参照してください。

チェックボックス

ソース(データテーブルと列)とデフォルト(有効または無効)を定義して、ページに選択可能なコンポーネントを追加します。このコンポーネントはオプションマークを付けることができます。

ラジオ

1つしか選択できないオプションのセットを追加します。ソースシステムからデータが入力されるか、値の一覧を手動で入力できます。このコンポーネントはオプションマークを付けることができます。

日付/時刻

マイクロアプリで表示される日付、時間、または日付と時間のいずれかと、ページに読み込むデフォルト時間(選択前に表示されている時間)を定義します。コンポーネントをオプションとしてマークしたり、フィールド幅を変更したりできます。

ファイルアップロードコンポーネント

送信時や更新時に、生ファイルをSoRにアップロードすることができます。このアクションを有効にするには、ファイルのアップロードをサポートする特別なサービスアクションを作成します。

このコンポーネントを使用すると、既存のレコードへの添付ファイルとして、またレコード作成時の添付ファイルとして、ファイルをSoRにアップロードするためのユーザーワークフローが可能になります。例:

  • Jira:ログファイルとスクリーンショットをアップロードして、課題チケットに添付する。
  • Salesforce:開示同意書をアップロードし、アカウントまたは商談に添付する。
  • SAP Concur:経費報告書を管理するときに領収書を添付する。
  • ServiceNow:送信ワークフローの一部として添付ファイルをアップロードする。

サービスアクションの作成

ファイルのアップロードを有効にするには、スクリプトを使用してサービスアクションを構成する必要があります。この機能をサポートするパラメーターのタイプにFILESがあります。一般的な概要については、「HTTP統合スクリプティング」を参照してください。

はじめに

  • マイクロアプリ管理インターフェイス経由でインポートするスクリプトを準備します。
  • スクリプトはJavascriptで記述する必要があります。編集にはお好みのテキストエディター/開発ツールを使用してください。
  • 準備ができたら、マイクロアプリの管理インターフェイスの統合タブからスクリプトをインポートするか、オプションで、スクリプティング機能のテキストエディターに直接スクリプトを入力できます。
  • インポートしたら、スクリプトをテストします。

以下は、複数のファイルを一度にJIRAにアップロードするサービスアクションの例です。その他のスクリプトについては、このスクリプトリポジトリを参照してください。

```javascript
function addAttachmentsSingleRequest({client, actionParameters}) {
    console.log(`attaching file(s) to issue ${actionParameters.issueKey}`);
    const formData = new FormData();
    const url = `/rest/api/2/issue/${actionParameters.issueKey}/attachments`;
    actionParameters.attachments.forEach(file => {
        formData.append("file", file);
    });
    const response = client.fetchSync(url, {
        method: 'POST',
        headers: {
            "Content-Type": "multipart/form-data",
            "X-Atlassian-Token": "nocheck"
        },
        body: formData
    });
    if (response.ok) {
        console.log('Attachment(s) posted');
    } else {
        const errorMessage = `Request failed(${response.status}: ${response.statusText})`
        console.error(errorMessage)
        throw new Error(errorMessage)
    }
}
<!--NeedCopy--> ```

スクリプトのインポート

準備したスクリプトをインポートするには、次の手順に従います:

  1. 統合の構成画面で、左側のナビゲーションから [スクリプティング] を選択します。
  2. [スクリプトのアップロード] を選択します。または、[編集]を選択して、テキスト領域に直接スクリプトを入力することもできます。
  3. スクリプトをインポートポップアップにドラッグします。
  4. スクリプトが解析され、検証されます。
  5. [インポート] を選択します。
  6. スクリプトがインポートされます。

スクリプティングの詳細

ファイルアップロードコンポーネントの構成

次に、ファイルをアップロードするために作成する統合のマイクロアプリのページに戻ります。ファイルアップロードコンポーネントをビルダーにドロップした後、ファイルアップロードプロパティの入力を完了します。

  1. 必要に応じて [ラベル] の値を変更します。デフォルトでは「ファイルアップロード」となっています。ラベルは必須ではありません。この値は、Citrix Workspaceのドロップフレームの上に表示されます。
  2. 必要に応じて [最大ファイル数] の値を変更します。デフォルトでは「1」となっています。この値は、Citrix Workspaceのドロップフレームの下にある [ファイルのアップロード上限] の横に表示されます。複数のファイルを選択した場合、各ファイルのメタデータのアップロードとコンテンツのアップロードは個別に行われます。この機能はSoRによって制限されます。
  3. 必要に応じて [最大ファイルサイズ(MB)] の値を変更します。デフォルトでは「5」となっています。この値は、Citrix Workspaceのドロップフレームの下にある [合計サイズ制限] の横に表示されます。ファイルサイズはSoRによって制限されます。リソースの浪費を防ぐために、最大ファイルサイズを実際に必要なサイズに設定することをお勧めします。
  4. [ファイル拡張子(例:.jpeg、.png、.pdf)] に値を入力します。値の入力は必須ではありません。この値は、Citrix Workspaceのドロップフレームの下にある [許容されるファイル形式] の横に表示されます。このフィールドでは大文字と小文字は区別されず、特殊文字は使用できません。
  5. このページを送信するためにファイルを追加する必要がある場合は、[必須]トグルを有効にします。[このフィールドは必須です] ラベルは、Citrix Workspaceのドロップフレームの上に表示されます。
  6. ドロップフレームを選択不可にしてCitrix Workspaceで使用できないようにする場合は、[有効]トグルを無効にします。
  7. Citrix Workspaceでドロップフレームを非表示にする場合は、[表示]トグルを無効にします。

注意事項

ユーザーは、コンテンツをアップロードするときに次の制限を考慮する必要があります:

  • ファイル名の末尾には、許可されている接尾辞のいずれかを付ける必要があります。ヌルバイト(\0)を除くすべての文字を使用できます。
  • マイクロアプリサービスではファイルストレージは提供されません。ファイルはSoRに直接アップロードされます。マイクロアプリサービスではアップロードの際、まずユーザーのコンピューターから安全な一時ストレージにファイルを転送し、すぐにそのファイルをSoRにストリーミングします。一時ストレージで処理されたファイルは、その時点から誰も、いかなる目的でもアクセスできなくなり、しばらくすると削除されます。
  • ユーザーは、アップロードを確認する前に、以前に選択して事前にアップロードしたファイルを削除できます。
  • ファイルタイプ(MIMEタイプ)は、ファイルの拡張子に基づいてWebブラウザーによって検出されます。マイクロアプリサービスは、チェックにファイルタイプを使用しません。

表示コンポーネント

表示セクションには、テーブル、静的テキスト、画像など、マイクロアプリのエンドユーザーに情報を提供するコンポーネントがあります。アクションページの作成時に、データを抽出するための変数としてユーザーのメールを選択できるところでは、Active Directoryユーザープリンシパル名(UPN)属性を使用できます。これには、ページとコンポーネントのフィルター、制約、およびサービスアクションの各パラメーターが含まれます。

表示コンポーネントの詳細ビュー

テーブル

テーブルのソース、フィルターを定義し、列を定義して、レコード一覧を表示するテーブルを追加します。ユーザーを別のページに誘導するページリンクアクションを追加できます。配置は変更できます。

このコンポーネントを選択すると、右側ペインで [列] タブが有効になります。次の設定をするのに必要な数の列を追加します:列タイトルデータ型データテーブルデータ列形式、および 条件付き書式。これらのフィールドの説明については、「コンポーネントのプロパティ」を参照してください。

データの露出を制限するには、個人設定クエリを設定する必要があります。個人用のクエリのないテーブルは、利用者に対するデータリレーションとは関係なく、テーブルフィルターに一致するすべてのレコードを公開します。データ公開を制限しない限り、潜在的に機密性の高いデータがすべてのマイクロアプリユーザーに公開される可能性があります。データフィルター機能を使用して、ページへのデータアクセスを制御します。コンポーネントビルダーペインで、テーブルを選択します。[テーブルのプロパティ] を選択した後、[データフィルター]を選択します。[+条件を追加] を選択して、必要に応じて制約を追加します。このコンポーネントの使用例については、「詳細ページの構築」を参照してください。

リスト/グリッド

Citrix Workspaceのユーザーにデータのリストを表示します。事前構成されたレイアウトから選択して、データに最適な方法で適切な情報を表示します。リスト内のアイテムを手動で定義するか、キャッシュからプルすることができます。

[リストのプロパティ] タブで、次のいずれかを選択します:

  • [データテーブル] は、キャッシュからデータをプルします。[リストのデータソース][リストのアイテムデータソース]、および [レイアウト&スタイル] タブを使用できます。[リストのデータソース][リストのアイテムデータソース] のプロパティの説明は、「コンポーネントのプロパティ」で確認できます。
  • [手動で指定] は、リスト内のアイテムを定義します。[リストのアイテム] および [レイアウト&スタイル] タブを使用できます。[リストのアイテム] の場合、リストに含めるアイテムを定義します。プロパティの説明は「コンポーネントのプロパティ」にあります。

[レイアウト&スタイル] タブは、リストのプロパティの両タイプで使用できます。[レイアウト] メニューには、事前構成されたレイアウトの選択肢があります。次のオプションから、ニーズに合った最適なレイアウトを選択してください:

  • リスト - アコーディオン:拡張可能なテキストのみのコンテンツ単位を表示します。
  • リスト - 基本:テキストのみのリストを表示します。
  • リスト - 箇条書き:順序付けられていない箇条書きのテキストのみのリストを表示します。
  • リスト - 番号付き:順序付けられた番号付きのテキストのみのリストを表示します。
  • リスト - サムネイル:サムネイルとスタイルのリストを表示します。
  • グリッド - ヒーロー画像カード側面:側面に大きな画像があるカードを表示します。
  • グリッド - ヒーロー画像カード上部:上部に大きな画像があるカードを表示します。
  • グリッド - 画像:複数列からなる画像ユニットを表示します。
  • グリッド - サムネイル側面:サムネイル付きの複数列のリストを表示します。
  • グリッド - サムネイル上部:中央揃えのコンテンツ単位を表示します。

テキストのみのレイアウトでは、[タイトルの表示][説明の表示] を切り替えることができます。これらのオプションのいずれかを無効にすることはできますが、両方を無効にすることはできません。サムネイルレイアウトは、[画像の表示]トグルと、その他の画像の書式設定オプションを開きます。その他のプロパティの説明は、「コンポーネントのプロパティ」にあります。

テキスト

ページに読み込むテーブルのテキストソースと形式を定義します。データソース、テーブル、列はすべて、入力するテキストに対して選択されています。時間、日付などのテキスト形式を指定することも、パラメーターに基づいて条件付き形式にすることもできます。[ページに移動]、[URLに移動]、[メールの送信]、または[電話する]のアクションを追加することもできます。このコンポーネントの使用例については、「詳細ページの構築」を参照してください。

[テキスト]コンポーネントは、単一のデータベース値を表示するように設計されています。整合性チェックが実行され、ページがレコードIDに依存している場合はユーザーに警告します。アクションページとして設定されている詳細ページまたはフォームの種類ページの場合、一意のレコードを呼び出すためにページデータフィルターが必要です。この問題を警告するために、このメッセージを表示します。マイクロアプリがそのまま動作することがありますが、一意のレコードがページに渡されない場合、コンポーネントは間違ったデータを表示する可能性があります。

静的テキスト

ページに表示する静的テキストを定義します。アクションを追加することができます。配置は変更できます。テキストがヘッダーの場合は区別することができます。太字と斜体のフォントスタイルが利用可能です。フォントサイズは、通常、細字、小さい、小さい細字から変更できます。[ページに移動]、[URLに移動]、[メールの送信]、または[電話する]のアクションを追加することもできます。このコンポーネントの使用例については、「作成ページの構築」および「詳細ページの構築」を参照してください。

静止画像

事前定義された静的なURLソースから参照された静止画像を表示します。画像のサイズと配置を指定できます。アクションの追加はできません。

画像

キャッシュに格納されたURL(データテーブルと列)と、ページに表示するための書式設定を使用して画像を表示します。画像を読み込めない場合に表示するテキストを追加します。配置、サイズ、形状などの画像フォーマットも構成できます。

区切り線

区切り線を使用して、無関係の情報とグループに関連する情報を分離します。プロパティの変更はできません。

戻るボタン

ユーザーが前のページに戻れるようにします。変数(データテーブル、データ列、形式)を指定できます。このコンポーネントの使用例については、「詳細ページの構築」を参照してください。

Power BI

WorkspaceでBIレポートを表示します。ソースと形式を定義します。ユーザーがCitrix WorkspaceでこのPower BIコンポーネントを表示すると、最初にPower BIログインのプロンプトが表示されます。

このコンポーネントを選択すると、右側ペインで [Power BIコンポーネントプロパティ] タブが有効になります。このコンポーネントが最初に追加されたとき、サービスアクションは選択されておらず、コンポーネントを編集することができません。ユーザー認証用のサービスアクションを設定する必要があります。サービスアクションを設定したら、コンポーネントで認証を設定します。完全な手順については、「Power BIコンポーネントのサービスアクションの構成」を参照してください。

Concur受領書ビューア

受領書の画像を表示します。データテーブルと列を使用してソースを、形式とともに定義します。[Concur受領書ビューア]コンポーネントは、Concur統合テンプレートでのみ表示されます。

Tableau

Tableauレポートを表示します。データテーブルと列を使用してソースを定義します。

HTMLコンテンツ

プルしたソース(RSSフィードなど)からHTMLコンテンツを正しく表示します。データテーブルと列を使用してソースを定義します。基本的なテキスト要素がサポートされています。以下は、許可される要素です。

  • 「p」、「div」、「h1」、「h2」、「h3」、「h4」、「h5」、「h6」、「ul」、「ol」、「li」、「blockquote」、「b 」、「i」、「font」、「s」、「u」、「o」、「sup」、「sub」、「ins」、「del」、「strong」、「strike」、「tt」、 「code」、「big」、「small」、「br」、「span」、「em」。
  • 属性「target」および「href」のみの「a」要素。
  • 属性「height」、「width」、「src」のみの「img」要素。
  • また、「style」属性はすべての要素で許可されます。

添付ファイル

データソースから添付ファイルを一覧表示し、エンドユーザーが添付ファイルをダウンロードできるようにします。画像とPDFは直接プレビューできます。データテーブル、URLのデータ列、および名前のデータ列を指定して、ソースを定義します。

  • データのMIMEの種類(メディアの種類)が構成されていない場合、添付ファイルのプレビューアイコンは?を表示します。
  • ファイルサイズが構成されていない場合、添付ファイルのプレビューではサイズに0Bが表示されます。

[添付ファイルURLセキュリティ] オプションを選択します:

  • 継承:添付ファイルは、統合がアクセスするドメインと同じドメインに格納する必要があります。そうでない場合、添付ファイルは表示されず、ダウンロードできません。たとえば、これはGoogle統合の既知の問題です。
  • パブリック:認証方法が必要ない場合は、他のドメインからのパブリックの添付ファイルを表示できます。

埋め込み

ビルダーを使用してWebページをマイクロアプリに埋め込み、Citrix Workspaceに表示できるようにします。サポートされているコンテンツには次のようなものがあります:公開されているYouTubeビデオ、Google Maps、Podio/Google/Microsoftフォーム、パブリックに応答するWebページのほとんど、およびWebサイトに埋め込まれてiFrameに表示されるようにプロバイダーが設計したコンテンツ。

一部の外部コンテンツは、埋め込みを念頭に置いて設計されていないか、厳格に禁止されています。例

  • X-Frame-Options "SAMEORIGIN";ヘッダーの送信による埋め込みを明示的に禁止するWebページ。顕著な例はhttps://google.comです。
  • ページビルダーのコンポーネント構成で指定されているものとは異なるドメインにリダイレクトするWebページ。
  • 認証が必要なWebページを埋め込むと、問題が発生する可能性があります。管理者は慎重にテストする必要があります。
  • Cookie使用の同意を含むWebページ(GDPR要件などに対応)では、選択内容が埋め込みコンポーネントにキャッシュされません。サイトでCookieのSameSite: none; secure=true属性を使用しない限り、ユーザーが埋め込みサイトに再度アクセスするたびに、Cookie使用の同意を再確認する必要があります。

埋め込みコンポーネントの構成

埋め込みコンポーネントをビルダーにドロップした後、埋め込みプロパティの入力を完了します。

一部のWebサイトからのコンテンツを正常に埋め込むには、直接のURLや共有リンクではなく、そのWebサイトから直接生成された埋め込みコードを使用する必要があります。 たとえば、[Share]オプションを使用してGoogle Mapsの埋め込みリンクを生成する場合は、[Send a link]ではなく [Embed a map] で生成したリンクを使用します。

  1. 埋め込むコンテンツの [URL] を入力します。
  2. [高さモード] オプションの1つを選択して、埋め込みコンテンツのサイズを決定する方法を選択します。

    • 幅の倍率[倍率(パーセント)] フィールドを有効にします。埋め込みコンテンツの幅に対するパーセンテージ値を入力します。たとえば、「50」と入力すると、表示されるコンテンツは幅の半分の高さになります。
    • 固定[高さの絶対値(ピクセル単位)] フィールドを有効にします。埋め込みコンテンツの高さを決めるピクセル数を入力します。

埋め込みコンテンツのプレビューはビルダーでは使用できません。[マイクロアプリのプレビュー] を選択して、埋め込まれたコンテンツがどのように見えるかを確認します。

埋め込みコンポーネント

注意事項

コンテンツを埋め込むときは、次の点を考慮してください:

  • 可能な場合は、埋め込み可能なバージョンのWebページを使用します。これらのページは、既にコンテンツプロバイダーにより埋め込み用に最適化されています。たとえば、ID XXXのYouTubeビデオはhttps://www.youtube.com/watch?v=XXXおよびhttps://www.youtube.com/embed/XXXでアクセスできます。最初のURLはサイト全体につながり、2つ目のURLは埋め込み可能なビデオにつながります。
  • URLを指定する場合、テンプレート変数を使用してパラメーターをリモートURLに渡すことができます。同じYouTubeの例で、ビデオIDを含むvideo_idというデータテーブルがあると仮定した場合は、[URL]フィールドに「https://www.youtube.com/embed/{video_id}」を入力します。文字列{video_id}は、テーブルの行の値に置き換えられます。
  • 埋め込まれたページは、次の属性を持つサンドボックス化されたiFrameに表示されます:allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms allow-pointer-lock allow-downloads。これらのフラグにより、サードパーティのコンテンツがCitrix Workspaceから完全に分離されますが、リモートページの一部の機能が破損する可能性があります。
  • 埋め込みコンポーネントは、カスタムのWebブラウザープラグインを必要とするドキュメントを表示できません。このため、PDFは埋め込みコンポーネント内に表示できません。

レイアウトコンポーネント

レイアウトセクションには、ページのレイアウトを設定するためのグリッドコンポーネントがあります。

レイアウトコンポーネントの詳細ビュー

  • フレキシブルグリッド - コンポーネントの「スナップイン」を容易にするため、ページ上のコンポーネントの配置をより詳細に制御できます。このオプションは、大画面のデバイス向けにページを設計する場合に便利です。

    このコンポーネントを選択すると、右側ペインで [フレキシブルグリッドプロパティ] タブが開きます。グリッドに必要な列と行の数を設定し、配置をカスタマイズします。このコンポーネントの使用例については、「作成ページの構築」および「詳細ページの構築」を参照してください。

ページの詳細

名前を入力し、情報のフィルターを設定し、ページコンポーネントに論理を追加することで、作成するページを構成します。また、情報デバッグ機能を使用します:

  • ページ名 - ページの名前を設定します。
  • データフィルター - アクションデータに制約を設定するために使用します。
  • SQLを表示 - これを使用して、デバッグのためにSQLを表示します。
  • 論理 - これを使用して、コンポーネントの論理を追加および表示します。論理の追加について詳しくは、次のセクションを確認してください。

論理の追加

[ページの詳細] タブにある [論理の追加] ボタンを選択して、論理の構成を開きます。これにより、特定のページコンポーネントの論理を構成できます。このページでコンポーネントの動作または外観を指定します。標準の論理引数を使用して条件を作成し、コンポーネントに必要な動作に応じたさまざまな成果を達成します。1つのボタンに複数のスタックアクションを追加して、1回のクリックで複数のアクションの効果を作成できます。各サービスアクションが正常に実行されると、一連のアクションがすべてが完了するまで実行されます。使用可能な操作は次のとおりです:

  • 条件の評価 - 論理引数を介して条件の設定と編集を行います。
  • コンポーネントの値を設定 - ボタンのコンポーネントの値を設定して、アクションをコミットします。
  • コンポーネントを表示 - コンポーネントを表示する条件を設定します。
  • コンポーネントを非表示 - コンポーネントを非表示にする条件を設定します。
  • コンポーネントを有効化 - コンポーネントを有効にする条件を設定します。
  • コンポーネントを無効化 - コンポーネントを無効にする条件を設定します。
  • コンポーネントを必須に設定 - コンポーネントを必要とする条件を設定します。
  • コンポーネントを不要に設定 - コンポーネントを除外する条件を設定します。

コンポーネントのプロパティ

各ページビルダーのコンポーネントには、以下のようなさまざまなオプションを備えた固有のプロパティメニューがあり、コンポーネントに応じて選択できます:

  • ラベル - ボタン、テキスト、画像などのラベルをカスタマイズします。
  • プレースホルダーテキスト - このコンポーネントの使用方法をユーザーに説明します。たとえば、ユーザーが検索できる属性を一覧表示します。
  • コンテンツ - エンドユーザーに表示する静的テキストを入力します。
  • 配置 - 表示されるテキストまたは画像の配置を設定します。
  • テキストタイプ - 表示されるテキストのテキストサイズを設定します。
  • フォントスタイル - 表示されるテキストのフォントスタイルを設定します。
  • フォントサイズ - 表示されるテキストのフォントサイズを設定します。
  • フィールド幅 - コンポーネントが表示する幅を設定します。
  • 形式 - ユーザーに表示するときのデータの形式を定義します。たとえば、日付、時刻、小数、パーセントなどです。
  • デフォルト値 - 入力コンポーネントで、手動または変数を使用して、デフォルト値を設定するのに使用されます。
  • スタイル - ボタンコンポーネントで、事前定義されたさまざまな色と形式を切り替えるのに使用されます。
  • ページに関連するレコードを使用する - テーブルコンポーネントで、ページに表示されるレコードに関連するレコードをフィルタリングするのに使用されます。たとえば、アカウントに関するデータを表示するページがあり、この特定のアカウントに関連する連絡先のリストを含むテーブルを表示する場合などです。
  • レコード値にマップ - 入力コンポーネントで、キャッシュから特定のレコードのデータに表示を切り替えます。たとえば、これらの値が変更される前に実際のデータをエンドユーザーに表示する場合は、[種類の編集]ページを作成するときにこの切り替えを有効にします。一方、[レコードの種類の作成]ページを作成する場合は、このページは既存のレコードに関連付けられていないため、[レコード値にマップ]を有効にしないでください。つまり、入力コンポーネントをレコードにマップしても意味がないということです。
  • 種類の選択 - 選択コンポーネントラジオコンポーネントのオプションのソースを選択します。

    • [値を手動で入力] を選択した場合は、[値][ラベル] を入力する必要があります。[値]はサービスアクションで使用され、[ラベル]はCitrix Workspaceでエンドユーザーに対して表示されるものです。
    • [データベースから選択] を選択した場合は、次のフィールドに入力する必要があります:[オプションのデータソース][オプションのデータテーブル][オプションラベルのデータ列]、および [オプション値のデータ列] 。[オプション値のデータ列]はサービスアクションで使用され、[オプションラベルのデータ列]はCitrix Workspaceでエンドユーザーに対して表示されるものです。
    • [種類の選択][レコード値へのマップ] の組み合わせは、さまざまなユースケースで使用できます。たとえば、[データベースからの選択]と、有効にした[レコード値へのマップ]は、通常、[種類の編集]ページで使用されます。このシナリオでは、[データテーブル]と[データ列]は現在のデータを表示するのに使用され、[オプションのデータソース]、[オプションのデータテーブル]、[オプションラベルのデータ列]、[オプション値のデータ列]は、エンドユーザーがレコードの編集中にキャッシュから使用できる他のすべてのオプションを表示するのに使用されます。
  • データソース - 表示された要素のデータソースを選択します。

    • キャッシュから特定の列を1つ表示する場合は、[列の値]を使用します。
    • キャッシュからさまざまな属性の文字列を表示する場合は、[テンプレート]を使用します。たとえば、アカウントアドレスがキャッシュ内で3つの列に分割されているが、それらをすべて1つのコンポーネントにまとめて表示したい場合です。
  • データテーブル - 表示された要素のデータテーブルを選択します。
  • データ列 - 表示された要素のデータ列を選択します。
  • 条件付き書式 - 要素の条件付き書式を設定します。
  • 変数の挿入 - ページ要素に変数を追加して、アプリケーション統合データを自動的に表示します。
  • データフィルター - 表示されるデータの制約を設定します。[フィルターを設定] を選択してから、[追加]をクリックして、必要に応じて条件の制約を追加します。
  • データの順序 - 表示されるデータの順序を設定します。[順序を設定] を選択してから、[規則の追加]をクリックして、必要に応じて規則の制約を追加します。
  • 追加データ列の表示トグル - 検索コンポーネントで、検索実行中にユーザーに追加表示する列を定義するのに使用されます。
  • 検索用語一致戦略 - 検索コンポーネントで、検索戦略を定義するのに使用されます。

    • 次の文字で始まる - この検索方法は、キャッシュを過負荷にしないため、最速です。定義されたキャッシュ属性の値の最初の文字を検索します。ほとんどのユースケースでは、この検索方法で十分です。
    • 次の文字を含む - データ収集のサイズによっては、この検索方法は非常に遅くなる可能性があります。定義されたキャッシュ属性の値のすべての文字を検索します。
  • フィールド幅 - 入力コンポーネントで、入力フィールドの幅を定義するのに使用されます。
  • 必須トグル - 入力コンポーネントで、構成済みのサービスアクションがアクション可能なときに、ボタンを押す前にデータを入力するようエンドユーザーに求めるのに使用されます。
  • 有効トグル - 入力コンポーネントで、エンドユーザーが変更できないようにする特定のレコードについて、データを表示するのに使用されます。
  • 表示トグル - [ページの論理]や[移動先ページ]などの追加データが必要だが、この情報をエンドユーザーに表示したくない場合に使用されます。
  • 空の場合は非表示 - 使用可能なデータがないときはエンドユーザーにこのコンポーネントをまったく表示したくないという場合に、一部の表示コンポーネントで使用されます。
  • 代替テキスト/代替属性 - 画像コンポーネントで使用されます。画像の表示に問題があるかどうかを示すテキストを入力します。
  • URLプレフィックス - 画像コンポーネントで、URLの静的プレフィックスを構成するのに使用され、[データテーブル][データ列] フィールドからURLの残りの部分を取得します。
  • 画像サイズ - 表示される画像のサイズを選択します。たとえば、[サムネイル] または [全幅] などです。
  • 画像の形状 - 画像の形状を選択します。たとえば、[円][角丸] などです。
  • レイアウト - リストコンポーネントで、事前設定されたレイアウトから選択します。

入力検証規則

一部の入力コンポーネントに規則を追加して、ユーザーが入力できるデータ形式を制限します。各コンポーネントで使用できる固有の検証規則があります。常に、設定できる最小と最大のオプションがあります。

このタブは、次のコンポーネントで使用できます:テキスト入力日時テキスト入力領域、および番号入力。詳しくは、各コンポーネントの説明を参照してください。

アクション

アクションメニューはボタンコンポーネントで使用でき、マイクロアプリの受信者(Workspaceユーザー)がアクション可能な入力で応答できるようにします。コンポーネントごとに異なるアクションが存在します。

ページアクションボタンを有効にする

ページアクションボタントグルを有効にして、Citrix Workspaceのページブレードのフッターに、ボタンコンポーネントを表示します。このトグルに基づいて、ボタンコンポーネントでさまざまなアクションのサブセットを使用できます。以下に注意してください:

  • ボタンがブレードフッターに表示されている場合、ユーザーがCitrix Workspaceでフッターボタンを選択すると、ブレードは自動的に閉じられます。
  • [ページに移動]や[URLに移動]などのアクションを追加する場合は、Citrix Workspaceがエンドユーザーを次の画面に誘導できるよう、ブレードフッターにボタンを表示しないでください。[ページに移動]などのアクションは、このトグルを有効にした場合は使用できません。

アクションの追加

統合で設定した設定済みサービスアクションから、ボタンによって実行されるアクションを定義します。アクションには以下のものがあります:

  • サービスアクションの実行 - 統合で設定した構成済みサービスアクションから、ボタンによって実行されるアクションを定義します。例については、「サービスアクションパラメーターの設定」を参照してください。
  • メールの送信 - 事前構成された属性に基づいてメールを送信します。例については、「[メールの送信]アクションの追加」を参照してください。
  • G Suiteイベントの追加 - 事前構成された属性に基づいて、Googleカレンダーイベントを作成します。
  • 戻る - ユーザーを前のページに移動します。
  • ページに移動 - ユーザーを事前構成されたマイクロアプリページに移動します。例については、「[ページに移動]アクションの追加」を参照してください。
  • URLに移動 - ユーザーを事前構成されたURLに移動します。例については、「[URLに移動]アクションの追加」を参照してください。
  • 通知トリガーの実行 - 事前構成された通知イベントを実行します。例については、「[通知トリガーの実行]アクションの追加」を参照してください。

[ページに移動]アクションの追加

事前構成されたマイクロアプリページにユーザーを移動するアクションを定義します。

  1. ボタンコンポーネントをビルダーに追加し、[ボタンのプロパティ]タブで名前をつけたら、[アクション] タブを選択します。
  2. [ページアクションボタン] トグルを無効にします。[アクションの追加] フィールドで、[ページに移動]を選択します。
  3. [アクション] 下の [ページに移動] を選択します。[アクションラベル] フィールド、[アプリ]セレクタ、および [ページ] セレクタが開きます。
  4. [アプリ] で、ページを選択するマイクロアプリを選択します。
  5. [ページ] で、ボタンで開くページを選択します。
  6. (オプション)構成済みページのデータをフィルタリングする場合は、[ターゲットページレコード]で、[条件の設定] を選択します。たとえば、ユーザーがアカウントデータのあるページを表示しているとします。この場合、ユーザーは、商談というラベルの付いたボタンを選択し、ターゲットページのレコード条件に基づいて、特定の値よりも高い期待値を持つ関連するすべての商談のリストのページに移動します。
  7. (オプション)ターゲットページのフィールドに事前入力する場合は、[ターゲットページの入力][フィールドの編集] を選択します。たとえば、ユーザーがJiraチケットを表示していて、同じプロジェクトで新しいチケットを作成したいとします。この場合、ユーザーは新規というラベルの付いたボタンを選択し、[プロジェクト]フィールドに前のページの値が事前入力されているページに移動しますが、他のすべての属性は手動で入力する必要があります。

[通知トリガーの実行]アクションの追加

通知をトリガーして、通知イベントの評価を実行し、ターゲットオーディエンスへの通知メッセージを送信するアクションを定義します。このアクションは、ページ本文またはブレードフッターに表示できます。

  1. ボタンコンポーネントをビルダーに追加し、[ボタンのプロパティ]タブで名前をつけたら、[アクション] タブを選択します。
  2. ページのフッターにボタンを表示するには、[ページアクションボタン] トグルを有効のままにします。ページの本文にボタンを表示するには、トグルを無効にします。
  3. [アクションの追加] フィールドで、[通知トリガーの実行]を選択します。
  4. [アクション][通知トリガーの実行] を選択します。
  5. [イベント] で、実行するイベントトリガーを選択します。このボタンでは複数のイベントを選択できます。

パラメーターとしてのコンポーネント値の使用

[メールの送信] および [URLに移動] アクションのパラメーターとして、コンポーネント値を使用することができます。この機能により、次のことが可能になります:

  • (メールの送信)Workspaceユーザーは、特定のアクションについて、Workspaceのフィールドにメールの受信者を入力できます。
  • (URLに移動)Workspaceで開かれたURLテンプレートの一部として、Workspaceフォームからのユーザーの入力を使用できます。

ユースケースに応じて、以下の手順に従ってください。

[メールの送信]アクションの追加

  1. ボタンコンポーネントをビルダーに追加し、[ボタンのプロパティ]に名前を入力したら、[アクション] タブを選択します。
  2. [ページアクションボタン] トグルを無効にします。[アクションの追加] フィールドで、[メールの送信] を選択します。
  3. [宛先][変数の挿入] を選択します。

    ページアクションの手順

  4. [変数の挿入] 画面で、[種類] から [コンポーネント値] を選択します。
  5. [コンポーネント] で、ユーザーがWorkspaceフォームで入力する必須の入力コンポーネントを選択します。[宛先] フィールドにコンポーネントIDが入力されます。
  6. 必要に応じて、メッセージの件名本文を追加します。 Workspaceでは、ユーザーはこのコンポーネントによって有効にされたフィールドにメールアドレスを入力できます。メールアドレスを送信すると、メールが開き、事前に入力されたメッセージが表示されます。このメッセージは、必要に応じて変更して送信できます。

[URLに移動]アクションの追加

  1. ボタンコンポーネントをビルダーに追加し、[ボタンのプロパティ]に名前を入力したら、[アクション] タブを選択します。
  2. [ページアクションボタン] トグルを有効のままにしておきます。[アクションの追加] フィールドで、[URLに移動] を選択します。
  3. [URLテンプレート] フィールドに、開きたいターゲットサイトのURLを入力します。
  4. [URLテンプレート] フィールドで [変数の挿入] を選択します。
  5. [変数の挿入] 画面で、[種類] から [コンポーネント値] を選択します。
  6. [コンポーネント]で、必要なコンポーネントを選択します。[URLテンプレート] フィールドには、入力したURLに追加されたコンポーネントIDが入力されます。 Workspaceで、ユーザーはこのコンポーネントによって有効になったフィールドに値を入力できます。クエリを送信すると、選択したコンポーネント値が、Webブラウザーで開かれているURLの変数として使用されます。

注:

テンプレートフィールドの横にある情報アイコンを選択して、使用されているコンポーネントに関する詳細な注釈を表示します。

Power BIコンポーネントのサービスアクションの構成

Power BIテンプレートに付属している追加設定不要のマイクロアプリには、必要に応じてコンポーネントが構成されています。マイクロアプリに変更を加えたり、マイクロアプリを追加したりする場合は、モデルとして次の手順に従ってください。重要な考慮事項は次のとおりです:

ログインユーザーがダッシュボード、レポート、またはタイルを表示する前にログインユーザーを承認するには、Power BIコンポーネントの設定が必要です。Power BIコンポーネントを設定するには、ユーザーのトークンを生成するサービスアクションを構成する必要があります。ダッシュボード、レポート、およびタイルにこのサービスアクションを構成します。承認は通常のサービスアクションとして機能します。たとえば、サービスアクションの設定用に別個のOAuth 2.0認証方法がある場合、ユーザーはPower BIにログインするよう求められ、コンポーネントで目的のコンテンツが表示されます。

  1. 統合の [編集] 画面で、左側のナビゲーション列の [サービスアクション] を選択するか、メニューから[サービスアクション]を選択します。
  2. これらのPower BIエンドポイントを使用して、必要に応じて次の新しいサービスアクションを構成します:

    • ダッシュボード https://docs.microsoft.com/en-us/rest/api/power-bi/embedtoken/dashboards_generatetokeningroup
    • レポート https://docs.microsoft.com/en-us/rest/api/power-bi/embedtoken/reports_generatetokeningroup
    • タイル https://docs.microsoft.com/en-us/rest/api/power-bi/embedtoken/tiles_generatetokeningroup
  3. [サービスアクションの追加] を選択します。このアクションには、groupId、dashboardId、reportId、tileIdなどのパラメーターが必要です。たとえば、以下のモデルを使用します:

  4. [アクションの実行][BODY] タブを選択します。[コンテンツの種類]の一覧から [JSON] を選択します。

    { “accessLevel”: “View” }

    ここで、この新しく構成されたサービスアクションを使用して、コンポーネントに承認を設定します。以下の一般的な例を参照してください:

  5. マイクロアプリ(ダッシュボードのデータをプルしているマイクロアプリなど)で、Power BIコンポーネントがあるページを選択します。
  6. Power BIコンポーネントを選択し、右側にある [Power BIの承認] タブを選択します。
  7. [パラメーターの編集] 選択し、以下に示すようにフィールドに入力します:

  8. [保存] を選択して終了します。