Substitua a notificação por um cartão adaptável para aumentar a colaboração

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

Neste artigo, vamos alterar as notificações que vêm do aplicativo Ideias do Funcionário de mensagens baseadas em HTML no Teams para cartões adaptáveis no Teams. Atualmente, as notificações do Teams são iniciadas de dentro do aplicativo e enviadas como uma mensagem postada no canal Teams. Substituiremos essa notificação de canal do Teams por uma notificação de cartão adaptável que será iniciada usando um fluxo do Power Automate.

Assista a este vídeo para saber como substituir notificações por um cartão adaptável:

Pré-requisitos

Para concluir esta lição, precisamos da capacidade de entrar no Microsoft Teams que estará disponível como parte da seleção de assinaturas do Microsoft 365 e também precisamos ter o aplicativo de exemplo Ideias dos funcionários.

Criar o fluxo do Power Automate para gerar o cartão adaptável

Para começar, vamos criar um fluxo para substituir a notificação atual por um cartão adaptável.

Abra o Power Apps para o aplicativo pessoal do Teams e localize o aplicativo Ideias do Funcionário. Para facilidade de uso, você pode clicar com o botão direito do mouse no logotipo do Power Apps no Teams e selecione Destacar aplicativo para trabalhar com o Power Apps Studio em sua própria janela.
Selecione o aplicativo Ideias para abrir o Studio do Power Apps no Teams e comece a editar o aplicativo.
No menu superior, selecione as reticências verticais à direita da opção Configurações. Você verá três opções – Power Automate, Coleções e Variáveis.
Escolha Power Automate para abrir o menu da barra lateral Dados à direita. Você verá todos os fluxos disponíveis.
Escolha Criar um novo fluxo. Você verá o Studio do Power Automate em uma janela separada do navegador. Verifique se você está no ambiente correto para a equipe que contém o aplicativo que você está tentando alterar antes de continuar.
Na área superior esquerda, você verá que o fluxo tem o nome Sem título. Selecione esse texto para alterar o nome para Cartão Adaptável de Ideias do Funcionário para Teams.
Adicione o gatilho do Power Apps para nos permitir disparar o fluxo do Power Apps e adicione valores para passar do Power Apps para o Power Automate.
Selecione a etapa +Novo para adicionar uma nova etapa > selecione a ação Obter uma linha por ID e para ID da Linha > selecione a área do campo Valor para revelar o menu de conteúdo dinâmico > selecione Perguntar no Power Apps. Esta ação criará uma variável no gatilho do Power Apps para permitir a passagem de dados do aplicativo para o Power Automate.
Em seguida, adicione duas ações Inicializar Variável. Essas ações serão usadas para armazenar informações do Power Apps e para armazenar um link para o aplicativo Ideias que será usado no cartão adaptável para vincular diretamente ao registro. Renomeie cada uma das ações da seguinte forma:

Inicializar variável - Título do Cartão
- Nome = varCardTitle
- Tipo = String
Inicializar variável – Campanha
- Nome = varCampaign
- Tipo = String

Defina cada um dos valores de Tipo como cadeia de caracteres e adicione um Nome para cada um: varCardTitle, varCampaign e varReviewIdeasLink, respectivamente.
Para o Título do Cartão e ações de Campanha, selecione a área do campo Valor para revelar o menu de Conteúdo dinâmico e, em seguida, selecione Perguntar no Power Apps. Essa configuração criará uma variável no gatilho do Power Apps para permitir a passagem de dados do aplicativo para o Power Automate.
Para a ação Revisar Link do Ideias, usaremos o link para o aplicativo. Para encontrar esse link, acesse a Equipe onde o aplicativo Ideias 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 as reticências (...) no canto superior direito.

Sua URL deverá ser semelhante ao seguinte exemplo:

https://teams.microsoft.com/l/entity/GUID/_djb2_msteams_prefix_1434832750?context=%7B%22subEntityId%22%3Anull%2C%22channelIdGUIDthread.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 o texto.
Copie o texto decodificado e volte para o fluxo do Power Automate.
Adicione uma nova etapa ao fluxo para inicializar uma variável.
- Renomeie a etapa para Inicializar variável – Revisar Link do Ideias
- Definir Nome = varReviewIdeasLink
- Selecionar Tipo = cadeia de caracteres
- Inserir Valor = {cole o texto copiado da url acima}
Adicione uma nova etapa com a ação Redigir e, no campo Entradas, cole o seguinte código:
```
replace(replace(replace(variables('varReviewIdeasLink'),'{','%7B'),'"','%22'),'}','%7D')
```
Adicione uma ação Postar cartão adaptável em um chat ou canal. Defina o valor de Postar como como Usuário e o valor Postar em como Canal. Nos campos Equipe e Canal, selecione a Equipe e o Canal em que você gostaria de postar o cartão adaptável.

