powerapps-yaml

Power Apps YAML — Vibe Coding 完全ガイド

使用する場面

• Power Apps Studio に貼り付ける YAML コードを生成するとき
• Power Apps の画面を作成または変更するとき
• デザインを最新の Power Apps コントロールに変換するとき
• バックエンドとして SharePoint を使用するとき

---

🔑 基本構造（pa.yaml Schema v3）

Power Apps Studio が「Paste code」で YAML を受け入れるための必須構造：

Screens:
    NombrePantalla:
        Properties:
            Fill: =SurfaceAlt
            OnVisible: |-
                =Set(varEjemplo, "hola")
        Children:
            - NombreControl:
                Control: TipoControl
                Variant: VarianteOpcional
                Properties:
                    X: =0
                    Y: =0
                    Width: =Parent.Width
                    Height: =100
                Children:
                    - ControlHijo:
                        Control: Text
                        Properties:
                            Text: ="Hola mundo"

構造のルール

1. トップレベル：必ず Screens: から始めます
2. 画面名：Power Apps Studio の画面名と完全に一致する必要があります
3. Control: Screen は使用しない：画面は Screens: の直下に定義し、Control プロパティは使用しません
4. Children は配列：各子要素は - ControlName: で始めます
5. Control と Variant：画面ではなく、各子要素の中に定義します
6. = を付けた値：すべてのプロパティの先頭に = を付けます：Text: ="Hola"、X: =0

---

🚨 最新のコントロールのプロパティ（重要）

Power Apps では、従来のコントロールとは名前が異なる最新のコントロールを使用します。誤った名前を使用すると、PA2108: Unknown property エラーが発生します。

Text コントロール（ラベル）

❌ 従来型（使用しない）	✅ 最新型（使用する）
Color	FontColor
FontWeight	Weight

- lblEjemplo:
    Control: Text
    Properties:
        X: =0
        Y: =0
        Width: =200
        Height: =40
        Text: ="Hola"
        FontColor: =RGBA(0, 0, 0, 1)
        Size: =14
        Weight: =FontWeight.Bold
        Align: =Align.Center
        VerticalAlign: =VerticalAlign.Middle

Button コントロール

❌ 従来型（使用しない）	✅ 最新型（使用する）
Fill	BasePaletteColor
Color	FontColor
Size	FontSize
RadiusTopLeft/Right/etc	(存在しません。Fluent theme を使用してください)

- btnEjemplo:
    Control: Button
    Properties:
        X: =0
        Y: =0
        Width: =200
        Height: =44
        Text: ="Click"
        BasePaletteColor: =BrandAccent
        FontColor: =TextOnAccent
        FontSize: =14
        FontWeight: =FontWeight.Semibold
        Appearance: ='ButtonCanvas.Appearance'.Primary
        OnSelect: =Notify("Clickeado")

Appearance の値：

• 'ButtonCanvas.Appearance'.Primary — プライマリボタン
• 'ButtonCanvas.Appearance'.Secondary — セカンダリボタン
• 'ButtonCanvas.Appearance'.Transparent — 透明（オーバーレイや戻るボタンに最適）

TextInput コントロール

❌ 従来型（使用しない）	✅ 最新型（使用する）
Default	Value
HintText / PlaceholderText	(最新型には存在しません)
Format	(最新型には存在しません)

- txtEjemplo:
    Control: TextInput
    Properties:
        X: =0
        Y: =0
        Width: =200
        Height: =44
        Value: =""
        Mode: =TextMode.MultiLine  # Opcional

DatePicker コントロール

❌ 従来型（使用しない）	✅ 最新型（使用する）
DefaultDate	SelectedDate

- dpEjemplo:
    Control: DatePicker
    Properties:
        X: =0
        Y: =0
        Width: =200
        Height: =44
        SelectedDate: =Today()

Dropdown コントロール

- ddEjemplo:
    Control: Dropdown
    Properties:
        X: =0
        Y: =0
        Width: =200
        Height: =44
        Items: =["Opción 1", "Opción 2", "Opción 3"]
        DefaultSelectedItems: =["Opción 1"]
        OnChange: =Set(varSeleccion, Self.Selected.Value)

数値の項目の場合：

Items: =Sequence(24, 0)              # 0 a 23
Items: =[0, 5, 10, 15, 20, 25, 30]   # Lista explícita

GroupContainer コントロール

❌ サポートされていない	✅ 代替方法
OnSelect	コンテナー内に透明なオーバーレイボタンを使用します
RadiusTopLeft/Right/etc	(最新型には存在しません)

- containerEjemplo:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
        X: =0
        Y: =0
        Width: =200
        Height: =100
        Fill: =Surface
        DropShadow: =DropShadow.Light

コンテナーをクリック可能にする方法：

Children:
    - lblContenido:
        Control: Text
        Properties:
            Text: ="Mi contenido"
    - btnOverlay:
        Control: Button
        Properties:
            X: =0
            Y: =0
            Width: =Parent.Width
            Height: =Parent.Height
            Text: =""
            Appearance: ='ButtonCanvas.Appearance'.Transparent
            OnSelect: =Navigate(OtraPantalla, ScreenTransition.None)

