Torne as ideias editáveis pelo criador original

O aplicativo de amostra Ideias do Funcionário para o Microsoft Teams fornece uma plataforma para os funcionários enviarem ideias para várias campanhas (ou seja, categorias para agrupar ideias relacionadas a temas comuns).

Com o aplicativo Ideias, os gerentes podem configurar campanhas, os usuários podem enviar ideias, visualizar as ideias de outros usuários e também votar nas ideias que mais gostam. Para personalizar a experiência, o administrador ou gerentes podem editar campanhas, especificar questões de justificativa que precisam ser respondidas pelas pessoas que enviam as ideias e também especificar a data limite para envio de ideias para a campanha. O aplicativo também inclui informações sobre quem está enviando o maior número de ideias e as ideias mais populares durante a semana.

Mas e se um usuário quiser adicionar mais detalhes sobre a ideia depois de enviá-la? O aplicativo Ideias do Funcionário padrão não fornece um botão de edição. Mas se você adicionar um botão de edição, deve ter o cuidado de limitar a ideia que um usuário pode editar, já que provavelmente não quer que alguém edite ideias que foram enviadas por outras pessoas.

Neste artigo, aprenderemos a habilitar a edição de uma ideia pelo criador original da ideia.

Observação

Antes de seguir as etapas deste artigo, leia Personalizar o aplicativo Ideias do Funcionário.

Assista a este vídeo para saber como tornar as ideias editáveis pelo criador original:

Pré-requisitos

Para concluir este tutorial, você precisará da capacidade de entrar no Microsoft Teams, que estará disponível como parte da seleção de assinaturas do Microsoft 365. Você também precisará do aplicativo de exemplo Ideias do Funcionário instalado. Este aplicativo também pode ser instalado usando o https://aka.ms/TeamsEmployeeIdeas.

Abrir o Ideias do Funcionário no Power Apps

Para abrir o aplicativo Ideias do Funcionário usando o Power Apps no Microsoft Teams:

1. Clique com o botão direito do mouse no ícone do Power Apps no painel esquerdo do Microsoft Teams.

2. Selecione a guia Compilar.

3. No painel esquerdo, selecione a equipe na qual o aplicativo Ideias do Funcionário está instalado.

4. Selecione Aplicativos instalados e, em seguida, selecione Ideias para abrir o aplicativo.

Adicionar um botão Editar à tela Detalhes da Campanha

A seguir, adicionaremos um botão para abrir uma tela de edição ao exibir ideias na tela de detalhes da campanha.

1. Selecione o modo de exibição de árvore e abra a Tela Resumo da Campanha.

2. Pressione a tecla Alt no teclado e selecione uma das campanhas a partir da parte inferior. Esta ação abre a Tela Detalhes Resumidos com a lista de ideias na campanha selecionada.

3. Selecione conCampaignIdeaControls no modo de exibição de árvore no painel esquerdo.

4. Selecione + (Inserir) e, em seguida, selecione Botão para adicionar um novo botão ao contêiner.

5. Atualize as propriedades do Botão para o seguinte:

   Propriedade	Valor
   Nome	btnCampaignIdeaControls_Edit
   Texto	"Editar"
   ButtonType	"Principal"
   X	Parent.Width - btnCampaignIdeaControls_Share.Width - Self.Width-30
   Y	(Parent.Height - Self.Height) / 2
   Largura	96
   Altura	32
   Visível	!locCreateNewIdea And locVisibleCampaignIdea

Adicionar uma nova tela

Em seguida, adicione uma tela que será usada para editar a ideia selecionada quando o botão de edição foi selecionado.

1. Selecione o modo de exibição de árvore no painel à esquerda.

2. Selecione o botão Nova tela para adicionar uma nova tela.

3. Selecione Layout em branco.

4. Renomeie a tela como "Editar Tela de Ideia".

5. Selecione a propriedade Fill da tela e defina o valor como gblAppStyles.Background.Fill na barra de fórmulas.

