Compartilhar via

Personalizar os modelos de aplicativo de exemplo

Neste artigo, você aprenderá sobre a personalização de modelos de aplicativos de exemplo. Por exemplo, você pode precisar alterar o logotipo da empresa, atualizar os dados dentro dos modelos de aplicativo de exemplo para atender às suas necessidades de negócios, adicionar ou remover controles nas telas para estender o aplicativo.

Pré-requisitos

Instalar um modelo de aplicativo de exemplo Mais detalhes: Usar modelos de aplicativo de exemplo no Microsoft Teams.

Observação

  • As seções deste artigo usam um dos modelos de aplicativo de exemplo disponíveis como um exemplo. As tabelas, controles, telas e outros componentes dos aplicativos podem variar dependendo do aplicativo que você instalou. Seja criterioso ao personalizar o aplicativo selecionado.
  • Leia Atualizações de modelos de aplicativo de exemplo antes de personalizar modelos de aplicativo de exemplo para compreender o impacto de novos lançamentos para as versões de modelos de aplicativo de exemplo.

Abrir os modelos de aplicativo de exemplo no Power Apps Studio

Para começar a personalizar os modelos de aplicativo de exemplo, a primeira etapa é abrir o aplicativo no Power Apps Studio.

  1. Entre no Teams.

  2. Selecione Mais aplicativos adicionados. (Mais aplicativos adicionados).

  3. Selecione Power Apps.

    Selecione o aplicativo Power Apps.

  4. Selecione a guia Criar.

  5. Selecione o ambiente da equipe onde você instalou o modelo de aplicativo de exemplo.

  6. Selecione Aplicativos instalados.

  7. Selecione o modelo de aplicativo de exemplo que você instalou.

  8. Se solicitado, selecione o local.

Mais informações: Editar um aplicativo no Power Apps Studio

Remover dados de exemplo

Quando você instala modelos de aplicativo de exemplo, as tabelas podem estar pré-preenchidas com dados de exemplo. A tabela a seguir lista os modelos de aplicativo de exemplo e a lista de tabelas com os dados de exemplo a serem removidos:

Para remover dados dos modelos de aplicativo de exemplo:

  1. Abra o modelo de aplicativo de exemplo (por exemplo, Gerenciar inspeções) no Power Apps Studio.

  2. Selecione Dados no painel esquerdo.

  3. Selecione Dados - reticências. ao lado do nome da tabela (por exemplo, Tarefa de Inspeção de Área para o aplicativo Gerenciar inspeções).

  4. Selecione Editar dados.

  5. Exclua todas as linhas que contêm dados de exemplo.

    Excluir linhas.

  6. Feche o editor visual.

  7. Repita as etapas anteriores para as tabelas restantes.

Adicione seu logotipo à tela de carregamento

  1. Abra o modelo de aplicativo de exemplo (por exemplo, Inspeção) no Power Apps Studio.

  2. Selecione Exibição de árvore no painel esquerdo.

  3. Se ainda não estiver selecionada, selecione a Tela de Aterrissagem.

  4. Selecione Inserir.

  5. Selecione o controle Imagem em Mídia.

    Adicionar imagem.

  6. No painel de propriedades do lado direito, selecione o menu suspenso Imagem e selecione + Adicionar um arquivo de imagem.

    Adicionar arquivo de imagem.

  7. Selecione a imagem para o logotipo da sua empresa e selecione Abrir.

  8. Posicione e dimensione o controle de imagem na posição desejada na tela de carregamento.

    Logotipo da empresa.

Alterar o texto da tela de boas-vindas

Observação