---

📊 Gallery — 重要なルール

ルール #1：Variant は必須です

- galEjemplo:
    Control: Gallery
    Variant: BrowseLayout_Flexible_SocialFeed_ver5.0  # OBLIGATORIO

指定しない場合のエラー： PA1011: The keyword 'Variant' is required but is missing or empty

ルール #2：SharePoint の項目を直接指定 → 正常に動作します

Items: =MiListaSP

ルール #3：コレクションの項目 → 明示的なスキーマで ForAll を使用します

⚠️ 問題：Items が GroupBy + AddColumns で作成されたコレクションを参照している場合、Power Apps がスキーマを推論できないため、gallery 内のコントロールにエラーが表示されます ❌

✅ 解決策：ForAll を使用し、レコードを {campo: valor} の形式で明示的に指定します：

OnVisible: |-
    =ClearCollect(
        colRanking,
        ForAll(
            GroupBy(colRegistros, Title, Email, Registros),
            {
                Nombre: ThisRecord.Title,
                EmailUsuario: ThisRecord.Email,
                Puntos: Sum(Registros, Puntos),
                Sesiones: CountRows(Registros)
            }
        )
    )

ルール #4：GroupBy — 列名に引用符を使用しないでください

# ❌ MAL — "Registros" se interpreta como texto
GroupBy(tabla, "Title", "Email", "Registros")

# ✅ BIEN — identificadores sin comillas
GroupBy(tabla, Title, Email, Registros)

ルール #5：値が変わる列でグループ化しないでください

ユーザーがチームを変更できる場合は、Equipo でグループ化しないでください。重複が表示されます。最新のレコードからチームを取得します：

EquipoUsuario: Last(Registros).Equipo

ルール #6：ForAll 内でグループ化されたテーブルにアクセスする

# ❌ MAL — ThisRecord.Registros no resuelve
Sum(ThisRecord.Registros, Puntos)

# ✅ BIEN — acceso directo a la columna de grupo
Sum(Registros, Puntos)

コレクションを使用した Gallery の完全なテンプレート：

- galRanking:
    Control: Gallery
    Variant: BrowseLayout_Flexible_SocialFeed_ver5.0
    Properties:
        X: =16
        Y: =188
        Width: =Parent.Width - 32
        Height: =Parent.Height - 204
        Items: =SortByColumns(colRanking, "Puntos", SortOrder.Descending)
        TemplatePadding: =6
        TemplateSize: =80
        Fill: =RGBA(0, 0, 0, 0)
    Children:
        - CardItem:
            Control: GroupContainer
            Variant: ManualLayout
            Properties:
                Width: =Parent.Width
                Height: =74
                Fill: =Surface
                DropShadow: =DropShadow.Light
            Children:
                - lblNombre:
                    Control: Text
                    Properties:
                        X: =16
                        Y: =12
                        Width: =Parent.Width - 140
                        Height: =24
                        Text: =ThisItem.Nombre

---

🚀 ローカルキャッシュパターン（最適化）

問題

各画面が個別に SharePoint にクエリを実行するため、遅く、冗長です。

解決策：Screen_Inicio にキャッシュセンターを設置する

# Screen_Inicio.OnVisible — carga datos UNA VEZ
OnVisible: |-
    =Set(varUsuarioActual, User().FullName);
    Set(varEmailActual, User().Email);
    ClearCollect(
        colRegistrosMes,
        Filter(
            MiListaSP,
            Month(Fecha) = Month(Today()),
            Year(Fecha) = Year(Today())
        )
    );
    Set(varMisRegistros, Filter(colRegistrosMes, Email = varEmailActual));
    Set(varMiEquipo, LookUp(Miembros, Email = varEmailActual, Equipo))

他の画面で再利用する

# Screen_Ranking — usa colRegistrosMes, NO re-consulta SharePoint
OnVisible: |-
    =ClearCollect(
        colRanking,
        ForAll(
            GroupBy(colRegistrosMes, Title, Email, Registros),
            { Nombre: ThisRecord.Title, Puntos: Sum(Registros, Puntos) }
        )
    )

# Screen_Equipos — usa varMiEquipo ya cacheado
OnVisible: |-
    =Set(varVistaEquipos, "Lista")
    # varMiEquipo ya está cargado desde Screen_Inicio

レコードの保存後 — ローカルキャッシュを更新する

# En btnGuardar.OnSelect, después del Patch:
Patch(MiListaSP, Defaults(MiListaSP), { ... });
Collect(colRegistrosMes, { ...mismo registro... });
Navigate(Screen_Inicio, ScreenTransition.None)

結果：SharePoint へのクエリが約 7 回から2 回に削減されます（ClearCollect 1 回 + LookUp 1 回）

🎨 テーマカラー（App.Formulas）

App > Formulas でグローバルパレットを定義します：