6. Volte para a Tela Detalhes da Campanha e selecione o botão Editar.

7. Precisamos obter os detalhes do registro de ideia atual e enviar para a tela de edição. Para fazer isso, atualize a propriedade OnSelect para o seguinte

   OnSelect = 
   
      Clear(colResponses);
   
      Collect(
   
      colResponses,
   
      {
   
      appRef: GUID(),
   
      msft_name: "Title",
   
      msft_snapshot_sequence: -2,
   
      msft_employeeidea_responsetypecode: 'Employee Idea Response Type'.'Text
      (Single Line)',
   
      msft_responsetext: gblRecordCampaignIdea.Title,
   
      msft_responserating: Blank(),
   
      msft_snapshot_ratinghightext: "",
   
      msft_snapshot_ratinglowtext: ""
   
      },
   
      {
   
      appRef: GUID(),
   
      msft_name: "Description",
   
      msft_snapshot_sequence: -1,
   
      msft_employeeidea_responsetypecode: 'Employee Idea Response Type'.'Text
      (Multiple Lines)',
   
      msft_responsetext: gblRecordCampaignIdea.Description,
   
      msft_responserating: Blank(),
   
      msft_snapshot_ratinghightext: "",
   
      msft_snapshot_ratinglowtext: ""
   
      }
   
      );
   
      Collect(
   
      colResponses,
   
      Filter(
   
      'Employee Idea Responses',
   
      Idea.msft_employeeideaid = gblRecordCampaignIdea.msft_employeeideaid
   
      )
   
      );
   
    Navigate('Edit Idea Screen')
   

Adicionar o componente de cabeçalho

O aplicativo Ideia do Funcionário usa um componente de cabeçalho para fornecer uma experiência de menu consistente entre as telas. Agora, copiaremos este componente para nossa nova tela para que os usuários possam ir para as outras telas do aplicativo quando estiverem em nossa nova tela.

1. Vá para a Tela Detalhe da Campanha.

2. Copie o contêiner comHeader_CampaignDetail dessa tela e cole-o na nova tela que acabou de adicionar.

3. Renomeie o contêiner para comHeader_CampaignDetail_EditScreen.

4. Selecione a propriedade inputHeaderSettings da comHeader_CampaignDetail_EditScreen e cole a seguinte fórmula:

   {
   
   headerLabel: "Edit Idea",
   
   headerTooltip: "Edit Idea",
   
   headerWidth: 240,
   
   headerScreen: 'Edit Idea Screen'
   
   }
   

5. Selecione a propriedade inputHelpIcon da lista de funções e exclua o conteúdo da barra de fórmulas.

6. Selecione a propriedade inputHelpScreen da lista de funções e exclua o conteúdo da barra de fórmulas.

7. Há uma chance de que o botão Vincular ainda apareça no cabeçalho, embora ele realmente não faça nada. Para remover o botão:

   • Selecione o componente do cabeçalho e vá para a guia Componentes no modo de exibição de árvore.

   • Selecione o controle btnHeaderExternalLink.

   • Selecione a propriedade Visível do controle e remova o último colchete - ")" e adicione-o novamente.

Agora, quando você volta para a tela, a propriedade visible deverá ter sido atualizada e o botão Vincular não deve mais estar visível.

Adicionar o componente de navegação do lado esquerdo

1. Volte para a Tela de Detalhe da Campanha e copie o contêiner conCampaignDetailNav.

2. Volte para a Tela Editar Ideia e cole o contêiner copiado.

3. Atualize as seguintes propriedades:

   Propriedade	Valor
   Nome	conCampaignDetailNav_EditScreen
   X	0

   Essa alteração resultará em erros, e isso é esperado. Corrigiremos isso nas próximas etapas.