O código de exemplo a seguir é apenas um exemplo, embora você possa criar seus próprios cartões.

Dica

Você pode aprender mais sobre cartões adaptáveis em https://adaptivecards.io/ e projetar seus próprios cartões em um editor visual em https://adaptivecards.io/designer/.

No campo Cartão Adaptável, copie e cole o seguinte:

{

"type": "AdaptiveCard",

"body": [

{

"type": "TextBlock",

"size": "large",

"weight": "Bolder",

"text": "@{variables('varCardTitle')}",

"wrap": true

},

{

"type": "TextBlock",

"text": "A new idea has been submitted!",

"wrap": true

},

{

"type": "TextBlock",

"text": "For the campaign: @{variables('varCampaign')}",

"wrap": true

}

],

"actions": [

{

"type": "Action.OpenUrl",

"title": "View @{variables('varCardTitle')}",

"url":
"https://teams.microsoft.com/l/entity/b7fad6ce-2e23-4aba-b209-859a59ca230e/_djb2_msteams_prefix_1434832750?context=@{outputs('Compose')}"

}

],

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

"version": "1.2"

}

No campo Assunto, copie e cole o seguinte código:

New idea submitted for @{variables('varCampaign')} Campaign

Etapa Postar cartão adaptável no Teams.

Esta ação definirá as características do cartão adaptável e usará as variáveis do Power Apps no cartão adaptável.

Salve e teste o fluxo para garantir que ele funciona corretamente. Selecionar manualmente na barra lateral Testar fluxo permitirá que você insira as variáveis Título do Cartão, Campanha e Revisar Link de Ideias.

Adicionar o fluxo ao aplicativo Ideias

Depois de verificar se o fluxo está funcionando corretamente, você poderá adicioná-lo ao aplicativo Ideias.

Volte para o Power Apps Studio onde o aplicativo Ideias estava sendo editado.
No Modo de Exibição de Árvore no lado esquerdo, selecione a Tela Detalhe da Campanha.
Em seguida, selecione o botão Enviar ideia (chamado btnCampaignIdeaControls_Submit no Modo de Exibição de Árvore). Vamos adicionar o fluxo do Power Automate que criamos para esse botão.
Primeiro, copiaremos o código que está na propriedade OnSelect do botão. Um problema com a adição de fluxos do Power Automate para controles no Power Apps é que qualquer código existente no controle será removido. Para contornar esse problema, cole o código copiado para um editor de texto, como o Bloco de Notas, e edite-o para colá-lo novamente na propriedade OnSelect quando terminar. Depois de colar o código, certifique-se de que todo o código foi adicionado.

Com o botão ainda selecionado, selecione as reticências verticais à direita de Configurações na barra de menu superior. Selecione Power Automate, o que revelará a barra lateral Dados. Agora você deverá ver o fluxo Cartão Adaptável de Ideias do Funcionário para Teams na seção Fluxos disponíveis. Selecione-o e adicione-o ao botão.

Agora você precisará editar o código colado. Encontre e remova o seguinte texto:

Notify(

If(tglIdeaDetailControls_PostToTeams.Value,

If(

IsError(

MicrosoftTeams.PostMessageToChannelV3(

gblSettingTeamId,

gblSettingNotificationChannelId,

{

content: Concatenate(

"A new employee idea has been created!",

"\<br\>\<br\>",

"\<b\>Description\</b\>",

"\<br\>",

locFormRecordIdea.Description

),

contentType: "html"

},

{subject: locFormRecordIdea.Title}

)

),

"Message was not posted. You may not have access to the Team and/or Channel.
Contact the app administrator.",

NotificationType.Warning

)

)

);

Onde estava o texto removido, cole o seguinte código:

If(tglIdeaDetailControls_PostToTeams.Value,
EmployeeIdeasAdaptiveCardToTeams.Run(locFormRecordIdea.Title,gblSelectedRecordCampaign.Title,locFormRecordIdea.'Employee
Idea',locFormRecordIdea.'Employee Idea'));

Este código contém a referência ao fluxo que acabamos de adicionar e as variáveis a serem passadas para o Power Automate.

Copie todo o texto editado e cole-o de volta na propriedade OnSelect do botão Enviar inspeção. Verifique se não há erros no botão.

Atualize o aplicativo para abrir o registro real usando o link Cartão Adaptável

Agora vamos atualizar o aplicativo para aceitar o parâmetro de hiperlink e oferecer suporte a links diretos para registros.

O cartão adaptável tem um link que deve nos levar de volta ao registro de ideia que foi criado. Precisamos fazer algumas alterações na página de carregamento do aplicativo para carregar os dados apropriados.

No modo de exibição de árvore, selecione a tela de carregamento. Em seguida, selecione o contêiner conLoading_HiddenHelper e, abaixo dele, selecione tmrLoadingDelay.
Selecione a propriedade OnTimerEnd do controle de timer e observe que há uma condição IF chamada If(gblAppLoaded,----------).

Substitua toda aquela condição IF pela seguinte condição IF (adicionadas mais algumas verificações junto com as verificações originais).

Observação

Este código é editado para incluir links diretos para o registro de ideia específica, caso o aplicativo seja aberto a partir do cartão adaptável. Existem algumas coleções / valores que precisam ser definidos antes que a tela seja carregada se quisermos que ele faça um link direto para o registro de ideia específica

If(

gblAppLoaded,

If(

!IsBlank(Param("subEntityId")), //check if the parameter is blank or not, if
not, populate the relevant variables and collections to make deep linking work

Set(

gblRecordCampaignIdea,

LookUp(

'Employee Ideas',

'Employee Idea' = GUID(Param("subEntityId"))

)

);

ClearCollect(

colResponses,

Filter(

'Employee Idea Responses',

Idea.msft_employeeideaid = gblRecordCampaignIdea.msft_employeeideaid

)

);

ClearCollect(

colFiles,

Filter(

'Employee Idea Files',

'Employee Idea Files'[@Idea].'Employee Idea' = gblRecordCampaignIdea.'Employee
Idea'

)

);

Set(

gblSelectedRecordCampaign,

LookUp(

'Employee Idea Campaigns',

'Employee Idea Campaign' = gblRecordCampaignIdea.Campaign.'Employee Idea
Campaign'

)

);

ClearCollect(

colIdeas,

Filter(

'Employee Ideas',

'Employee Ideas'[@Campaign].'Employee Idea Campaign' =
gblSelectedRecordCampaign.'Employee Idea Campaign'

)

);

If( //check if the user is on a mobile device or desktop/web and redirect the
user accordingly to deep link into the specific idea

Or(

Param("hostClientType") = "android",

(Param("hostClientType") = "ios" And Parent.Width \< 800)

),

Navigate(

'Campaign Detail Screen',

ScreenTransition.None,

{

locVisibleCampaignIdea: true,

locVisibleCampaignView: false,

locCreateNewIdea: false

}

),

Navigate(

'Mobile Idea Screen',

ScreenTransition.None,

{

locVisibleCampaignIdea: true,

locVisibleCampaignView: false,

locCreateNewIdea: false

}

)

),

If( //if the parameter is blank, check if the user is on a mobile device or
desktop/web and redirect the user accordingly

Or(

Param("hostClientType") = "android",

(Param("hostClientType") = "ios" And Parent.Width \< 800),

tglAdmin_Mobile.Value// Studio Testing

),

Navigate(

'Mobile Landing Screen',

ScreenTransition.None,

{locShowSetup: false}

),

Navigate(

'Campaign Summary Screen',

ScreenTransition.None,

{

locShowModal: (gblRecordUserSettings.'Display Splash (Power Apps)?' = 'Display
Splash (Power Apps)? (Employee Ideas User Settings)'.Yes),

locShowPowerAppsPrompt: gblRecordUserSettings.'Display Splash (Power Apps)?' =
'Display Splash (Power Apps)? (Employee Ideas User Settings)'.Yes

}

)

)

)

)

Esta ação deve carregar todos os dados necessários de forma adequada após a abertura do aplicativo. O usuário selecionando o registro no cartão adaptável será levado à ideia apropriada.

Publicar o aplicativo Ideias

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

Testar o aplicativo

Faça login no Teams e navegue até a Equipe onde o aplicativo Ideias está instalado.
Selecione a guia Ideias na parte superior.
O aplicativo Ideias é aberto.
Selecione uma das Campanhas – por exemplo, Segurança do Local de Trabalho.
Selecione o botão Enviar uma ideia.
Insira Título e Descrição.
Selecione classificações para as perguntas listadas.
Adicione qualquer outra informação necessária.
Clique no botão Enviar ideia assim que todos os detalhes forem preenchidos.
A ideia é enviada.
Uma notificação é enviada para a Equipe na qual o aplicativo está instalado.
Selecione o link na notificação e verifique se o registro da ideia abre.

Consulte também