BrandPrimary = RGBA(30, 41, 59, 1);
BrandAccent = RGBA(255, 107, 53, 1);
BrandAccentLight = RGBA(255, 107, 53, 0.08);
Surface = RGBA(255, 255, 255, 1);
SurfaceAlt = RGBA(245, 247, 252, 1);
TextPrimary = RGBA(15, 23, 42, 1);
TextSecondary = RGBA(100, 116, 139, 1);
TextOnAccent = RGBA(255, 255, 255, 1);
StatusSuccess = RGBA(16, 185, 129, 1);
StatusWarning = RGBA(234, 179, 8, 1);
StatusError = RGBA(239, 68, 68, 1);

---

⏰ パターン：ドロップダウンを使った時間セレクター

DatePicker では日付のみ選択できます。時刻には、ドロップダウンを組み合わせて使用します：

# Horas (0-23)
- ddHoraH:
    Control: Dropdown
    Properties:
        Items: =Sequence(24, 0)
        DefaultSelectedItems: =[8]

# Separador ":"
- lblSep:
    Control: Text
    Properties:
        Text: =":"
        Weight: =FontWeight.Bold

# Minutos (intervalos de 5)
- ddHoraM:
    Control: Dropdown
    Properties:
        Items: =[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]
        DefaultSelectedItems: =[0]

ドロップダウンから DateTime を構築する：

DateAdd(
    DateAdd(Today(), Value(ddHoraH.Selected.Value), TimeUnit.Hours),
    Value(ddHoraM.Selected.Value),
    TimeUnit.Minutes
)

期間を計算する：

With(
    {
        mins: (Value(ddFinH.Selected.Value) * 60 + Value(ddFinM.Selected.Value)) -
              (Value(ddInicioH.Selected.Value) * 60 + Value(ddInicioM.Selected.Value))
    },
    If(mins > 0, Text(RoundDown(mins / 60, 0)) & "h " & Text(Mod(mins, 60)) & "min", "⚠️ Error")
)

---

📋 コードの貼り付け手順

1. Power Apps Studio で画面を手動で作成します
2. 画面名が YAML で定義された名前と一致していることを確認します
3. YAML ファイルの内容をすべてコピーします（Screens: を含む）
4. Tree View で画面を選択します
5. Ctrl+V または右クリック → コードを貼り付けで貼り付けます
6. OnVisible のコレクションが原因でデザイン時エラーが発生した場合は、実行（Play ▶️）して作成します

---

⚠️ よくあるエラーの一覧

エラー	原因	解決策
PA2108: Unknown property 'Color'	クラシックプロパティ	FontColor を使用します
PA2108: Unknown property 'FontWeight' in Text	クラシックプロパティ	Weight を使用します
PA2108: Unknown property 'Fill' in Button	クラシックプロパティ	BasePaletteColor を使用します
PA2108: Unknown property 'Default' in TextInput	クラシックプロパティ	Value を使用します
PA2108: Unknown property 'DefaultDate'	クラシックプロパティ	SelectedDate を使用します
PA2108: Unknown property 'OnSelect' in GroupContainer	サポートされていません	透明な Button を重ねます
PA1011: 'Variant' is required in Gallery	Variant がありません	Variant: BrowseLayout_Flexible_SocialFeed_ver5.0 を追加します
PA2109: Unknown variant 'X' in Gallery	Variant が無効です	BrowseLayout_Flexible_SocialFeed_ver5.0 を使用します
YamlInvalidSyntax: PaModule	構造が正しくありません	最上位に Screens: を使用します
Gallery のコントロールに ❌ が表示される	スキーマを推論できないコレクション	ForAll と明示的なレコードを使用します
ランキングで名前が重複する	可変列による GroupBy	値が変化するフィールドでグループ化しないでください
"Registros" error: text	GroupBy の引用符	引用符を削除します：GroupBy(t, Col, Grupo)

---

🧩 クイック対応表：クラシック → モダン

コントロール	クラシックプロパティ	モダンプロパティ
Text	Color	FontColor
Text	FontWeight	Weight
Button	Fill	BasePaletteColor
Button	Color	FontColor
Button	Size	FontSize
TextInput	Default	Value
TextInput	HintText	(ありません)
DatePicker	DefaultDate	SelectedDate
GroupContainer	OnSelect	(ありません)
すべて	RadiusTopLeft etc.	(ありません)

---

💡 Power Fx のヒント

• 区切り文字：区切り文字にはコンマ（,）を使用します。Power Apps が , と ; のどちらを使うかは、環境の地域設定によって決まります
• 複数行文字列：YAML では |- の後に、先頭に = を付けた数式を記述します
• SharePoint の Choice 列：Patch の際、Choice 型の列には {Value: "texto"} を使用します
• SharePoint リスト名：リストの名前を正確に確認します（重複がある場合は番号を含みます。例：MiLista1）
• 型付きコレクション：Gallery にデータを渡すコレクションには、AddColumns ではなく、常に ForAll({campo: valor}) を使用します
• グローバル変数：共有データを Screen_Inicio.OnVisible でキャッシュし、他の画面で再利用します