4. Para o erro na fórmula imgCampaignDetail_SortGallery_1 – DisplayMode, como copiamos a fórmula de outra tela, havia uma variável que verificava se era uma ideia nova. Uma vez que esta tela é usada apenas para edição, atualize a fórmula DisplayMode para:

   If(
   
   locVisibleCampaignView,
   
   DisplayMode.Edit,
   
   locVisibleCampaignIdea,
   
   DisplayMode.Edit,
   
   DisplayMode.Disabled
   
   )
   

5. Para o erro na fórmula galCampaignDetailNav_1 – DisplayMode, como copiamos a fórmula de outra tela, havia uma variável que verificava se era uma ideia nova. Como essa tela é usada apenas para edição, atualize a fórmula DisplayMode para:

   If(
   
   locVisibleCampaignView,
   
   DisplayMode.Edit,
   
   locVisibleCampaignIdea,
   
   DisplayMode.Edit,
   
   DisplayMode.Disabled
   
   )
   

Adicionar um novo contêiner para a seção Detalhes da Ideia

Agora, adicionaremos um contêiner que incluirá a seção de detalhes da ideia em nossa tela de edição de ideia.

1. Selecione a recém-adicionada Tela Editar Ideias.

2. Selecione o botão + (Inserir) no painel esquerdo.

3. Selecione Layout > Contêiner. Um contêiner é adicionado.

4. Configure as seguintes propriedades neste contêiner.

   Propriedade	Valor
   Nome	conIdeaEditPane
   X	300
   Y	comHeader_CampaignDetail_EditScreen.Y + comHeader_CampaignDetail_EditScreen.Height
   Largura	Parent.Width - conCampaignDetailNav_EditScreen.Width
   Altura	Parent.Height - Self.Y

5. Adicione outro contêiner dentro deste novo contêiner usando as etapas acima.

6. Definir as seguintes propriedades neste contêiner

   Propriedade	Valor
   Nome	conCampaignIdeaControls_EditScreen
   X	0
   Y	0
   Largura	Parent.Width
   Altura	60

7. Vá para a Tela Detalhe da Campanha e copie os controles – btnCampaignIdeaControls_Edit, btnCampaignIdeaControls_Back e imgCampaignIdeaControls_Back.

8. Volte para a Tela Editar Ideia e selecione o contêiner adicionado anteriormente.

9. Cole os controles copiados neste contêiner.

10. Atualize a propriedade OnSelect de btnCampaignIdeaControls_Back_1 to Navigate('Campaign Detail Screen').

11. Selecione btnCampaignIdeaControls_Edit_1 e atualize as seguintes propriedades:

    Propriedade	Valor
    Texto	"Atualizar"
    Visível	true
    X	Parent.Width - Self.Width – 20
    Y	(Parent.Height - Self.Height) / 2
    Largura	96
    Altura	32

12. Precisamos adicionar uma tela ao novo contêiner adicionado anteriormente (conIdeaEditPane). Para adicionar uma tela, adicione uma nova tela rolável - Nova tela > Cenários > Rolável e copie sua tela.

13. Volte para a Tela Editar Ideia e selecione o contêiner conIdeaEditPane e cole a tela. A tela é colada no contêiner.

14. Configure as seguintes propriedades para a tela:

    Propriedade	Valor
    Nome	canvasEditScreen
    X	0
    Y	conCampaignIdeaControls_EditScreen.Y + conCampaignIdeaControls_EditScreen.Height
    Largura	Parent.Width
    Altura	Parent.Height - Self.Y

15. Volte para a Tela de Detalhe da Campanha e copie a galeria galIdeaResponses.

16. Volte para a Tela Editar Ideia e selecione a tela adicionada na etapa anterior.

17. Cole a galeria na tela.
    Um erro pode aparecer na propriedade BorderThickness de shpIdeaResponseRating_Value_1.

18. Defina as propriedades em galIdeaResponses:

    Propriedade	Valor
    BorderThickness	If((ThisItem.appRefNo <> ThisItem.appRatingValue),1,0)
    X	0
    Y	0

