Sostituire la notifica con la scheda adattiva per aumentare la collaborazione

2023-06-23

In questo articolo, modificheremo le notifiche provenienti dall'app Idee dipendenti dai messaggi basati su HTML in Teams in schede adattive in Teams. Attualmente, le notifiche di Teams vengono avviate dall'interno dell'app e vengono inviate come messaggio pubblicato nel canale Teams. Sostituiremo questa notifica del canale Teams con una notifica della scheda adattiva che verrà inizializzata usando un flusso di Power Automate.

Guarda questo video per sapere come sostituire le notifiche con la scheda adattiva:

Prerequisiti

Per completare questa lezione, abbiamo bisogno di accedere a Microsoft Teams che sarà disponibile come parte di selezionati abbonamenti Microsoft 365 e dovrà anche avere l'app di esempio Idee dipendenti.

Creare il flusso di Power Automate per generare la scheda adattiva

Per iniziare, creiamo un flusso per sostituire la notifica corrente con una scheda adattiva.

Apri l'app personale Power Apps per Teams e individua l'app Idee dipendenti. Per facilità d'uso, puoi fare clic con il pulsante destro del mouse sul logo Power Apps in Teams e selezionare Apri l'app in una nuova finestra per usare Power Apps Studio in una finestra separata.
Seleziona l'app Idee per aprire Power Apps Studio in Teams e iniziare a modificare l'app.
Nel menu in alto, seleziona i puntini di sospensione verticali a destra dell'opzione Impostazioni. Vedrai tre opzioni: Power Automate, Raccolte e Variabili.
Scegli Power Automate per aprire il menu dell'intestazione laterale Dati a destra. Vedrai tutti i flussi disponibili.
Scegli Crea un nuovo flusso. Vedrai Power Automate Studio in una finestra del browser separata. Verifica di essere nell'ambiente corretto per il team che contiene l'app che stai tentando di modificare prima di continuare.
Nell'area in alto a sinistra, vedrai che il flusso ha il nome Senza titolo. Seleziona quel testo per cambiare il nome in Scheda adattiva Idee dipendenti per Teams.
Aggiungi il trigger Power Apps per permetterci di attivare il flusso da Power Apps e aggiungere valori da passare da Power Apps a Power Automate.
Seleziona +Nuovo passaggio per aggiungere un nuovo passaggio > seleziona l'azione Recupera una riga per ID e per ID riga > seleziona l'area del campo Valore per svelare il menu di contenuto dinamico > seleziona Chiedi in Power Apps. Questa azione creerà una variabile nel trigger Power Apps consentire il passaggio dei dati dall'app a Power Automate.
Quindi, aggiungi due azioni Inizializza variabile. Queste azioni verranno utilizzate per memorizzare le informazioni da Power Apps e per archiviare un collegamento all'app Idee che verrà utilizzato nella scheda adattiva per collegarsi direttamente al record. Rinomina ciascuna delle azioni come segue:

Inizializza variabile - Titolo scheda
- Nome = varCardTitle
- Tipo = Stringa
Inizializza variabile - Campagna
- Nome = varCampaign
- Tipo = Stringa

Imposta ciascuno dei valori Tipo su Stringa e aggiungi un nome per ciascuno: varCardTitle, varCampaign e varReviewIdeasLink, rispettivamente.
Per le azioni Titolo scheda e Campagna, seleziona l'area del campo Valore per visualizzare il menu Contenuto dinamico, quindi seleziona Chiedi in Power Apps. Questa configurazione creerà una variabile nel trigger Power Apps consentire il passaggio dei dati dall'app a Power Automate.
Per l'azione Rivedi collegamento idee, useremo il collegamento all'app. Per trovare questo collegamento, apri il team in cui è installata l'app Idee e copia il collegamento per la scheda in cui è installata l'app. Puoi copiare il collegamento nella scheda aprendo la scheda, quindi selezionando i puntini di sospensione (...) nell'angolo in alto a destra.

