モバイルカードビルダー コンポーネント

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:7分
  • モバイルカードを構成するコンポーネントについて学びます

    コンポーネントの追加と削除

    ボタン

    ボタンコンポーネントを使用すると、ボタンが選択されたときにユーザーがアクションを実行できます。ボタンを使用して、カードにアクションを追加します。

    表 : 1. ボタン構成プロパティ
    プロパティ 説明
    要素 ID ボタンの一意の JSON ID 属性。
    表示
    Height ボタンの高さ (ピクセル)
    Width ボタンの幅 (ピクセル単位)。このプロパティを空白のままにすると、ボタンは使用可能なスペースを埋めます。
    コーナー半径 ボタンの角の半径。この値を大きくすると、ボタンの角が丸くなります。
    マージントップ ボタンの上マージン (ピクセル単位)
    マージン下部 ボタンの下マージン (ピクセル単位)
    左マージン ボタンの左マージン (ピクセル単位)
    右マージン ボタンの右マージン (ピクセル単位)
    境界幅: ボタンの境界線の幅 (ピクセル単位)。
    ボタンのプロパティ
    形式

    ボタンをテキストラベル、アイコン、またはその両方で表示するかどうかを決定します。

    次のオプションのいずれかを選択します。
    • ラベル
    • アイコン
    • ラベルとアイコン
    ラベル ボタンのテキストラベル。
    注:
    このオプションは、[ ラベル] または [ラベルとアイコン の形式] のいずれかが選択されている場合にのみ表示されます。
    アイコン ボタンに表示されるアイコン。表示されるドロップダウンリストからアイコンを選択します。
    注:
    このオプションは、[ アイコン] または [ラベルとアイコン 形式] のいずれかが選択されている場合にのみ表示されます。
    アクセス可能名 ボタンの目的を知るために、補助デバイスを使用している人々に読み上げられる代替テキスト。
    注:
    このオプションは、[ アイコン 形式] が選択されている場合にのみ表示されます。
    アクション
    複数 ユーザーがボタンを選択したときに選択できる複数の異なるアクションのメニューを作成します。
    関数

    [事前定義済み関数] または [構成可能な関数] のいずれかを選択します。構成可能な関数はsys_sg_buttonテーブルから取得されます。

    利用可能な事前定義関数:
    • キャンセル
    • 続行
    • ログアウト
    ボタンの外観
    テキストとアイコンのスタイル テキスト、アイコン、またはその両方の書式設定スタイル。
    背景色変数 ボタンの背景色変数。
    背景色 ボタンの背景色。このプロパティの値は HTML カラーコードです (例:sienna を表す #A0522D )。
    テキストとアイコンの色の変数 ボタンのテキストとアイコンの色変数。
    テキストとアイコンの色 ボタンのテキストと変数の色。このプロパティの値は HTML カラーコードです (例:sienna を表す #A0522D )。
    境界色の変数 ボタンの境界線の色変数。
    境界色 ボタンの境界線の色。このプロパティの値は HTML カラーコードです (例:sienna を表す #A0522D )。

    コンテナ

    コンテナコンポーネントには、他のコンポーネントが含まれています。コンテナには、別のコンテナを含む任意のカードコンポーネントを含めることができます。コンテナを使用してカードコンポーネントを整理し、コンテナ内のコンポーネントの配置方法と配置方法を決定します。

    表 : 2. コンテナ構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID コンテナーの一意の JSON ID 属性。
    表示
    Height コンテナの高さ (ピクセル)
    Width コンテナの幅 (ピクセル単位)。このプロパティを空白のままにすると、コンテナーは利用可能なスペースを埋めます。
    マージントップ コンテナの上マージン (ピクセル)
    マージン下部 コンテナの下マージン (ピクセル)
    左マージン コンテナの左マージン (ピクセル)
    右マージン コンテナの右マージン (ピクセル単位)
    コーナー半径 コンテナーのコーナー半径。この値を大きくすると、コンテナの角が丸くなります。
    外観
    コンテナの方向 コンテナ内のコンポーネントの向きの方向を決定します。次の値から選択します。
    • 水平
    • 垂直
    位置調整 コンテナ内のコンポーネントの配置を決定します。次の値から選択します。
    • ストレッチ
    • 中心
    • Top
    配布 コンテナ内のコンポーネントの分布を決定します。次の値から選択します。
    • 均等
    • 自動
    背景タイプ コンテナの背景のタイプ。次の値から選択します。
    • なし
    • Color
    • 画像

    アイコン

    アイコンコンポーネントは、カードにアイコンを表示するために使用されます。[構成] 画面の [アイコン] ドロップダウンメニューからアイコンを選択できます。

    表 : 3. アイコン構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID アイコンの一意の JSON ID 属性。
    表示
    アイコン 表示されるアイコン。
    マージントップ アイコンの上マージン (ピクセル単位)。
    右マージン アイコンの右マージン (ピクセル単位)。
    マージン下部 アイコンの下マージン (ピクセル単位)。
    左マージン アイコンの左マージン (ピクセル単位)。
    外観
    色の変数 アイコンの色変数。
    Color アイコンの色。このプロパティの値は HTML カラーコードです (例:sienna を表す #A0522D )。

    イメージ

    画像コンポーネントは、画像を表示するために使用されます。表示する画像を定義するには、画像を含むレコード上のフィールド (ユーザーレコードのアバターフィールドなど) を選択します。

    表 : 4. イメージ構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID イメージの一意の JSON ID 属性。
    表示
    Height 画像の高さ (ピクセル単位)。
    Width 画像の幅 (ピクセル単位)。
    マージントップ 画像の上マージン (ピクセル単位)。
    右マージン 画像の右マージン (ピクセル単位)。
    マージン下部 画像の下マージン (ピクセル単位)。
    左マージン 画像の左マージン (ピクセル単位)。
    コーナー半径 画像の角の半径。この値を大きくすると、画像の角が丸くなります。
    画像
    マップされたフィールドを使用 画像でマップされたフィールドを使用するかどうかを選択します。
    フィールド値 イメージのマップされたフィールドの値。このプロパティは、[ マップされたフィールドを使用 ] が選択されている場合にのみ表示されます。
    添付ファイル 使用する添付画像。このプロパティは、[ マップされたフィールドを使用 ] が選択されていない場合にのみ表示されます。
    画像スケール 画像のスケーリング。次の値から選択します。
    • 入力
    • 枠幅に合わせる (Fit)

    テキスト

    テキストコンポーネントは、カードにテキストを表示します。これは、静的テキスト、またはフィールドの値のラベルからのテキストにすることができます。レコードリストを表示するときにユーザーが最初に表示する必要がある情報にテキストコンポーネントを使用します。

    表 : 5. テキスト構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID テキストの一意の JSON ID 属性。
    表示
    フィールドタイプ テキストフィールドのタイプ。次の値から選択します。
    • フィールド値
    • フィールドラベル
    • 静的テキスト
    テキスト値 テキストコンポーネントに表示されるテキスト。この値は、[フィールドタイプ] プロパティで [静的テキスト] を選択した場合にのみ使用されます。
    Height テキストコンポーネントの高さ (ピクセル単位)。
    Width テキストコンポーネントの幅 (ピクセル単位)。
    マージントップ テキストコンポーネントの上マージン (ピクセル単位)。
    右マージン テキストコンポーネントの右マージン (ピクセル単位)。
    マージン下部 テキストコンポーネントの下マージン (ピクセル単位)。
    左マージン テキストコンポーネントの左マージン (ピクセル単位)。
    外観
    テキストスタイル テキストの書式設定スタイル。
    テキストの配置 コンポーネント内のテキストの配置。次の値から選択します。
    • Left
    • センター
    最大行数 要素内のテキストの最大行数。
    テキストの色の変数 テキストの色変数。
    テキストの色 テキストの色。このプロパティの値は HTML カラーコードです (例:sienna を表す #A0522D )。
    注:
    テキストコンポーネントの背景色は変更できませんが、テキストコンポーネントをコンテナコンポーネント内に配置して、コンテナの背景色を変更することはできます。

    ビデオ

    ビデオコンポーネントは、カードに埋め込みビデオを表示します。YoutubeとViemoの両方の動画URLがサポートされています。

    表 : 6. ビデオ構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID ビデオの一意の JSON ID 属性。
    表示
    マップされたフィールドを使用 ビデオでマップされたフィールドを使用するかどうかを選択します。
    フィールド値 ビデオのマッピングされたフィールドの値。このプロパティは、[ マップされたフィールドを使用 ] が選択されている場合にのみ表示されます。
    URL 埋め込むビデオの URL。このプロパティは、[ マップされたフィールドを使用 ] が選択されていない場合にのみ表示されます。
    再生モード ビデオがモバイルデバイスでどのように表示されるか。次の値から選択します。
    • 全画面
    • インライン
    Width ビデオコンポーネントの幅 (ピクセル単位)。
    Height ビデオコンポーネントの高さ (ピクセル単位)。
    マージントップ ビデオコンポーネントの上マージン (ピクセル単位)。
    右マージン ビデオコンポーネントの右マージン (ピクセル単位)。
    マージン下部 ビデオコンポーネントの下マージン (ピクセル単位)。
    左マージン ビデオコンポーネントの左マージン (ピクセル単位)。