19. Queremos fazer com que a experiência de edição seja consistente com a experiência da nova ideia, por isso vamos atualizar a propriedade Items de galIdeaResponseRating_1 para o seguinte:

    With(
        {varRecord: ThisItem},
        Table(
            {
            appRefNo: 1,
            appRef: varRecord.'Employee Idea Response',
            appRatingValue: varRecord.'Response Rating',
            appRatingTextLow: varRecord.'Rating Text (Low)',
            appRatingTextHigh: varRecord.'Rating Text (High)'
            },
            {
            appRefNo: 2,
            appRef: varRecord.'Employee Idea Response',
            appRatingValue: varRecord.'Response Rating',
            appRatingTextLow: varRecord.'Rating Text (Low)',
            appRatingTextHigh: varRecord.'Rating Text (High)'
            },
            {
            appRefNo: 3,
            appRef: varRecord.'Employee Idea Response',
            appRatingValue: varRecord.'Response Rating',
            appRatingTextLow: varRecord.'Rating Text (Low)',
            appRatingTextHigh: varRecord.'Rating Text (High)'
            },
            {
            appRefNo: 4,
            appRef: varRecord.'Employee Idea Response',
            appRatingValue: varRecord.'Response Rating',
            appRatingTextLow: varRecord.'Rating Text (Low)',
            appRatingTextHigh: varRecord.'Rating Text (High)'
            },
            {
            appRefNo: 5,
            appRef: varRecord.'Employee Idea Response',
            appRatingValue: varRecord.'Response Rating',
            appRatingTextLow: varRecord.'Rating Text (Low)',
            appRatingTextHigh: varRecord.'Rating Text (High)'
            }
        )
    )    
    

20. Atualize a propriedade OnSelect de imgIdeaResponseRating_Select_1:

    UpdateIf(
        colResponses,
        colResponses[@'Employee Idea Response'] = ThisItem.appRef,
        {msft_responserating: ThisItem.appRefNo}
    );
    

21. Precisamos copiar os controles de dtcFilesImages da Tela Detalhe da Campanha para a tela.

    

22. Selecione para expandir a Tela Editar Ideias.

23. Selecione galIdeaResponses_2 e cole os controles copiados. Ao colar os controles, você também verá alguns erros:

    

24. Todos os erros, exceto um, estão relacionados à visibilidade dos controles. Você pode selecionar o erro e selecionar Editar na Barra de Fórmulas.

25. Defina a propriedade Visível para todos esses controles como verdadeira.

26. Haverá um erro para lbldeaFiles_Header_2 na propriedade Text.

27. Atualize a propriedade Text para "Attachments".

28. Atualize a propriedade Y de lbldeaFiles_Header_1 para "galIdeaResponses_1.Y + galIdeaResponses_1.Height + 20".

29. Selecione o ícone Excluir da seção de anexos imgIdeaFile_Delete_1, e defina a propriedade OnSelect como Remove(colFiles,ThisItem);Collect(colRemovedFiles,ThisItem).

30. Selecione o datacard que foi adicionado junto com a tela e atualize as seguintes propriedades.

    Propriedade	Valor
    X	0
    Y	0
    Largura	Parent.Width
    Altura	galIdeaFiles_1.Y + galIdeaFiles_1.Height + 20

31. Selecione galIdeaFiles_1 sob o datacard.

32. Selecione a propriedade OnSelect e defina-a como Launch(ThisItem.msft_file.Value).

