Enviar notificação para a equipe quando o status do item de trabalho for atualizado no aplicativo de amostra Etapas

Artigo
03/09/2022
5 minutos para o fim da leitura

O aplicativo de exemplo Etapas para Microsoft Teams permite que os usuários acompanhem o andamento da conclusão dos itens de trabalho em projetos em todos os marcos. Embora o aplicativo permita que itens de trabalho sejam atualizados e mantidos, atualmente não há notificações padrão sobre atualizações de itens de trabalho para a equipe.

Neste artigo, aprenderemos como criar um fluxo do Power Automate para enviar uma notificação de cartão adaptável para a equipe (na qual o aplicativo está instalado) quando o status do item de trabalho muda.

Assista a este vídeo para aprender como configurar a notificação para a Equipe quando o status do item de trabalho é atualizado no aplicativo de exemplo Etapas:

Pré-requisitos

Para concluir este exercício, precisaríamos da capacidade de entrar no Teams que estará disponível como parte da seleção de assinaturas do Microsoft 365 e também do modelo Etapas do Power Apps para o Teams instalado. Este aplicativo pode ser instalado a partir de https://aka.ms/TeamsInspection.

Faça logon no aplicativo Etapas

Selecione o ícone do Power Apps no painel esquerdo e vá para a guia Criar.
Selecione a Equipe na qual o aplicativo Etapas está instalado no menu de aplicativos esquerdo.
Selecione Aplicativos instalados e, em seguida, selecione Etapas para abrir o aplicativo. O aplicativo Etapas é aberto.

Adicione condição para chamar o fluxo do Power Automate

No modo de exibição de árvore no painel esquerdo, selecione a tela Projetos.
Na tela, pressione a tecla Alt e selecione para abrir qualquer projeto. A tela Adicionar/Editar Item de Trabalho é aberta.
Selecione o botão Concluído.
Selecione a propriedade OnSelect do botão concluído.
Ao selecionar o botão Concluído, juntamente com as outras atualizações executadas em segundo plano, também queremos acionar um fluxo que enviaria uma atualização de cartão adaptável para a equipe se o status do item de trabalho fosse atualizado. Para fazer essa alteração, adicione o seguinte à parte superior da fórmula OnSelect:
```
If(

    locEditWorkItem,

    //adding code to call a flow when status changes

        If(

            locSelectedWorkItem.'Work Item Status'.'Project Work Item Status' \<\>
            cmbAddWorkItemStatus.Selected.'Project Work Item Status',

    true //your flow call will come here

); 
```
Copie todo o código da propriedade OnSelect do botão Concluído e cole-o em um editor de texto para uso posterior.
Selecione o botão ... (reticências) ao lado de Configurações na faixa de opções superior e selecione Power Automate.
O pop-up Dados é aberto com a opção de Criar um novo fluxo.
Selecione o botão Criar um novo fluxo. Uma janela do navegador é aberta com a tela do novo fluxo do Power Automate.
Atualize o nome do fluxo para - "Enviar notificação de cartão adaptável quando o status da ordem de serviço mudar".
Selecione a opção para disparar o Power Apps da lista de gatilhos. O novo fluxo é criado e a etapa do Power Apps é carregada na tela.

Criar o fluxo do Power Automate

Depois de seguir as etapas da seção anterior, selecione o botão de etapa + Novo.
Selecione a ação Obter uma linha por ID e selecione Nome da Tabela como Itens de Trabalho do Projeto.
Em ID da LInha, abra o conteúdo dinâmico e selecione a opção Perguntar no Power Apps.
Renomeie a etapa para "Obter registro do Item de Trabalho".
Selecione o botão de etapa +Avançar novamente e selecione a ação Obter uma linha por ID e selecione o nome da tabela como Status do Item de Trabalho.
Em ID da Linha, abra o conteúdo dinâmico, selecione Status do Item de Trabalho (Valor).
Renomeie a etapa para Obter registro do Status do Item de Trabalho.
Adicione outra etapa selecionando a etapa +Novo.
Adicione a ação Inicializar variável.
- Renomeie a etapa para Inicializar variável – "Título do Cartão"
- Nome – "varCardTitle"
- Tipo – "cadeia de caracteres"
- Valor = atualização de status para o Item de Trabalho {e selecione o nome do conteúdo dinâmico do Item de Trabalho adicionado na etapa 3}
Adicione outra etapa selecionando a etapa +Novo.
Adicione a ação Inicializar variável.
- Renomeie a etapa para a Inicializar variável – Revisar Link
- Nome – "varReviewWorkItemLink"
- Tipo – "cadeia de caracteres"
- Valor – deixe em branco – será adicionado mais tarde.
Observação

