Tutorial Completo: Editando Power Apps Canvas no Kiro IDE

Visão Geral

Este tutorial documenta o processo completo para pegar um app Canvas (.msapp) do Power Apps, descompactar, editar no Kiro IDE, e reempacotar para reimportar no Power Apps Studio.

---

Pré-requisitos

1. Instalar .NET SDK 8+

O Power Platform CLI (pac) roda sobre .NET. Instale via winget:

winget install Microsoft.DotNet.SDK.8 --accept-source-agreements --accept-package-agreements

Verifique:

dotnet --version
# Esperado: 8.x.x

2. Instalar Power Platform CLI (pac)

dotnet tool install --global Microsoft.PowerApps.CLI.Tool --version 1.32.6

Nota: Versões mais recentes (2.x) podem ter incompatibilidades com .NET 8. A versão 1.32.6 é estável.

Adicione ao PATH (se necessário):

$env:PATH = "$env:USERPROFILE\.dotnet\tools;C:\Program Files\dotnet;" + $env:PATH

Verifique:

pac canvas help

Deve mostrar os comandos: download, list, pack, unpack, create.

---

Passo 1: Exportar o .msapp do Power Apps

1. Abra o Power Apps Studio (make.powerapps.com)
2. Abra seu app no modo de edição
3. Vá em Arquivo > Salvar como > Este computador
4. Salve o arquivo .msapp

---

Passo 2: Descompactar com pac canvas unpack

pac canvas unpack --msapp "MeuApp.msapp" --sources "MeuApp_src"

Isso cria a seguinte estrutura:

MeuApp_src/
├── Assets/                    # Imagens e mídia
├── Connections/               # Conexões de dados
├── DataSources/               # Definições de data sources
├── Entropy/                   # Metadados internos (não editar)
├── Other/                     # Referências, componentes compilados
├── pkgs/                      # Templates de controles PCF
├── Src/                       # ⭐ CÓDIGO FONTE DAS TELAS
│   ├── App.fx.yaml            # Configuração do App (OnStart, Theme)
│   ├── scr_Tela1.fx.yaml     # Cada tela é um arquivo
│   ├── scr_Tela2.fx.yaml
│   ├── Components/            # Componentes reutilizáveis
│   ├── EditorState/           # Estado do editor (metadados)
│   └── Themes.json            # Definição de temas

Importante: Erros PA3013/PA3015 durante o unpack são warnings de validação de roundtrip. Os arquivos são gerados mesmo assim.

---

Passo 3: Entender o formato .fx.yaml

Estrutura básica de uma tela

NomeDaTela As screen:
    Fill: =RGBA(255, 255, 255, 1)
    OnVisible: =Set(varAtiva, true)

    MeuBotao As modernButton:
        Text: ="Clique aqui"
        OnSelect: =Navigate(OutraTela, ScreenTransition.Fade)
        X: =100
        Y: =200
        Width: =200
        Height: =44
        ZIndex: =1

    MeuLabel As label:
        Text: ="Olá mundo"
        Color: =RGBA(0, 0, 0, 1)
        Font: =Font.'Open Sans'
        Size: =14
        X: =100
        Y: =300
        ZIndex: =2

Tipos de controles disponíveis

Controle	Sintaxe fx.yaml
Tela	NomeTela As screen:
Label	Nome As label:
Botão moderno	Nome As modernButton:
Retângulo	Nome As rectangle:
Ícone	Nome As icon:
Galeria vertical	Nome As gallery.galleryVertical:
Galeria horizontal	Nome As gallery.galleryHorizontal:
Seta	Nome As arrow:
Seta voltar	Nome As arrow.backArrow:
Texto moderno	Nome As modernText:
Input de texto	Nome As textInput:
Formulário	Nome As form:
Container auto-layout	Nome As groupContainer.verticalAutoLayoutContainer:
Container horizontal	Nome As groupContainer.horizontalAutoLayoutContainer:
Container grid	Nome As groupContainer.gridLayoutContainer:
Grupo	Nome As group:

Regras importantes do formato

1. Indentação: 4 espaços para propriedades, 8 para controles filhos
2. Valores: Sempre começam com = (são fórmulas Power Fx)
3. Strings: Use ="texto" com aspas dentro do =
4. Multi-linha: Use |- para fórmulas longas
5. ZIndex: Obrigatório em cada controle (ordem de renderização)
6. Hierarquia: Controles filhos ficam indentados dentro do pai

Galeria com itens (controles filhos)