L'URL sarà simile all'esempio seguente:

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
Per continuare, copia la parte dell'URL che viene dopo context= e usa un decodificatore URL come https://www.urldecoder.org/ per decodificare il testo.
Copia il testo decodificato e torna al flusso di Power Automate.
Aggiungi un nuovo passaggio al flusso per inizializzare una variabile.
- Rinomina il passaggio in Inizializza variabile - Rivedi collegamento idee.
- Nome impostato = varReviewIdeasLink
- Seleziona tipo = Stringa
- Immetti valore = {incolla il testo copiato dall'URL decodificato sopra}
Aggiungi un nuovo passaggio con l'azione Componi e nel campo Input incolla il seguente codice:
```
replace(replace(replace(variables('varReviewIdeasLink'),'{','%7B'),'"','%22'),'}','%7D')
```
Aggiungi un'azione Pubblica scheda adattiva in una chat o un canale. Imposta il valore Pubblica come su Utente e il valore Pubblica in su Canale. Nei campi Team e Canale, seleziona il team e il canale in cui vuoi pubblicare la scheda adattiva.

Il seguente codice è solo un esempio, anche se puoi progettare le tue schede.

Suggerimento

Puoi saperne di più sulle carte adattive su https://adaptivecards.io/ e progettare le tue schede in un editor visivo su https://adaptivecards.io/designer/.

Nel campo Scheda adattiva, copia e incolla quanto segue:

{

"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"

}

Nel campo Oggetto, copia e incolla il codice seguente:

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

Passaggio di pubblicazione della scheda adattiva in Teams.

Questa azione imposterà le caratteristiche della scheda adattiva e utilizzerà le variabili da Power Apps nella scheda adattiva.

Salva e testa il flusso per assicurarti che funzioni correttamente. La selezione manuale dall'intestazione laterale del flusso di test ti consentirà di inserire le variabili Titolo scheda, Campagna e Rivedi collegamento idee.

Aggiungere il flusso all'app Idee

Dopo aver verificato che il flusso funzioni correttamente, puoi aggiungerlo all'app Idee.

Torna all'istanza di Power Apps Studio in cui era in corso la modifica dell'app Idee.
Nella visualizzazione ad albero sul lato sinistro, seleziona la schermata dei dettagli della campagna.
Quindi, seleziona il pulsante Invia idea (denominato btnCampaignIdeaControls_Submit nella visualizzazione ad albero). Aggiungeremo il flusso di Power Automate che abbiamo creato a questo pulsante.
Innanzitutto, copieremo il codice attualmente nella proprietà OnSelect del pulsante. Un problema legato all'aggiunta di flussi di Power Automate ai controlli in Power Apps è che tutto il codice esistente nel controllo verrà rimosso. Per aggirare questo problema, incolla il codice copiato in un editor di testo, ad esempio Blocco note, e modificalo per incollarlo nuovamente nella proprietà OnSelect al termine dell'operazione. Dopo aver incollato il codice, assicurati che tutto il codice sia stato aggiunto.

Con il pulsante ancora selezionato, seleziona i puntini di sospensione verticali a destra di Impostazioni nella barra dei menu in alto. Seleziona Power Automate, in modo da visualizzare l'intestazione laterale Dati. Ora dovresti vedere il flusso Scheda adattiva delle idee dei dipendenti ai team nella sezione Flussi disponibili. Selezionalo per aggiungerlo al pulsante.

Ora dovrai modificare il codice incollato. Trova e rimuovi il seguente testo:

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

)

)

);

Dove si trovava il testo rimosso, incolla il seguente codice:

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

Questo codice contiene il riferimento al flusso appena aggiunto e le variabili da passare a Power Automate.

Copia l'intero testo che è stato modificato e incollalo nuovamente nella proprietà OnSelect del pulsante Invia ispezione. Verifica che non ci siano errori sul pulsante.

Aggiornare l'app per aprire il record effettivo utilizzando il collegamento Scheda adattiva

Ora aggiorneremo l'app per accettare il parametro del collegamento ipertestuale e supportare il collegamento diretto ai record.

La scheda adattiva ha un collegamento che dovrebbe riportarci al record Idea che è stato creato. Dobbiamo apportare alcune modifiche alla pagina di caricamento dell'app per caricare i dati appropriati.

Dalla visualizzazione ad albero, seleziona la schermata di caricamento. Seleziona quindi il contenitore conLoading_HiddenHelper e sotto quello seleziona tmrLoadingDelay.
Seleziona la proprietà OnTimerEnd del controllo timer e nota che è presente una condizione IF denominata If(gblAppLoaded,----------).

Sostituisci l'intera condizione IF con la seguente condizione IF (sono stati aggiunti alcuni altri controlli insieme ai controlli originali).

Nota

Questo codice viene modificato per includere il collegamento diretto al record dell'idea specifica nel caso in cui l'app venga aperta dalla scheda adattiva. Ci sono alcune raccolte/valori che devono essere definiti prima che la schermata venga caricata se vogliamo che si colleghi direttamente al record dell'idea specifica

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

}

)

)

)

)

Questa azione dovrebbe caricare tutti i dati richiesti in modo appropriato dopo l'apertura dell'app. L'utente che seleziona il record nella scheda adattiva verrà indirizzato all'idea appropriata.

Pubblicare l'app Idee

Tutte le modifiche all'app Idee sono state completate.
L'app ora può essere pubblicata selezionando il pulsante Pubblica in Teams in alto a destra.

Testare l'app

Accedi a Teams e vai al team in cui è installata l'app Idee.
Seleziona la scheda Idee in alto.
Si apre l'app Idee.
Seleziona una delle campagne, ad esempio Sicurezza sul lavoro.
Seleziona il pulsante Invia un'idea.
Immetti il titolo e la descrizione.
Seleziona le valutazioni per le domande elencate.
Aggiungi qualsiasi altra informazione necessaria.
Premi il pulsante Invia idea una volta che tutti i dettagli sono stati compilati.
L'idea viene inviata.
Viene inviata una notifica al team in cui è installata l'app.
Seleziona il collegamento nella notifica e verifica che il record dell'idea si apra.

Condividi tramite