O texto de saudação da tela de boas-vindas do aplicativo Inspeção usa uma fórmula com variáveis globais para exibir corretamente a terminologia desejada para inspeções e itens sendo inspecionados. Tenha cuidado ao alterar essa fórmula.

  1. Abra o modelo de aplicativo de exemplo (por exemplo, Inspeção) no Power Apps Studio.

  2. Selecione o controle de rótulo de texto com o texto de saudação Que bom ter você aqui.

    A fórmula para o texto de saudação está neste formato:

    "Glad to have you here, we are ready for you to " & If(Lower(gblWorkType)="inspection", "inspect", Lower(gblWorkType)) & Switch(
Left(
    Lower(areaLabel),
    1
),
"a",
" an ",
"e",
" an ",
"i",
" an ",
"o",
" an ",
"u",
" an ",
" a "
) & Lower(areaLabel)

  3. Selecione a barra de fórmulas.

  4. Selecione a frase Que bom ter você aqui.

  5. Atualize o texto de saudação, como Estamos felizes que você esteja aqui.

    "We are happy that you are here, we are ready for you to " & If(Lower(gblWorkType)="inspection", "inspect", Lower(gblWorkType)) & Switch(
Left(
    Lower(areaLabel),
    1
),
"a",
" an ",
"e",
" an ",
"i",
" an ",
"o",
" an ",
"u",
" an ",
" a "
) & Lower(areaLabel)

    Atualizar o texto de saudação na fórmula.

Alterar a cor em segundo plano da tela

Observação

O aplicativo Inspeção utiliza variáveis de tema globais para garantir uma experiência consistente do usuário. Se você modificar um preenchimento de tela, a tela modificada não usará mais o tema de aplicativo padrão.

  1. Abra o modelo de aplicativo de exemplo (por exemplo, Inspeção) no Power Apps Studio.

  2. Selecione Exibição de árvore no painel esquerdo.

  3. Selecione a Tela de Boas-vindas na Visualização em árvore.

  4. Selecione Preencher na lista de propriedades no canto superior esquerdo.

  5. Na barra de fórmulas, substitua a fórmula pela cor desejada.

    A cor de preenchimento do segundo plano da tela será definida para a cor em segundo plano selecionada.

    Alterar cor em segundo plano.

Editar dados em massa

Se desejar editar rapidamente os dados no aplicativo, você poderá abrir a tabela e modificar ou excluir dados.

Cuidado

Os modelos de aplicativo de exemplo usam várias tabelas relacionadas, como Locais da Inspeção de Área e Tipos de Local da Inspeção de Área para o aplicativo Inspeção. Tenha cuidado ao excluir registros das tabelas sem verificar o relacionamento e as dependências dos dados.

  1. Abra o modelo de aplicativo de exemplo (por exemplo, Inspeção) no Power Apps Studio.

  2. Selecione Dados no painel esquerdo.

  3. Selecione Dados - reticências. ao lado do nome da tabela (por exemplo, Tipos de Local de Inspeção de Área para o aplicativo Inspeção).

  4. Selecione a célula dentro do Editor Visual, por exemplo, Comida na coluna Nome.

  5. Substitua o texto pelo valor desejado.

  6. Feche o editor visual.

    Os dados no aplicativo devem refletir o valor atualizado, como o nome do local neste exemplo.

    Editar dados em massa.

Adicionar uma coluna ao aplicativo

Importante

As etapas de personalização do aplicativo Inspeção nesta seção cobrem algumas das opções de configuração avançada. Este exemplo requer que você tenha familiaridade com o Power Apps Studio, sinta-se confortável com a modificação de fórmulas e trabalhe com controles como contêineres.

Considere um cenário em que você tem várias lojas e deseja associar locais e inspeções a lojas específicas.

Adicione a coluna de texto Nome da Loja à tabela Local

  1. Abra o aplicativo Gerenciar inspeções no Power Apps Studio.

  2. Selecione Dados no painel esquerdo.

  3. Selecione Dados - reticências. ao lado do nome da tabela (por exemplo, Localizações de Inspeção de Área para o aplicativo Gerenciar inspeções).

  4. Selecione Adicionar coluna.

  5. Insira Nome como "Nome da Loja".

  6. Selecione Criar.

  7. Feche o editor visual.

    Adicionar coluna Nome da Loja.

