Error: missing value for parameter 'doc' (index 0) (click for details)

Callstack:
    at xml.text()
    at (Template:0Template:OutSystems/OSCommunityHeader), /content/body/pre[1], line 52, column 29
    at template()
    at (Template:Custom/Views/Header), /content/body/pre[4], line 10, column 17
    at (ja-jp/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Content/Balloon), /content/body/div[2]/div/div/ul/li[2]/a/@rel

従来のWebアプリにのみ適用されます

Balloon

Last updated
Save as PDF

Balloon UIパターンを使用すると、UI上のポップアップにコンテンツを表示できます。小さい画面上の要素に関連する追加情報を表示する必要がある場合に、Balloon UIパターンが役立ちます。

Balloon UIパターンの使用方法

この例では、フォームを含む画面上でツールチップとしてBalloonを使用します。

Service StudioのツールボックスでBalloonを検索します。

Balloonウィジェットが表示されます。
ツールボックスから、Balloonウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
BalloonウィジェットをFirst Name入力ウィジェットにバインドするため、［Properties］タブの［WidgetId］ドロップダウンで［firstname.Id］を選択します。

注記: WidgetIdは、Balloonをバインドする要素のNameに基づきます。
表示するコンテンツを［Content］プレースホルダに入力します。この例では、テキストを追加しています。
Balloonによるポップアップが必要な各要素で手順2～4を繰り返します。
［Properties］タブで（オプションの）プロパティを設定し、Balloonウィジェットのルックアンドフィールを変更できます。たとえば、画面上のコンテンツの位置やコンテンツの表示をトリガーするアクションなどを設定できます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

デモ

プロパティ

プロパティ	説明
WidgetId（Text型）: 必須	要素の表示をトリガーするID。
Position（PositionBase Identifier型）:オプション	ウィジェットに対するBalloonコンテンツの相対的な位置を設定します。以下のオプションが事前定義されています。 Bottom Left Right Top 例 Entities.PositionBase.Bottom - コンテンツは要素の下に表示されます。これがデフォルト値です。 Entities.PositionBase.Right - コンテンツは要素の右に表示されます。
Trigger（Trigger Identifier型）:オプション	コンテンツの表示をトリガーするアクションを設定します。以下のオプションが事前定義されています。 Click Hover Manual 例 Entities.Trigger.Click - ユーザーが要素をクリックするとコンテンツが表示されます。 Entities.Trigger.Manual - プログラムによってツールチップをトリガーする必要があります。 Entities.Trigger.Hover - ユーザーが要素にマウスポインタを重ねるとコンテンツが表示されます。
ExtendedClass（Text型）:オプション	Balloon UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。例空白 - カスタムスタイルを追加しません（デフォルト値）。 "myclass" - 適用されるBalloon UIのスタイルに_myclass_というスタイルを追加します。 "myclass1" "myclass2" - 適用されるBalloon UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
AdvancedFormat（Text型）:オプション	入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。例:`{ arrow: false, showOnInit: true }` 詳細については以下をご覧ください。
https://atomiks.github.io/tippyjs/

デモ

プロパティ

関連項目