Depois de adicionar uma nova etapa, poderá ser mostrado um aviso no verificador de fluxo. Esse aviso é esperado porque o fluxo é chamado de um aplicativo Power Apps, e adicionar uma nova etapa a um fluxo chamado de um aplicativo Power Apps pode interromper a conexão com o aplicativo. Posteriormente no exercício, substituiremos a conexão com o fluxo para corrigir esse aviso.
Para a ação Revisar Link do Item de Trabalho, usaremos o link para o aplicativo. Para encontrar esse link, abra a equipe onde o aplicativo Etapas está instalado e copie o link para a guia na qual o aplicativo está instalado. Você pode copiar o link para a guia abrindo a guia e selecionando ... (reticências) no canto superior direito.

A URL deverá ser semelhante ao seguinte exemplo:

https://teams.microsoft.com/l/entity/GUID/_djb2_msteams_prefix_956529380?context=%7B%22subEntityId%22%3Anull%2C%22channelId%22%3A%2219%3AGUID%40thread.tacv2%22%7D&groupId=GUID&tenantId=GUID
Para continuar, copie a parte da URL que vem depois de context= e use um decodificador de URL, como https://www.urldecoder.org/, para decodificar a URL.
Copie esse texto decodificado e volte para o fluxo do Power Automate.
Retornar à variável Initialize – etapa Revisar Link de Item de Trabalho.
Defina o campo Valor para o texto de URL decodificado copiado anteriormente.

Adicione uma nova etapa com a ação Redigir e, no campo Entradas, cole o seguinte trecho.

replace(replace(replace(variables('varReviewWorkItemLink'),'{','%7B'),'"','%22'),'}','%7D')

Adicione outra etapa selecionando +Nova etapa.

Selecione a ação Postar cartão adaptável em um chat ou canal (versão preliminar).

Postar como – Usuário
Postar em – Canal
Equipe – {a equipe em que seu aplicativo está instalado}
Canal – Geral

Cartão Adaptável – cole o código JSON a seguir:

Observação

O código JSON a seguir contém referências dinâmicas para valores das etapas anteriores do fluxo. Eles devem resolver automaticamente para a referência correta. Mas, se não resolverem, atualize-os manualmente com a referência correta. Por exemplo, @{outputs('Get_Work_Item_Status_record')?['body/msft_name']} faz referência à coluna de nome da etapa Obter Status do Item de Trabalho.

{
            "type": "AdaptiveCard",
            "body": [
            {

                   "type": "TextBlock",

       "size": "large",

       "weight": "Bolder",

       "text": "Status Update for
       @{outputs('Get_Work_Item_record')?['body/msft_name']}",

       "wrap": true

       },

       {

       "type": "TextBlock",

       "text": "Status for Work Item
       '@{outputs('Get_Work_Item_record')?['body/msft_name']}' has been updated to
       @{outputs('Get_Work_Item_Status_record')?['body/msft_name']}",

       "wrap": true

       }

       ],

       "actions": [

       {

       "type": "Action.OpenUrl",

       "title": "View @{variables('varCardTitle')}",
       //Update the part of the following URL before "context=" with the URL copied in step 12. 
       "url":
       "[https://teams.microsoft.com/l/entity/040880f4-0c68-4c38-8821-d5efd2b6ddbe/_djb2_msteams_prefix_956529380?context=@{outputs('Compose](https://teams.microsoft.com/l/entity/040880f4-0c68-4c38-8821-d5efd2b6ddbe/_djb2_msteams_prefix_956529380?context=@%7boutputs('Compose)')}"

       }

       ],

       "$schema": "<http://adaptivecards.io/schemas/adaptive-card.json>",

       "version": "1.2"

       }