Adicionar coluna Nome da Loja ao formulário de local

  1. Selecione a Tela Locais.

    Dica

    Você pode ignorar o erro sobre o uso dos conectores de visualização neste aplicativo.

  2. Na Exibição de árvore, procure btnArea_GroupedAreas.

  3. Em Áreas Agrupadas no formulário, arraste a borda esquerda para ficar paralela com a borda do campo Título.

    Observação

    O controle de campo Áreas Agrupadas fica em um contêiner. Portanto, a área selecionada pode aparecer em uma parte diferente da tela onde você vê a coluna. Arrastar a área selecionada redimensiona a coluna.

  4. Selecione Inserir no painel esquerdo.

  5. Selecione o controle Rótulo.

  6. Posicione o Rótulo de modo que esteja alinhado na horizontal com Áreas agrupadas e na vertical com o Tipo de área.

    Posição do controle Rótulo.

  7. Selecione Texto na lista de propriedades no canto superior esquerdo.

  8. Selecione a barra de fórmulas.

  9. Altere a fórmula para Nome da Loja.

  10. Selecione Inserir no painel esquerdo.

  11. Selecione o controle Caixa de texto.

  12. Arraste o controle da caixa de texto para ser alinhado na horizontal com Área agrupada e na vertical com Tipo de área.

  13. Selecione Valor na lista de propriedades no canto superior esquerdo.

  14. Na barra de fórmulas, substitua o valor atual por gblLocation.'Store Name'

  15. Selecione ColorBackground na lista de propriedades no canto superior esquerdo.

  16. Na barra de fórmulas, insira "Branco".

    Propriedade ColorBackground.

  17. Selecione Modo de exibição na lista de propriedades no canto superior esquerdo.

  18. Na barra de fórmulas, insira "Editar" se ainda não estiver presente.

  19. Segure a tecla ALT no teclado e selecione Editar.

    Editar com a tecla alt pressionada.

  20. Selecione Exibição de árvore no painel esquerdo.

  21. Procure btnAreaDetails_Save e selecione o controle retornado.

  22. Expanda a barra de fórmulas.

  23. No final da 17ª linha, adicione uma vírgula e esta fórmula:

    'Store Name':Microsoft_CoreControls_TextBox1.Value

    Agora essa seção da fórmula deve ser semelhante a:

    {
	msft_name: txtArea_EditTitle.Text,
	'Location Type': cmbAreaDetails_AreaType.Selected,
	'Primary Image': picArea_UploadedImage.Image, 'Store Name':Microsoft_CoreControls_TextBox1.Value
}

    Observação

    Se a fórmula atualizada mostrar erro, verifique o nome da caixa de texto para o nome da loja. Por exemplo, pode ser Microsoft_CoreControls_TextBox2 em vez de Microsoft_CoreControls_TextBox1, dependendo de suas alterações.

  24. Selecione o controle de rótulo adicionado na etapa 5.

  25. Selecione a propriedade Y na lista de propriedades no canto superior esquerdo.

  26. Selecione a barra de fórmulas.

  27. Altere a fórmula para:

    If(gblEditLocation,250,200)

  28. Selecione a caixa de texto adicionada na etapa 11.

  29. Selecione a propriedade Y na lista de propriedades no canto superior esquerdo.

  30. Selecione a barra de fórmulas.

  31. Altere a fórmula para:

    If(gblEditLocation,282,232)

  32. Mantenha a tecla CTRL pressionada no teclado e selecione o rótulo do nome da loja e a caixa de texto.

  33. Selecione a propriedade Visível na lista de propriedades no canto superior esquerdo.

  34. Selecione a barra de fórmulas.

  35. Altere a fórmula para:

    If(gblViewInspection, false, true)

    Alterações de posição com a propriedade Y.

Publicar atualizações de aplicativos no Teams

Para salvar e publicar as alterações no aplicativo de exemplo:

  1. Selecione Salvar no canto superior direito.

  2. Selecione Publicar no Teams

  3. Selecione Avançar.

  4. Para publicar a versão atualizada de um aplicativo em uma guia ativa existente, selecione Salvar + fechar.
    Para adicionar a versão publicada de um aplicativo a uma nova guia em um canal diferente, selecione Adicione uma guia. (Adicionar uma guia) para o canal desejado e selecione Salvar + fechar.

Mais Informações: Publicar e adicionar um aplicativo ao Teams