MinhaGaleria As gallery.galleryVertical:
    Items: =Filter(Lead, Stage.Value = "Novo")
    TemplateSize: =120
    Height: =500
    Width: =300
    X: =0
    Y: =100
    ZIndex: =1

    CardTitulo As label:
        Text: =ThisItem.Title
        Color: =RGBA(0, 0, 0, 1)
        Height: =24
        Width: =Parent.TemplateWidth - 20
        X: =10
        Y: =10
        ZIndex: =1

    CardValor As label:
        Text: =ThisItem.Value
        Height: =20
        X: =10
        Y: =36
        ZIndex: =2

App.fx.yaml (configuração global)

App As appinfo:
    BackEnabled: =true
    OnStart: |-
        =Set(varCor1, RGBA(15, 23, 42, 1));
        Set(varCor2, RGBA(99, 102, 241, 1))
    Theme: =TeamsTheme

    Host As hostControl.DefaultHostControlVariant:
        OnCancel: =false
        OnEdit: =false
        OnNew: =false
        OnSave: =false
        OnView: =false

---

Passo 4: Editar as telas no Kiro IDE

Abra a pasta MeuApp_src/Src/ no Kiro e edite os arquivos .fx.yaml.

Dicas de edição

• Criar nova tela: Crie um novo arquivo scr_NovaTela.fx.yaml + um EditorState/scr_NovaTela.editorstate.json mínimo:

  {
    "ControlStates": {},
    "TopParentName": "scr_NovaTela",
    "ScreenIndex": 0
  }

• Referenciar data sources: Use os mesmos nomes que aparecem nos arquivos DataSources/

• Navegação entre telas: =Navigate(NomeDaTela, ScreenTransition.Fade)

• Variáveis globais: Defina no App.OnStart e use em qualquer tela

---

Passo 5: Reempacotar com pac canvas pack

pac canvas pack --sources "MeuApp_src" --msapp "MeuApp_Editado.msapp"

Possíveis resultados:

Mensagem	Significado
Warning PA2001: Checksum mismatch	Normal — indica que você editou os fontes. Ignore.
Error PA3003: Parse error	Erro de sintaxe no .fx.yaml. Verifique indentação e formato.
Sem erros	Sucesso!

---

Passo 6: Importar de volta no Power Apps

1. Abra make.powerapps.com
2. Clique em Aplicativos > Importar aplicativo de tela
3. Selecione o .msapp gerado
4. Reconecte as fontes de dados (SharePoint, Dataverse, etc.)
5. Salve e publique

---

Troubleshooting

Erro "Parse error: Can't parse control definition"

• Verifique se não há tabs (use apenas espaços)
• Verifique se todos os controles têm ZIndex
• Verifique se strings com caracteres especiais estão entre aspas
• Galeria deve usar o tipo correto: gallery.galleryVertical (não apenas gallery)

Tela nova não aparece no app

• Confirme que criou o .editorstate.json correspondente
• Confirme que o nome da tela no YAML bate com o nome do arquivo

Erros PA3013/PA3015 no unpack

• São warnings de validação. O unpack funciona mesmo com esses erros.
• É um bug conhecido do pac CLI com apps criados em versões mais recentes do Power Apps.

pac não encontrado após instalação

# Adicione ao PATH da sessão:
$env:PATH = "$env:USERPROFILE\.dotnet\tools;C:\Program Files\dotnet;" + $env:PATH

# Ou para persistir, adicione ao perfil do PowerShell:
Add-Content $PROFILE '$env:PATH = "$env:USERPROFILE\.dotnet\tools;C:\Program Files\dotnet;" + $env:PATH'

---

Resumo dos Comandos

# 1. Instalar dependências (uma vez)
winget install Microsoft.DotNet.SDK.8 --accept-source-agreements --accept-package-agreements
dotnet tool install --global Microsoft.PowerApps.CLI.Tool --version 1.32.6

# 2. Configurar PATH
$env:PATH = "$env:USERPROFILE\.dotnet\tools;C:\Program Files\dotnet;" + $env:PATH

# 3. Descompactar
pac canvas unpack --msapp "MeuApp.msapp" --sources "MeuApp_src"

# 4. Editar arquivos em MeuApp_src/Src/*.fx.yaml

# 5. Reempacotar
pac canvas pack --sources "MeuApp_src" --msapp "MeuApp_Editado.msapp"

# 6. Importar no Power Apps Studio

---

Limitações Conhecidas

• O pac canvas pack/unpack está em Preview — pode ter bugs com apps complexos
• Controles PCF customizados podem não descompactar corretamente
• Formulários com DataCards são complexos — prefira editar no Studio
• Conexões de dados precisam ser reconectadas após importação
• O formato .fx.yaml é diferente do .pa.yaml (que aparece dentro do .msapp bruto)

---

Referências

• Documentação oficial pac canvas
• Power Apps YAML schema
• GitHub - Power Apps Language Tooling