33. Agora definiremos o botão para corrigir e atualizar a ideia selecionada. Selecione o botão Atualizar da Tela Editar Ideia – Contêiner 3 e defina a propriedade OnSelect para a seguinte fórmula:

    UpdateContext({locSelectedIdea: gblRecordCampaignIdea.'Employee Idea'});
    
    Patch(
    
    'Employee Ideas',
    
    gblRecordCampaignIdea,
    
    {
    
    Title: LookUp(
    
    colResponses,
    
    Sequence = -2,
    
    msft_responsetext
    
    ),
    
    Description: LookUp(
    
    colResponses,
    
    Sequence = -1,
    
    msft_responsetext
    
    ),
    
    'Attachment Count': CountRows(
    
    Filter(
    
    colFiles,
    
    appIsNew
    
    )
    
    )
    
    }
    
    );
    
    ForAll(
    
    RenameColumns(
    
    Filter(
    
    colResponses,
    
    Sequence >= 0,
    
    !IsBlank('Employee Idea Response')
    
    ),
    
    "msft_employeeidea_responseid",
    
    "ResponseId"
    
    ),
    
    Patch(
    
    'Employee Idea Responses',
    
    LookUp(
    
    'Employee Idea Responses',
    
    'Employee Idea Response' = ResponseId
    
    ),
    
    {
    
    Instructions: ThisRecord.Instructions,
    
    Question: ThisRecord.msft_employeeidea_questionid,
    
    Sequence: ThisRecord.Sequence,
    
    'Response Type': ThisRecord.'Response Type',
    
    'Response Text': ThisRecord.'Response Text',
    
    'Response Rating': ThisRecord.'Response Rating',
    
    'Rating Text (Low)': ThisRecord.'Rating Text (Low)',
    
    'Rating Text (High)': ThisRecord.'Rating Text (High)'
    
    }
    
    )
    
    );
    
    ForAll(
    
    Filter(
    
    colFiles,
    
    appIsNew
    
    ),
    
    Patch(
    
    'Employee Idea Files',
    
    Defaults('Employee Idea Files'),
    
    {
    
    Idea: gblRecordCampaignIdea,
    
    Name: Text(ThisRecord.msft_name),
    
    File: {
    
    FileName: Text(ThisRecord.msft_name),
    
    Value: ThisRecord.appFileValue
    
    }
    
    }
    
    )
    
    );
    
    ForAll(
    
    colRemovedFiles,
    
    Remove(
    
    'Employee Idea Files',
    
    ThisRecord
    
    )
    
    );
    
    Set(
    
    gblRecordCampaignIdea,
    
    LookUp(
    
    'Employee Ideas',
    
    'Employee Idea' = locSelectedIdea
    
    )
    
    );
    
    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(
    
    gblRecordCampaignIdea,
    
    LookUp(
    
    'Employee Ideas',
    
    'Employee Idea' = locSelectedIdea
    
    )
    
    );
    
    Navigate(
    
    'Campaign Detail Screen',
    
    ScreenTransition.None,
    
    {
    
    locVisibleCampaignIdea: true,
    
    locVisibleCampaignView: false,
    
    locCreateNewIdea: false
    
    }
    
    )
    
    ## 
    

Publicar o aplicativo Ideias

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

Testar o aplicativo

Por fim, vamos testar o aplicativo e tentar editar uma ideia.

1. Entre no Teams e vá para a equipe em que o aplicativo Ideias está instalado.

2. Selecione a guia Ideias na parte superior.

3. Selecione uma das campanhas, por exemplo, Segurança do Local de Trabalho.

4. Abra uma ideia que foi criada pelo seu usuário - a ideia deve dizer por quem a ideia foi criada.

5. Verifique se o botão Editar aparece na Tela Detalhes da Campanha.

   

6. Selecione o botão Editar e verifique se a tela Editar Ideia abre.

7. Verifique se todos os detalhes são exibidos na tela.

   

8. Faça algumas alterações na ideia e selecione o botão Atualizar.

9. Verifique se você é levado de volta à tela Detalhes da Ideia da Campanha e todas as alterações feitas foram salvas e se estão visíveis nessa tela.

Consulte também

• Entenda a arquitetura do aplicativo Ideias do Funcionário
• Personalizar aplicativos de exemplo
• Perguntas frequentes sobre aplicativos de exemplo
• Usar aplicativos de exemplo da loja do Teams

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).