Salve o fluxo.

Disparar o fluxo do Power Apps

Depois que o fluxo for salvo, volte para o Teams e abra o aplicativo no Power Apps.
No modo de exibição de árvore, selecione a tela Adicionar/Editar Item de Trabalho.
Selecione o botão Atualizar.
Atualize a propriedade OnSelect para garantir que o fluxo seja disparado.
Copie a fórmula de onde você a colou anteriormente na propriedade OnSelect.

Na primeira condição If adicionada na parte superior, substitua "verdadeiro" pela função de execução usada para disparar o gatilho de fluxo. Veja o exemplo abaixo.

If(

locEditWorkItem,

//adding code to call a flow when status changes

If(

locSelectedWorkItem.'Work Item Status'.'Project Work Item Status' \<\>
cmbAddWorkItemStatus.Selected.'Project Work Item Status',
SendAdaptivecardnotificationwhenthestatusoftheworkorderchanges.Run(locSelectedWorkItem.'Project Work item') //your flow call will come here

);

//end code

Atualizar a tela de carregamento

No modo de exibição de árvore, selecione a Tela de Carregamento.
Expanda a tela de carregamento e depois conLoading_HiddenHelper embaixo dela.
Selecione o timer tmrLoadingDelay e selecione a propriedade OnTimerEnd.
Se o aplicativo for aberto por meio do link do cartão adaptável, ele deve abrir diretamente o registro do item de trabalho que foi atualizado, o que significa que precisaríamos de uma maneira de verificar se uma ID do item de trabalho está sendo passada para o aplicativo.

A fórmula da página de carregamento precisa ser atualizada para incluir o número do Item de Trabalho, então precisamos atualizar a propriedade OnTimerEnd para o seguinte:

If(
    gblAppLoaded,// && !IsBlankOrError(gblAppStyles),
    If(
        !IsBlank(Param("subEntityId")), //check if the parameter is blank or not
        If( //if the parameter is not blank, check if the user is on a mobile device or desktop/web and then populate the relevant variables and collections to make deep linking work
            (!IsBlank(Param("hostClientType")) && (Param("hostClientType") = "android" Or Param("hostClientType") = "ios")) || (IsBlank(Param("hostClientType")) && (Acceleration.X > 0 || Acceleration.Y > 0 || Acceleration.Z > 0)) Or tglAdmin_Mobile.Value, 
            //project cover colors
            ClearCollect(
                colMobileProjectCoverColors,
                {
                    Color: "#F4B9B9",
                    Theme: "default",
                    Base: "Color1"
                },
                {
                    Color: "#94BFFF",
                    Theme: "default",
                    Base: "Color2"
                },
                {
                    Color: "#E6F0FF",
                    Theme: "default",
                    Base: "Color3"
                },
                {
                    Color: "#5AC6CC",
                    Theme: "default",
                    Base: "Color4"
                },
                {
                    Color: "#C5E9EA",
                    Theme: "default",
                    Base: "Color5"
                },
                {
                    Color: "#F0F9FA",
                    Theme: "default",
                    Base: "Color6"
                },
                {
                    Color: "#EE6F99",
                    Theme: "default",
                    Base: "Color7"
                },
                {
                    Color: "#F495BF",
                    Theme: "default",
                    Base: "Color8"
                },
                {
                    Color: "#F4D2DC",
                    Theme: "default",
                    Base: "Color9"
                },
                {
                    Color: "#CEF0CD",
                    Theme: "default",
                    Base: "Color10"
                },
                {
                    Color: "#BDBDE6",
                    Theme: "default",
                    Base: "Color11"
                },
                {
                    Color: "#E2E2F6",
                    Theme: "default",
                    Base: "Color12"
                },
                {
                    Color: "#F4F4FC",
                    Theme: "default",
                    Base: "Color13"
                },
                {
                    Color: "#FBF6D9",
                    Theme: "default",
                    Base: "Color14"
                },
                {
                    Color: "#791818",
                    Theme: "dark",
                    Base: "Color1"
                },
                {
                    Color: "#053385",
                    Theme: "dark",
                    Base: "Color2"
                },
                {
                    Color: "#6264A7",
                    Theme: "dark",
                    Base: "Color3"
                },
                {
                    Color: "#002F31",
                    Theme: "dark",
                    Base: "Color4"
                },
                {
                    Color: "#025C5F",
                    Theme: "dark",
                    Base: "Color5"
                },
                {
                    Color: "#03787C",
                    Theme: "dark",
                    Base: "Color6"
                },
                {
                    Color: "#461525",
                    Theme: "dark",
                    Base: "Color7"
                },
                {
                    Color: "#CC3D6D",
                    Theme: "dark",
                    Base: "Color8"
                },
                {
                    Color: "#EA5788",
                    Theme: "dark",
                    Base: "Color9"
                },
                {
                    Color: "#043615",
                    Theme: "dark",
                    Base: "Color10"
                },
                {
                    Color: "#33344A",
                    Theme: "dark",
                    Base: "Color11"
                },
                {
                    Color: "#6264A7",
                    Theme: "dark",
                    Base: "Color12"
                },
                {
                    Color: "#464775",
                    Theme: "dark",
                    Base: "Color13"
                },
                {
                    Color: "#FFAA44",
                    Theme: "dark",
                    Base: "Color14"
                }
            );

//local table of character widths, used for auto width labels
ClearCollect(
                colMobileCharsWidth,
                staticCharWidths
            );

//stock project cover images
ClearCollect(
                colMobileStockImages,
                {appStockImage: Blank()},
                {appStockImage: ProjectCover_Future},
                {appStockImage: ProjectCover_Work},
                {appStockImage: ProjectCover_Shapes},
                {appStockImage: ProjectCover_Design},
                {appStockImage: ProjectCover_Flow},
                {appStockImage: ProjectCover_Abstract},
                {appStockImage: ProjectCover_Mountain},
                {appStockImage: ProjectCover_Vision},
                {appStockImage: ProjectCover_DarkShapes},
                {appStockImage: ProjectCover_Morning},
                {appStockImage: ProjectCover_Sublime},
                {appStockImage: ProjectCover_Tech},
                {appStockImage: ProjectCover_Neon},
                {appStockImage: ProjectCover_City}
            );
            Set(
                gblMobileProject,
                LookUp(
                    'Project Work Items',
                    'Project Work item' = GUID(Param("subEntityId"))
                ).Project
            );
            ClearCollect(
                colMobileWorkItems,
                Filter(
                    'Project Work Items',
                    Project.Project = gblMobileProject.Project
                )
            );
            UpdateContext(
                {
                    locMobileCompletionStatus: First(
                        Sort(
                            'Project Work Item Statuses',
                            Sequence,
                            Ascending
                        )
                    )
                }
            );
            Clear(colMobileWorkItemStatuses);
            ForAll(
                Sort(
                    Filter(
                        'Project Work Item Statuses',
                        'Project Work Item Status' <> locMobileCompletionStatus.'Project Work Item Status'
                    ),
                    Sequence,
                    Ascending
                ),
                Collect(
                    colMobileWorkItemStatuses,
                    {
                        Name: ThisRecord.Name,
                        Color: ThisRecord.Color,
                        'Color Dark': ThisRecord.'Color Dark',
                        'Project Work Item Status': ThisRecord.'Project Work Item Status',
                        Sequence: ThisRecord.Sequence
                    }
                )
            );
            Collect(
                colMobileWorkItemStatuses,
                {
                    Name: locMobileCompletionStatus.Name,
                    Color: locMobileCompletionStatus.Color,
                    'Color Dark': locMobileCompletionStatus.'Color Dark',
                    'Project Work Item Status': locMobileCompletionStatus.'Project Work Item Status',
                    Sequence: locMobileCompletionStatus.Sequence
                }
            );
            Navigate(
                'Mobile Work Item Details Screen',
                ScreenTransition.None,
                {
                    locMobileSelectedWorkItem: LookUp(
                        'Project Work Items',
                        'Project Work item' = GUID(Param("subEntityId"))
                    ),
                    locMobileShowWorkItemDetail: true,
                    locMobileShowSearchWorkItem: false,
                    locMobileNavToDetailFromAbout: true
                }
            ),
            Set(
                gblProject,
                LookUp(
                    'Project Work Items',
                    'Project Work item' = GUID(Param("subEntityId"))
                ).Project
            );
            UpdateContext(
                {
                    locCompletionStatus: First(
                        Sort(
                            'Project Work Item Statuses',
                            Sequence,
                            Ascending
                        )
                    )
                }
            );
            Clear(colWorkItemStatuses);
            ForAll(
                Sort(
                    Filter(
                        'Project Work Item Statuses',
                        'Project Work Item Status' <> locCompletionStatus.'Project Work Item Status'
                    ),
                    Sequence,
                    Ascending
                ),
                Collect(
                    colWorkItemStatuses,
                    {
                        Name: ThisRecord.Name,
                        Color: ThisRecord.Color,
                        'Color Dark': ThisRecord.'Color Dark',
                        'Project Work Item Status': ThisRecord.'Project Work Item Status',
                        Sequence: ThisRecord.Sequence
                    }
                )
            );
            Collect(
                colWorkItemStatuses,
                {
                    Name: locCompletionStatus.Name,
                    Color: locCompletionStatus.Color,
                    'Color Dark': locCompletionStatus.'Color Dark',
                    'Project Work Item Status': locCompletionStatus.'Project Work Item Status',
                    Sequence: locCompletionStatus.Sequence
                }
            );
            Navigate(
                'Add/Edit Work Item',
                ScreenTransition.None,
                {
                    locEditWorkItem: true,
                    locSelectedWorkItem: LookUp(
                        'Project Work Items',
                        'Project Work item' = GUID(Param("subEntityId"))
                    ),
                    locAddProject: false,
                    locExpandProjectList: true,
                    locProjectSortOrder: true,
                    locSortWorkItemBy: "eta",
                    locShowSearchWorkItem: false,
                    locAddWorkItem: false,
                    locProjectStatusSelection: "Milestone status",
                    locWorkItemSortOrder: true
                }
            )
        ),
        If( //if the parameter is blank, check if the user is on a mobile device or desktop/web and redirect the user accordingly 
            (!IsBlank(Param("hostClientType")) && (Param("hostClientType") = "android" Or Param("hostClientType") = "ios")) || (IsBlank(Param("hostClientType")) && Acceleration.X > 0) Or tglAdmin_Mobile.Value,
            Navigate(
                'Mobile Projects Screen',
                ScreenTransition.None
            ),
            Navigate(
                'Projects Screen',
                ScreenTransition.None,
                {
                    locShowFirstRun: gblFirstRun,
                    locShowPowerAppsPrompt: gblRecordUserSettings.'Display Splash (Power Apps)' = 'Display Splash (Power Apps) (Project User Settings)'.Yes
                } 
            )
        )
    )
)

Publicar o aplicativo Etapas

Todas as alterações no aplicativo Etapas foram concluídas. O aplicativo agora pode ser publicado selecionando o botão Publicar para o Teams no canto superior direito.

Testar o fluxo do Power Automate

Vá para o Teams e abra o aplicativo Etapas.
Abra um item de trabalho existente e atualize o Status para um valor diferente.
Uma notificação do Cartão Adaptável é recebida no canal do Teams onde o aplicativo está instalado.

Consulte também