Usar o aplicativo de exemplo Instruções (versão preliminar)

[Este artigo faz parte da documentação de pré-lançamento e está sujeito a alterações.]

O aplicativo de modelo Instruções para o Microsoft Teams fornece uma maneira simples de aprender como ser um criador do Power Apps, acompanhando você passo a passo pelo projeto do modelo de dados, pelas telas e pela conexão das telas para criar uma solução completa de check-out de ativos do Power Apps.

Benefícios de usar o aplicativo Instruções:

• Entender as noções básicas do Power Apps.
• Saber como criar aplicativos no Teams.
• Compartilhar o aplicativo de check-out de ativos que você criou com colegas no Teams.
• Torne-se um criador

Observação

Antes de usar o aplicativo, é possível que suas permissões para usar a conexão sejam solicitadas. Mais Informações: Permitir conexões em aplicativos de exemplo Este aplicativo está disponível em três temas diferentes do Teams: padrão, escuro e alto contraste. Quando você muda o tema no Teams, o aplicativo é atualizado automaticamente para corresponder ao tema selecionado. Mais informações: Obter o tema do Teams usando o objeto de integração do Teams

Importante

• Esse é um recurso de visualização.
• Os recursos de visualização não foram criados para uso em ambientes de produção e podem ter funcionalidade restrita. Esses recursos são disponibilizados antes de um lançamento oficial para que os clientes possam ter acesso antecipado e fornecer comentários.

Pré-requisitos

Antes de usar este aplicativo:

1. Instale o aplicativo Instruções.
2. Configure o aplicativo para o primeiro uso.

Para obter detalhes sobre as etapas acima, vá para Usar aplicativos de exemplo da store do Teams.

Criando um aplicativo de Gerenciamento de ativos

No aplicativo Instruções, criaremos um aplicativo de gerenciamento de ativos para permitir que os usuários façam check-out de ativos na biblioteca e os retornem quando terminarem. As instruções estão incluídas no aplicativo e os criadores que abrem o aplicativo no Power Apps no Teams verão as instruções no studio.

Este artigo inclui as etapas do aplicativo para os criadores que preferem lê-las fora do aplicativo. Por exemplo, você tem dois monitores e quer que as instruções fiquem abertas em outra tela ou talvez queira imprimi-las.

Na tela principal, você pode ver um resumo das etapas para criar o aplicativo Instruções e tem a possibilidade de visualizar o aplicativo.

Selecionar Introdução ao Power Apps levará você para o aplicativo Teams do Power Apps, de onde você pode iniciar a jornada do criador. Selecionar Visualizar Aplicativo redirecionará o usuário para a tela de ativos, de onde o usuário poderá usar o aplicativo de check-out de ativos e ver como será a experiência final quando o aplicativo estiver terminado.

No aplicativo de check-out de ativos, selecionar um item o levará para uma tela onde é possível fazer o check-out do item.

No canto superior esquerdo, é possível selecionar o ícone para fazer o check-out de itens, que estão disponíveis em sua conta.

Começar sua jornada de criador no Instruções

Instruções é uma lição independente sobre como criar um Power Apps. Todas as instruções estão incluídas no aplicativo. Para começar a aprender, abra o aplicativo Instruções usando o aplicativo do Power Apps no Teams:

1. No Teams, selecione ... (reticências) no painel esquerdo.

2. Procure Power Apps e selecione o aplicativo do Power Apps.

3. Clique com o botão direito no botão Power Apps e selecione Destacar aplicativo para iniciar o aplicativo do Power Apps em uma nova janela para torná-lo mais fácil de usar.

4. Selecione a guia Compilar.

5. Selecione a equipe com o Instruções instalado.

6. Selecione Aplicativos instalados.

7. No bloco Instruções, selecione o aplicativo Instruções. O aplicativo será aberto no aplicativo do Power Apps.

   

8. Na exibição de árvore, selecione Tela de visão geral.

   

Compreendendo a tela de visão geral

A tela de visão geral é o seu guia para a jornada do criador. Na tela de visão geral, você pode ver em que parte está no processo. Para iniciar uma etapa, mantenha pressionada a tecla Alt no teclado e selecione o botão Iniciar. Isso levará você para a tela relevante, na qual verá as instruções para concluir a etapa.

Quando terminar, retorne à tela de visão geral e selecione o botão no bloco da etapa atual para concluir a etapa e passar para a próxima lição.

Redefinindo seu progresso no Instruções

Portanto, se você começou a fazer as lições no Instruções e decidir que gostaria de começar de novo, é possível reiniciar o processo seguindo estas etapas:

1. Clique com o botão direito no aplicativo do Power Apps no Teams e selecione Pop-out.

2. Selecione a guia Compilar.

3. Selecione a equipe na qual o aplicativo Instruções está instalado.

4. Selecione a guia Aplicativos instalados.

5. No bloco Instruções. selecione Ver tudo.

6. Selecione Tabelas.

7. Selecione Estágios do Aplicativo de Check-Out de Itens.

8. Selecione Editar dados.

9. Selecione as linhas da tabela.

10. Selecione Excluir registro(s).

Saiba como trabalhar com modelos de dados

Nesta etapa, adicionaremos três tabelas. Criando os nomes das tabelas como tipos de itens, itens e check-outs de itens. As tabelas são criadas para armazenar os dados.

Para obter instruções detalhadas sobre como criar tabelas, consulte Editar os dados da tabela no Excel e publicá-la de volta no Dataverse for Teams

Crie as seguintes tabelas e colunas:

Tipo de Item

Nome da coluna	Tipo de data	Valor
Administrador do Check-out	Texto	Não aplicável
Endereço de check-out	Texto	Não aplicável

Item

Nome da coluna	Tipo de data	Valor
Quantidade	Número inteiro	Não aplicável
Descrição	Texto com várias linhas	Não aplicável
Image	Image	Não aplicável
Tipo de Item	Pesquisar	Tabela relacionada = Tipo de Item

Check-out de Item

Nome da coluna	Tipo de data	Valor
Nome	Numeração automática	Não aplicável
Item	Pesquisar	Tabela relacionada = Item
Motivo do Check-out	Opção	Trabalho remoto, nova atribuição de projeto
Opção de Check-out	Opção	Retirada, Entrega
Duração do Check-out	Opção	7 dias, 30 dias
Status do Check-out	Opção	Ativo, Devolvido

Dados de Exemplo

Nesta etapa, precisamos adicionar dados às tabelas que criamos anteriormente. Esses dados serão os itens e tipos de itens para o processo de check-out de ativos. Por exemplo, se estiver usando este aplicativo para gerenciar itens como mouses e teclados, você poderá definir tipos de itens como computadores, telefones ou mesas que as pessoas podem fazer check-out.

Usaremos a grade editável da tabela para preencher os dados de exemplo no aplicativo. Para usar a grade editável da tabela, siga estas etapas:

1. Abra o aplicativo do Power Apps no Teams.

2. Selecione a guia Compilar.

3. Selecione a equipe na qual o aplicativo Instruções está instalado.

4. Selecione a guia Aplicativos instalados.

5. No bloco Instruções. selecione Ver tudo.

6. Selecione Tabelas.

7. Selecione Estágios do Aplicativo de Check-Out de Itens.

8. Selecione Editar dados.

Observação

A grade editável da tabela não pode importar fotos.

A tela de dados de exemplo inclui uma galeria que permite selecionar itens que foram criados na etapa anterior e associar imagens a eles.

Componentes de IU

Nesta etapa, vamos aprender sobre os controles predefinidos, como botões, para criar os aplicativos. Este aplicativo foi criado na estrutura Fluid UI. Os novos controles são Button, Check box, Combo box, Date picker, Label, Radio group, Rating, Slider, Text box e Toggle.

Para saber mais sobre a estrutura e os controles da Fluid UI, acesse Estrutura Fluid UI e Usar os controles da Fluid UI para Power Apps no Teams.

Criando a tela de ativos

Nesta etapa, vamos criar sua primeira tela que exibe os itens disponíveis para check-out. Esta será a tela principal do aplicativo, na qual os usuários encontrarão itens e os selecionarão para fazer check-out.

Siga estas etapas para iniciar a criação de seu aplicativo.

1. O contêiner horizontal conItemTypes será usado para conter um rótulo de cabeçalho e uma galeria de tipos de itens. Defina suas propriedades conforme mostrado abaixo:

   Propriedade	Valor
   Nome	conItemTypes
   Lacuna	20
   Estouro Vertical	LayoutOverflow.Scroll
   Largura Mínima	300
   Preenchimento Superior	20
   Preenchimento Inferior	20
   Preenchimento	If(gblThemeDark.ColorValue("#141414"), gblThemeHiCo,Black,White)

2. Adicione um novo contêiner horizontal a conItemTypes – conItemTypesHeader. Ele conterá um rótulo de cabeçalho e uma imagem.

   Propriedade	Valor
   Nome	conItemTypesHeader
   Preenchimento Direito	10
   Altura Mínima	0
   Altura	32
   Preenchimento Esquerdo	20

3. Adicione um rótulo a conItemTypesHeader – lblAllAssetsHeader. É um rótulo de cabeçalho para a tela.

   Propriedade	Valor
   Nome	lblAllAssetsHeader
   Fonte	Segoe UI
   Espessura da fonte	Negrito
   Altura	32
   Largura Flexível	true
   X	20
   Texto	"Todos os ativos"

4. Adicione uma imagem a conItemTypesHeader – imgCheckout. Ela será usada para levar os usuários até seus check-outs existentes.

   Propriedade	Valor
   Nome	imgCheckout
   Altura	32
   Largura	32
   Image	If(gblThemeDark||gblThemeHiCo,Checkout_Dark,Checkout)

5. Adicione uma galeria vertical em branco a conItemTypes – galItemTypes. É uma galeria de tipos de itens. Selecionar um tipo de item exibirá os itens relacionados.

   Propriedade	Valor
   Nome	galItemTypes
   Itens	Tipos de Item
   Altura Mínima	0
   Preencher Partes	19
   Tamanho do Modelo	74
   Preenchimento do Modelo	0
   OnSelect	UpdateContext({ locSelectedItemType: ThisItem, locShowItems: true })
   Preenchimento do Modelo	If(!('Items Screen'.Size = ScreenSize.Small), If(ThisItem.IsSelected, ColorValue("#E2E2F6"), Transparent), Transparent)

6. Adicione um rótulo a galItemTypes – lblName. É um rótulo para exibir o nome do tipo de item.

   Propriedade	Valor
   Nome	lblName
   Largura	Parent.Width
   Altura	32
   X	20
   a	5
   Texto	ThisItem.Name
   Espessura da fonte	If(ThisItem.IsSelected,FontWeight.Semibold,FontWeight.Normal)
   Tamanho da Fonte	10.5

7. Adicione um rótulo a galItemTypes – lblItemCount. É um rótulo para exibir a contagem de itens pertencentes a um determinado tipo de item.

   Propriedade	Valor
   Nome	lblItemCount
   Largura	Parent.Width
   Altura	32
   X	20
   a	lblName.Y + lblName.Height
   Texto	CountRows(ThisItem.Items.Item) & " items"
   Tamanho da Fonte	10.5

8. O contêiner horizontal conItems será usado para conter um rótulo de cabeçalho e uma galeria de itens para o tipo de item selecionado. Defina suas propriedades conforme mostrado abaixo:

   Propriedade	Valor
   Nome	conItems
   Lacuna	20
   Preenchimento Superior	20
   Preenchimento Esquerdo	20
   Preenchimento Direito	20
   Estouro Vertical	Overflow.Scroll

9. Adicione um rótulo a conItems – lblRelatedItemsHeader. É um rótulo para exibir a contagem de itens relacionados ao tipo de item selecionado.

   Propriedade	Valor
   Nome	lblRelatedItemsHeader
   Texto	CountRows(locSelectedItemType.Items.Item) & " items available"
   Alinhar no contêiner	AlignInContainer.Stretch
   Espessura da fonte	FontWeight.Semibold
   Tamanho da Fonte	15
   X	707*1
   Y	265*1

10. Adicione uma galeria vertical em branco a conItems – galItems. Esta é a galeria que exibirá itens que pertencem ao tipo de item selecionado.

    Propriedade	Valor
    Nome	galItems
    Itens	locSelectedItemType.Items
    TemplateSize	130

11. Adicione um botão a galItems – btnItemsBackground. Isso é para adicionar um fundo branco para cada item.

    Propriedade	Valor
    Nome	btnItemsBackground
    X	5
    a	0
    Preenchimento	Branco
    Altura	Parent.TemplateHeight - 20
    Largura	Parent.TemplateWidth - Self.X*2

12. Adicione uma imagem a galItems – imgItem. Isso é para exibir a imagem ou logotipo do item.

    Controlar	Propriedade	Valor
    Adicionar uma imagem a galItems	Nome	imgItem
    imgItem	X	5
    imgItem	Y	0
    imgItem	Largura	125
    imgItem	Altura	110
    imgItem	ImagePosition	ImagePosition.Fill
    imgItem	Image	ThisItem.Image.Full

13. Adicione um rótulo a galItems – lblItemName. Isso é para exibir o nome do item.

    Propriedade	Valor
    Nome	lblItemName
    Y	imgItem.Y + 5
    X	imgItem.X + imgItem.Width +20
    Texto	ThisItem.Name
    Largura	btnItemsBackground.Width - Self.X
    Tamanho da Fonte	10.5
    FontWeight	FontWeight.Semibold

14. Adicione um rótulo a galItems – lblItemQuantity. Isso é para exibir a contagem de um item disponível para check-out.

    Propriedade	Valor
    Nome	lblItemQuantity
    X	lblItemName.X
    Y	lblItemName.Y + lblItemName.Height
    Texto	ThisItem.Quantity-CountRows(Filter('Item Checkouts',Item.Item=ThisItem.Item,'Checkout Status'='Checkout Statuses'.Active))&" available"
    Alinhamento vertical	Inferior
    Largura	btnItemsBackground.Width - Self.X
    Tamanho da Fonte	10.5

15. Adicione um rótulo a galItems – lblItemDesc. Isso é para exibir a descrição do item.

    Propriedade	Valor
    Nome	lblItemDesc
    X	lblItemName.X
    Y	lblItemQuantity.Y + lblItemQuantity.Height
    Texto	ThisItem.Description
    Alinhamento vertical	Inferior
    Largura	btnItemsBackground.Width - Self.X
    Encapsulamento	false

16. Adicione um botão a galItems – btnItemsForeground. Este é um botão de sobreposição para tornar a linha inteira selecionável.

    Valor	Propriedade
    btnItemsForeground	Nome
    RGBA(128, 128, 128, 0,06)	HoverFill
    Transparente	Todos os outros Preenchimentos, exceto Preenchimento ao Focalizar
    btnItemsBackground.X	X
    btnItemsBackground.Y	Y
    btnItemsBackground.Width	Largura

Agora defina a propriedade Preencher Partes para os controles conItems e conItemTypes como mostrado abaixo. Os tipos de item cobrem 25% da tela e os 75% restantes são cobertos pela lista de itens.

Controlar	Propriedade	Valor
conItems	Preencher Partes	3
conItemTypes	Preencher Partes	1

Criando a tela de check-out

Nesta etapa, vamos criar a segunda tela, a tela de check-out de itens. Esta tela exibe os detalhes do item para check-out e a quantidade disponível.

Nessa tela, o usuário fornece detalhes do motivo do check-out, a duração e outros detalhes e inicia o processo de check-out.

Controlar	Propriedade	Valor
Tela de Check-out	OnVisible	UpdateContext({locShowCheckoutConfirmation: false})
contêiner pai	Nome	conParent_Checkout
1º contêiner filho	Nome	conItemTypes_Checkout
2º contêiner filho	Nome	conCheckout
conItemTypes_Checkout	Lacuna	20
conItemTypes_Checkout	Estouro Vertical	LayoutOverflow.Scroll
conItemTypes_Checkout	Largura Mínima	300
conItemTypes_Checkout	Preenchimento Superior	20
conItemTypes_Checkout	Preenchimento Inferior	20
conItemTypes_Checkout	Preenchimento	If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White)

1. Adicione um contêiner Horizontal ao controle conItemTypes_Checkout – conItemTypesHeader_Checkout.

   Controlar	Propriedade	Valor
   Adicionar um contêiner Horizontal a conItemTypes_Checkout	Nome	conItemTypesHeader_Checkout
   conItemTypesHeader_Checkout	Preenchimento Esquerdo	20
   conItemTypesHeader_Checkout	Preenchimento Direito	20
   conItemTypesHeader_Checkout	Altura Mínima	0
   conItemTypesHeader_Checkout	Altura	32

2. Adicione um rótulo ao controle conItemTypesHeader_Checkout – lblAllAssetsHeader_Checkout.

   Controlar	Propriedade	Valor
   Adicionar um rótulo a conItemTypesHeader_Checkout	Nome	lblAllAssetsHeader_Checkout
   lblAllAssetsHeader_Checkout	Fonte	Segoe UI
   lblAllAssetsHeader_Checkout	Espessura da Fonte	Negrito
   lblAllAssetsHeader_Checkout	Altura	32
   lblAllAssetsHeader_Checkout	Largura Flexível	true
   lblAllAssetsHeader_Checkout	Texto	"Todos os ativos"
   lblAllAssetsHeader_Checkout	Tamanho da Fonte	15
   lblAllAssetsHeader_Checkout	Largura Mínima	150

3. Adicione uma imagem ao controle conItemTypesHeader_Checkout – imgCheckout_Checkout.

   Controlar	Propriedade	Valor
   Adicionar uma imagem a conItemTypesHeader_Checkout	Nome	imgCheckout_Checkout
   imgCheckout_Checkout	Altura	32
   imgCheckout_Checkout	Peso	32
   imgCheckout_Checkout	Image	If(gblThemeDark||gblThemeHiCo,Checkout_Dark,Checkout)

4. Adicione uma galeria vertical em branco ao controle conItemTypes_Checkout control – galItemTypes_Checkout.

   Controlar	Propriedade	Valor
   Adicionar uma galeria vertical em branco a conItemTypes_Checkout	Nome	galItemTypes_Checkout
   galItemTypes_Checkout	Itens	Tipos de Item
   galItemTypes_Checkout	Altura Mínima	0
   galItemTypes_Checkout	Preencher Partes	19
   galItemTypes_Checkout	Tamanho do Modelo	74
   galItemTypes_Checkout	Preenchimento do Modelo	0
   	Preenchimento do Modelo	If(ThisItem.IsSelected, ColorValue("#E2E2F6"), Transparent)

5. Adicione um rótulo ao controle galItemTypes_Checkout – lblIName_Checkout.

   Controlar	Propriedade	Valor
   Adicionar um rótulo a galItemTypes_Checkout	Nome	lblIName_Checkout
   lblIName_Checkout	Largura	Parent.Width
   lblIName_Checkout	Altura	32
   lblIName_Checkout	X	20
   lblIName_Checkout	Y	5
   lblIName_Checkout	Texto	ThisItem.Name
   lblIName_Checkout	Espessura da fonte	If(ThisItem.IsSelected,FontWeight.Semibold,FontWeight.Normal)

6. Adicione um rótulo ao controle galItemTypes_Checkout – lblItemCount_Checkout.

   Controlar	Propriedade	Valor
   Adicionar um rótulo a galItemTypes_Checkout	Nome	lblItemCount_Checkout
   lblItemCount_Checkout	Largura	Parent.Width
   lblItemCount_Checkout	Altura	32
   lblItemCount_Checkout	X	20
   lblItemCount_Checkout	Y	lblIName_Checkout.Y + lblIName_Checkout.Height
   lblItemCount_Checkout	Texto	CountRows(ThisItem.Items.Item) & " items"

7. Agora defina a propriedade Preencher Partes para os controles conMyCheckouts e conItemTypes_MyCheckouts como mostrado abaixo. Os tipos de item cobrem 25% da tela e os 75% restantes são cobertos pela lista de meus check-outs.

   Controlar	Propriedade	Valor
   conCheckout	Lacuna	10
   conCheckout	Preenchimento Superior	20
   conCheckout	Preenchimento Esquerdo	20
   conCheckout	Preenchimento Direito	20
   conCheckout	Estouro Vertical	Overflow.Scroll
   conCheckout	Visível	!locShowCheckoutConfirmation

8. Adicione um rótulo ao controle conCheckout – lblCheckoutHeader.

   Controlar	Propriedade	Valor
   Adicionar um rótulo a conCheckout	Nome	lblCheckoutHeader
   lblCheckoutHeader	Texto	"Check-out"
   lblCheckoutHeader	Altura	32
   lblCheckoutHeader	AlignInContainer	AlignInContainer.Stretch
   lblCheckoutHeader	Tamanho da Fonte	15
   lblCheckoutHeader	Espessura da Fonte	Seminegrito

9. Adicione uma imagem ao controle conCheckout – imgItem_Checkout.

   Controlar	Propriedade	Valor
   Adicionar uma imagem a conCheckout	Nome	imgItem_Checkout
   imgItem_Checkout	Image	locSelectedItem.Image.Full
   imgItem_Checkout	Largura	375
   imgItem_Checkout	Altura	300
   imgItem_Checkout	Raio da Borda	8

10. Adicione um rótulo ao controle conCheckout – lblItemName_Checkout.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckout	Nome	lblItemName_Checkout
    lblItemName_Checkout	Texto	locSelectedItem.Name
    lblItemName_Checkout	Altura	32

11. Adicione um rótulo ao controle conCheckout – lblItemQuantity_Checkout.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckout	Nome	lblItemQuantity_Checkout
    lblItemQuantity_Checkout	Texto	locSelectedItem.Quantity-CountRows(Filter('Item Checkouts',Item.Item=locSelectedItem.Item,'Checkout Status'='Checkout Statuses'.Active))&" available"
    lblItemQuantity_Checkout	Altura	32

12. Adicione um rótulo ao controle conCheckout – lblItemDesc_Checkout.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckout	Nome	lblItemDesc_Checkout
    lblItemDesc_Checkout	Texto	locSelectedItem.Description
    lblItemDesc_Checkout	Altura	59

13. Adicione um rótulo ao controle conCheckout – lblCheckoutOptionsHeader.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckout	Nome	lblCheckoutOptionsHeader
    lblCheckoutOptionsHeader	Texto	"Como você deseja coletar o item?"
    lblCheckoutOptionsHeader	Altura	32

14. Adicione um Grupo de Opção ao controle conCheckout – rdoCheckoutOptions.

    Controlar	Propriedade	Valor
    Adicionar um grupo de opção a conCheckout	Nome	rdoCheckoutOptions
    rdoCheckoutOptions	Itens	Choices('Checkout Options')
    rdoCheckoutOptions	Altura	50
    rdoCheckoutOptions	Campos	Valor

15. Adicione um rótulo ao controle conCheckout – lblCheckoutDurationHeader.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckout	Nome	lblCheckoutDurationHeader
    lblCheckoutDurationHeader	Texto	"Por quanto tempo você deseja manter o item?"
    lblCheckoutDurationHeader	Altura	32

16. Adicione uma Caixa de Combinação ao controle conCheckout – drpCheckoutDurationHeader.

    Controlar	Propriedade	Valor
    Adicionar uma Caixa de Combinação a conCheckout	Nome	drpCheckoutDurationHeader
    drpCheckoutDurationHeader	Itens	Choices('Checkout Durations')
    drpCheckoutDurationHeader	Campos	Valor

17. Adicione um rótulo ao controle conCheckout – lblCheckoutReasonHeader.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckout	Nome	lblCheckoutReasonHeader
    lblCheckoutReasonHeader	Texto	"Razão para fazer check-out do item"
    lblCheckoutReasonHeader	Altura	32

18. Adicione uma Caixa de Combinação ao controle conCheckout – drpCheckoutReasonHeader.

    Controlar	Propriedade	Valor
    Adicionar uma Caixa de Combinação a conCheckout	Nome	drpCheckoutReasonHeader
    drpCheckoutReasonHeader	Itens	Choices('Checkout Reasons')
    drpCheckoutReasonHeader	Campos	Valor

19. Adicione um rótulo ao controle conCheckout – lblPickupAddressHeader.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckout	Nome	lblPickupAddressHeader
    lblPickupAddressHeader	Texto	"Endereço de retirada"
    lblPickupAddressHeader	Altura	32
    lblPickupAddressHeader	Visível	rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Pickup

20. Adicione um rótulo ao controle conCheckout – lblPickupAddress.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckout	Nome	lblPickupAddress
    lblPickupAddress	Texto	LookUp('Item Types','Item Type'=locSelectedItem.'Item Type'.'Item Type').'Checkout Address'
    lblPickupAddress	Altura	32*1
    lblPickupAddress	Visível	rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Pickup
    lblPickupAddress	DisplayMode	Desabilitadas

21. Adicione um rótulo ao controle conCheckout – lblDeliveryAddressHeader.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckout	Nome	lblDeliveryAddressHeader
    lblDeliveryAddressHeader	Texto	"Endereço de entrega"
    lblDeliveryAddressHeader	Altura	32
    lblDeliveryAddressHeader	Visível	rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Delivery

22. Adicione uma Caixa de Texto ao controle conCheckout – txtDeliveryAddress.

    Controlar	Propriedade	Valor
    Adicionar uma Caixa de Texto a conCheckout	Nome	txtDeliveryAddress
    lblPickupAddress	Altura	32*1
    lblPickupAddress	Visível	rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Delivery
    lblPickupAddress	Valor	"Insira o endereço aqui"

23. Adicione um contêiner Horizontal ao controle conCheckout – conCheckoutActions.

    Controlar	Propriedade	Valor
    Adicionar um contêiner Horizontal a conCheckout	Nome	conCheckoutActions
    conCheckoutActions	LayoutJustifyContent	LayoutJustifyContent.End
    conCheckoutActions	LayoutAlignItems	LayoutAlignItems
    conCheckoutActions	Lacuna	20
    conCheckoutActions	Largura	500
    conCheckoutActions	Preencher Partes	1
    conCheckoutActions	Altura Mínima	100

24. Adicione um botão ao controle conCheckoutActions – btnCancelCheckout.

    Controlar	Propriedade	Valor
    Adicionar um botão a conCheckoutActions	Nome	btnCancelCheckout
    btnCancelCheckout	Altura	32*1
    btnCancelCheckout	Largura	110
    btnCancelCheckout	Tipo de Botão	Standard
    btnCancelCheckout	Espessura da fonte	Seminegrito

25. Adicione um botão ao controle conCheckoutActions – btnSaveCheckout.

    Controlar	Propriedade	Valor
    Adicionar um botão a conCheckoutActions	Nome	btnSaveCheckout
    btnCancelCheckout	Altura	32*1
    btnCancelCheckout	Largura	110
    btnCancelCheckout	Tipo de Botão	Primária
    btnCancelCheckout	Espessura da fonte	Seminegrito
    btnCancelCheckout	OnSelect	Patch( 'Item Checkouts', Defaults('Item Checkouts'), { Item: locSelectedItem, Name: CountRows('Item Checkouts')+1000, 'Checkout Status': 'Checkout Statuses'.Active, 'Checkout Duration': drpCheckoutDurationHeader.Selected.Value, 'Checkout Option': rdoCheckoutOptions.Selected.Value, 'Checkout Reason': drpCheckoutReasonHeader.Selected.Value, 'Delivery Address': If( rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Delivery, txtDeliveryAddress ) }); UpdateContext({locShowCheckoutConfirmation: true})

26. Adicione um Contêiner Vertical ao controle conParent_MyCheckouts control – conCheckoutConfirmation.

    Controlar	Propriedade	Valor
    Adicionar um Contêiner Vertical a conParent_MyCheckouts	Nome	conCheckoutConfirmation
    conCheckoutConfirmation	Lacuna	20
    conCheckoutConfirmation	Preenchimento Esquerdo	20
    conCheckoutConfirmation	Preenchimento Superior	80
    conCheckoutConfirmation	Preenchimento Direito	20
    conCheckoutConfirmation	Preencher Partes	3
    conCheckoutConfirmation	Visível	locShowCheckoutConfirmation

27. Adicione uma imagem ao controle conCheckoutConfirmation – imgCheckoutConfirmation.

    Controlar	Propriedade	Valor
    Adicionar uma imagem a conCheckoutConfirmation	Nome	imgCheckoutConfirmation
    imgCheckoutConfirmation	Largura	200
    imgCheckoutConfirmation	Altura	200
    imgCheckoutConfirmation	ImagePosition	ImagePosition.Fill
    imgCheckoutConfirmation	Image	confirmação

28. Adicione um rótulo ao controle conCheckoutConfirmation – lblCheckoutInfoMessage.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckoutConfirmation	Nome	lblCheckoutInfoMessage
    lblCheckoutInfoMessage	X	707*1
    lblCheckoutInfoMessage	Y	225*1
    lblCheckoutInfoMessage	Texto	Você está pronto! &If(rdoCheckoutOptions.Selected.Value='Checkout Options'.Delivery,"O item "&locSelectedItem.Name&" será entregue em "&txtDeliveryAddress&".","Você pode retirar o item "&locSelectedItem.Name&" em "&locSelectedItem.'Item Type'.'Checkout Address'&".")
    lblCheckoutInfoMessage	Largura	300*1
    lblCheckoutInfoMessage	Altura	44
    lblCheckoutInfoMessage	Fonte	Segoe UI
    lblCheckoutInfoMessage	Tamanho da Fonte	10.5
    lblCheckoutInfoMessage	Alinhamento	Align.Center

29. Adicione um rótulo ao controle conCheckoutConfirmation – lblCheckoutHelpMessage.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conCheckoutConfirmation	Nome	lblCheckoutHelpMessage
    lblCheckoutHelpMessage	X	707*1
    lblCheckoutHelpMessage	Y	225*1
    lblCheckoutHelpMessage	Texto	"Para cancelamento e ajuda, entre em contato com:"
    lblCheckoutHelpMessage	Largura	400*1
    lblCheckoutHelpMessage	Altura	32*1
    lblCheckoutHelpMessage	Fonte	Segoe UI
    lblCheckoutHelpMessage	Tamanho da Fonte	10.5
    lblCheckoutHelpMessage	Alinhamento vertical	VerticalAlign.Bottom

30. Adicione uma galeria vertical em branco ao controle conCheckoutConfirmation – galCheckoutAdminContact.

    Controlar	Propriedade	Valor
    Adicionar uma galeria vertical em branco a conCheckoutConfirmation	Nome	galCheckoutAdminContact
    galCheckoutAdminContact	TemplateSize	100
    galCheckoutAdminContact	Altura	100
    galCheckoutAdminContact	Preenchimento	If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White)
    galCheckoutAdminContact	Largura	400
    galCheckoutAdminContact	ShowScrollbar	false
    galCheckoutAdminContact	Itens	[1]

31. Adicione uma imagem ao controle galCheckoutAdminContact – imgCheckoutAdmin_Photo.

    Controlar	Propriedade	Valor
    Adicionar uma imagem a galCheckoutAdminContact	Nome	imgCheckoutAdmin_Photo
    imgCheckoutAdmin_Photo	X	10
    imgCheckoutAdmin_Photo	Y	(Parent.TemplateHeight - Self.Height) / 2
    imgCheckoutAdmin_Photo	Largura	64
    imgCheckoutAdmin_Photo	Altura	64
    imgCheckoutAdmin_Photo	Image	If(!IsBlank(locSelectedItem.'Item Type'.'Checkout Admin'), Office365Users.UserPhotoV2(locSelectedItem.'Item Type'.'Checkout Admin') )

32. Adicione um rótulo ao controle galCheckoutAdminContact – lblCheckoutAdmin_DisplayName.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a galCheckoutAdminContact	Nome	lblCheckoutAdmin_DisplayName
    lblCheckoutAdmin_DisplayName	X	imgCheckoutAdmin_Photo.X + imgCheckoutAdmin_Photo.Width + 10
    lblCheckoutAdmin_DisplayName	Y	imgCheckoutAdmin_Photo.Y
    lblCheckoutAdmin_DisplayName	Texto	If(!IsBlank(locSelectedItem.'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').displayName)
    lblCheckoutAdmin_DisplayName	Altura	32*1
    lblCheckoutAdmin_DisplayName	Largura	Parent.Width - Self.X - 80
    lblCheckoutAdmin_DisplayName	Fonte	Segoe UI
    lblCheckoutAdmin_DisplayName	Tamanho da Fonte	10.5
    lblCheckoutAdmin_DisplayName	Espessura da Fonte	Seminegrito
    lblCheckoutAdmin_DisplayName	VerticalAlign	VerticalAlign.Top

33. Adicione um rótulo ao controle galCheckoutAdminContact – lblCheckoutAdmin_JobTitle.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a galCheckoutAdminContact	Nome	lblCheckoutAdmin_JobTitle
    lblCheckoutAdmin_JobTitle	X	imgCheckoutAdmin_Photo.X + imgCheckoutAdmin_Photo.Width + 10
    lblCheckoutAdmin_JobTitle	Y	lblCheckoutAdmin_DisplayName.Y+lblCheckoutAdmin_DisplayName.Height
    lblCheckoutAdmin_JobTitle	Texto	If(!IsBlank(locSelectedItem.'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').jobTitle)
    lblCheckoutAdmin_JobTitle	Altura	32*1
    lblCheckoutAdmin_JobTitle	Largura	Parent.Width - Self.X - 80
    lblCheckoutAdmin_JobTitle	Fonte	Segoe UI
    lblCheckoutAdmin_JobTitle	Tamanho da Fonte	10.5
    lblCheckoutAdmin_JobTitle	Espessura da Fonte	Seminegrito
    lblCheckoutAdmin_JobTitle	VerticalAlign	VerticalAlign.Top

34. Adicione uma imagem ao controle galCheckoutAdminContact – imgCheckoutAdmin_Chat.

    Controlar	Propriedade	Valor
    Adicionar uma imagem a galCheckoutAdminContact	Nome	imgCheckoutAdmin_Chat
    imgCheckoutAdmin_Chat	X	Parent.Width - Self.Width - 20
    imgCheckoutAdmin_Chat	Y	(Parent.TemplateHeight - Self.Height)/2
    imgCheckoutAdmin_Chat	Largura	32
    imgCheckoutAdmin_Chat	Altura	32
    imgCheckoutAdmin_Chat	PaddingTop	4
    imgCheckoutAdmin_Chat	paddingBottom	4
    imgCheckoutAdmin_Chat	PaddingLeft	4
    imgCheckoutAdmin_Chat	PaddingRight	4
    imgCheckoutAdmin_Chat	ImagePosition	ImagePosition.Fit
    imgCheckoutAdmin_Chat	Image	If(gblThemeDark||gblThemeHiCo,ChatDark,Chat)
    ImgCheckoutAdmin_Chat	OnSelect	With( {varUserName: Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').userPrincipalName}, If( Param("hostClientType") = "web", Launch( "https://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ), Launch( "msteams://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ) ) )

35. Adicione um botão ao controle conCheckoutConfirmation – btnCheckoutBackToHome.

    Controlar	Propriedade	Valor
    Adicionar um botão a conCheckoutConfirmation	Nome	btnCheckoutBackToHome
    btnCheckoutBackToHome	X	40
    btnCheckoutBackToHome	Y	105
    btnCheckoutBackToHome	Largura	160
    btnCheckoutBackToHome	Tamanho da Fonte	10.5
    btnCheckoutBackToHome	Espessura da Fonte	Seminegrito
    btnCheckoutBackToHome	Texto	"Retornar à página inicial"
    btnCheckoutBackToHome	Tipo de Botão	Standard

Criando a tela Meu check-out

Nesta etapa, vamos criar a tela final do aplicativo, a tela Meu check-out. Nessa tela, um usuário pode exibir os itens dos quais fez check-out e selecionar o item a ser devolvido.

Controlar	Propriedade	Valor
Tela Meus Check-outs	OnVisible	UpdateContext({locShowReturnConfirmation: false})
contêiner pai	Nome	conParent_MyCheckouts
1º contêiner filho	Nome	conItemTypes_MyCheckouts
2º contêiner filho	Nome	conMyCheckouts
conItemTypes_MyCheckouts	Lacuna	20
conItemTypes_MyCheckouts	Estouro Vertical	LayoutOverflow.Scroll
conItemTypes_MyCheckouts	Largura Mínima	300
conItemTypes_MyCheckouts	Preenchimento Superior	20
conItemTypes_MyCheckouts	Preenchimento Inferior	20
conItemTypes_MyCheckouts	Preenchimento	If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White)

1. Adicione um novo contêiner Horizontal ao controle conItemTypes_MyCheckouts – conItemTypesHeader_MyCheckouts.

   Controlar	Propriedade	Valor
   Adicionar um novo contêiner Horizontal a conItemTypes_MyCheckouts	Nome	conItemTypesHeader_MyCheckouts
   conItemTypesHeader_MyCheckouts	Preenchimento Direito	10
   conItemTypesHeader_MyCheckouts	Altura Mínima	0
   conItemTypesHeader_MyCheckouts	Altura	32
   conItemTypesHeader_MyCheckouts	Preenchimento Esquerdo	20

2. Adicione um rótulo ao controle conItemTypesHeader_MyCheckouts – lblAllAssetsHeader_MyCheckouts

   Controlar	Propriedade	Valor
   Adicionar um rótulo a conItemTypesHeader_MyCheckouts	Nome	lblAllAssetsHeader_MyCheckouts
   lblAllAssetsHeader_MyCheckouts	Fonte	Segoe UI
   lblAllAssetsHeader_MyCheckouts	Espessura da fonte	Negrito
   lblAllAssetsHeader_MyCheckouts	Altura	32
   lblAllAssetsHeader_MyCheckouts	Altura Flexível	false
   lblAllAssetsHeader_MyCheckouts	AlignInContainer	AlignInContainer.Stretch
   lblAllAssetsHeader_MyCheckouts	Texto	"Todos os ativos"

3. Adicione uma galeria vertical em branco ao controle conItemTypes_MyCheckouts – galItemTypes_MyCheckouts.

   Controlar	Propriedade	Valor
   Adicionar uma galeria vertical em branco a conItemTypes_MyCheckouts	Nome	galItemTypes_MyCheckouts
   galItemTypes_MyCheckouts	Itens	Tipos de Item
   galItemTypes_MyCheckouts	Preencher Partes	19
   galItemTypes_MyCheckouts	Tamanho do Modelo	74
   galItemTypes_MyCheckouts	Preenchimento do Modelo	0
   galItemTypes_MyCheckouts	Preenchimento do Modelo	If(!('Items Screen'.Size = ScreenSize.Small), If(ThisItem.IsSelected, ColorValue("#E2E2F6"), Transparent), Transparent)

4. Adicione um rótulo ao controle galItemTypes_MyCheckouts – lblIName_MyCheckouts.

   Controlar	Propriedade	Valor
   Adicionar um rótulo a galItemTypes_MyCheckouts	Nome	lblIName_MyCheckouts
   lblIName_MyCheckouts	Largura	Parent.Width
   lblIName_MyCheckouts	Altura	32
   lblIName_MyCheckouts	X	20
   lblIName_MyCheckouts	Y	5
   lblIName_MyCheckouts	Texto	Thisitem.Name
   lblIName_MyCheckouts	Espessura da fonte	If(ThisItem.IsSelected,FontWeight.Semibold,FontWeight.Normal)
   lblIName_MyCheckouts	Tamanho da Fonte	10.5

5. Adicione um rótulo ao controle galItemTypes_MyCheckouts – lblItemCount_MyCheckouts.

   Controlar	Propriedade	Valor
   Adicionar um rótulo a galItemTypes_MyCheckouts	Nome	lblItemCount_MyCheckouts
   lblItemCount_MyCheckouts	Largura	Parent.Width
   lblItemCount_MyCheckouts	Altura	32
   lblItemCount_MyCheckouts	X	20
   lblItemCount_MyCheckouts	a	lblIName_MyCheckouts.Y + lblIName_MyCheckouts.Height
   lblItemCount_MyCheckouts	Texto	CountRows(ThisItem.Items.Item) & " items"
   lblItemCount_MyCheckouts	Tamanho da Fonte	10.5

6. O contêiner horizontal conMyCheckouts será usado para conter um rótulo de cabeçalho e uma galeria de check-outs. Defina suas propriedades conforme mostrado abaixo.

   Controlar	Propriedade	Valor
   conMyCheckouts	Lacuna	20
   conMyCheckouts	Preenchimento Superior	20
   conMyCheckouts	Preenchimento Esquerdo	20
   conMyCheckouts	Preenchimento Direito	20
   conMyCheckouts	Estouro Vertical	Overflow.Scroll
   conMyCheckouts	Visível	!locShowReturnConfirmation

7. Adicione um rótulo ao controle conMyCheckouts – lblMyCheckoutsHeader.

   Controlar	Propriedade	Valor
   Adicionar um rótulo a conMyCheckouts	Nome	lblMyCheckoutsHeader
   lblMyCheckoutsHeader	Texto	"Meus check-outs"
   lblMyCheckoutsHeader	Alinhar no contêiner	AlignInContainer.Stretch
   lblMyCheckoutsHeader	Espessura da fonte	FontWeight.Semibold
   lblMyCheckoutsHeader	Tamanho da Fonte	15
   lblMyCheckoutsHeader	X	707*1
   lblMyCheckoutsHeader	Y	265*1

8. Adicionar uma galeria vertical em branco a conMyCheckouts – galMyCheckouts

   Controlar	Propriedade	Valor
   Adicionar uma galeria vertical em branco a conMyCheckouts	Nome	galMyCheckouts
   galMyCheckouts	Itens	Sort(Filter('Item Checkouts','Created By'.User=gblCurrUser.User,'Checkout Status'='Checkout Statuses'.Active),'Created On',Ascending)
   galMyCheckouts	TemplateSize	130

9. Adicione um botão ao controle galMyCheckouts – btnMyCheckouts_Background.

   Controlar	Propriedade	Valor
   Adicionar um botão a galMyCheckouts	Nome	btnMyCheckouts_Background
   btnMyCheckouts_Background	X	5
   btnMyCheckouts_Background	a	0
   btnMyCheckouts_Background	Preenchimento	Branco
   btnMyCheckouts_Background	Altura	Parent.TemplateHeight - 20
   btnMyCheckouts_Background	Largura	Parent.TemplateWidth - Self.X*2

10. Adicione uma imagem ao controle galMyCheckouts – imgMyCheckouts_Item.

    Controlar	Propriedade	Valor
    Adicionar uma imagem a galMyCheckouts	Nome	imgMyCheckouts_Item
    imgMyCheckouts_Item	X	5
    imgMyCheckouts_Item	Y	0
    imgMyCheckouts_Item	Largura	125
    imgMyCheckouts_Item	Altura	110
    imgMyCheckouts_Item	ImagePosition	ImagePosition.Fill
    imgMyCheckouts_Item	Image	ThisItem.Item.Image.Full

11. Adicione um rótulo ao controle galMyCheckouts – lblIMyCheckouts_ItemName.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a galMyCheckouts	Nome	lblIMyCheckouts_ItemName
    lblIMyCheckouts_ItemName	Y	imgMyCheckouts_Item.Y + 5
    lblIMyCheckouts_ItemName	X	imgMyCheckouts_Item.X + imgMyCheckouts_Item.Width +20
    lblIMyCheckouts_ItemName	Texto	ThisItem.Name
    lblIMyCheckouts_ItemName	Largura	btnMyCheckouts_Background.Width - Self.X
    lblIMyCheckouts_ItemName	Tamanho da Fonte	10.5
    lblIMyCheckouts_ItemName	FontWeight	FontWeight.Semibold

12. Adicione um rótulo ao controle galMyCheckouts – lblMyCheckouts_DueDate.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a galMyCheckouts	Nome	lblMyCheckouts_DueDate
    lblMyCheckouts_DueDate	X	lblIMyCheckouts_ItemName.X
    lblMyCheckouts_DueDate	Y	lblIMyCheckouts_ItemName.Y + lblIMyCheckouts_ItemName.Height
    lblMyCheckouts_DueDate	Texto	With({varDays:DateDiff(Today(),Switch(ThisItem.'Checkout Duration','Checkout Durations'.'7 days',DateAdd(ThisItem.'Created On',7,Days),'Checkout Durations'.'30 days',DateAdd(ThisItem.'Created On',30,Days)))},If(varDays<0,"Overdue by "&0-varDays&" days","Due in "&varDays&" days"))
    lblMyCheckouts_DueDate	Alinhamento vertical	Inferior
    lblMyCheckouts_DueDate	Largura	btnMyCheckouts_Background.Width - Self.X
    lblMyCheckouts_DueDate	Tamanho da Fonte	10.5

13. Adicione um botão ao controle galMyCheckouts – btnCheckoutsForeground.

    Controlar	Propriedade	Valor
    Adicionar um botão a galMyCheckouts	Nome	btnCheckoutsForeground
    btnCheckoutsForeground	HoverFill	RGBA(128, 128, 128, 0,06)
    btnCheckoutsForeground	Todos os outros Preenchimentos, exceto Preenchimento ao Focalizar	Transparente
    btnCheckoutsForeground	X	btnMyCheckouts_Background.X
    btnCheckoutsForeground	Y	btnMyCheckouts_Background.Y
    btnCheckoutsForeground	Largura	btnMyCheckouts_Background.Width

14. Adicione um botão ao controle galMyCheckouts – btnMyCheckouts_Return.

    Controlar	Propriedade	Valor
    Adicionar um botão a galMyCheckouts	Nome	btnMyCheckouts_Return
    btnMyCheckouts_Return	Texto	"Devolver"
    btnMyCheckouts_Return	X	lblIMyCheckouts_ItemName.X + 20
    btnMyCheckouts_Return	Y	lblMyCheckouts_DueDate.Y + lblMyCheckouts_DueDate.Height
    btnMyCheckouts_Return	Largura	96
    btnMyCheckouts_Return	OnSelect	Patch('Item Checkouts',ThisItem,{'Checkout Status':'Checkout Statuses'.Returned});UpdateContext({locSelectedItemForReturn:ThisItem.Item,locShowReturnConfirmation: true });

15. Agora defina a propriedade Preencher Partes para os controles comMyCheckouts e conItemTypes_MyCheckouts como mostrado abaixo. Os tipos de item cobrem 25% da tela e os 75% restantes são cobertos pela lista de meus check-outs.

    Controlar	Propriedade	Valor
    conMyCheckouts	Preencher Partes	3
    conItemTypes_MyCheckouts	Preencher Partes	1

16. Adicione um Contêiner Vertical ao controle conParent_MyCheckouts control – conReturnConfirmation.

    Controlar	Propriedade	Valor
    Adicionar um Contêiner Vertical a conParent_MyCheckouts	Nome	conReturnConfirmation
    conReturnConfirmation	Lacuna	20
    conReturnConfirmation	Preenchimento Esquerdo	20
    conReturnConfirmation	Preenchimento Superior	80
    conReturnConfirmation	Preenchimento Direito	20
    conReturnConfirmation	Preencher Partes	3
    conReturnConfirmation	Visível	locShowReturnConfirmation

17. Adicione uma imagem ao controle conReturnConfirmation – imgReturnConfirmation.

    Controlar	Propriedade	Valor
    Adicionar uma imagem a conReturnConfirmation	Nome	imgReturnConfirmation
    imgReturnConfirmation	Largura	200
    imgReturnConfirmation	Altura	200
    imgReturnConfirmation	ImagePosition	ImagePosition.Fill
    imgReturnConfirmation	Image	confirmação

18. Adicione um rótulo ao controle conReturnConfirmation – lblReturnInfoMessage.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conReturnConfirmation	Nome	lblReturnInfoMessage
    lblReturnInfoMessage	X	707*1
    lblReturnInfoMessage	Y	225*1
    lblReturnInfoMessage	Texto	"Tudo pronto!" Devolva o item "&locSelectedItemForReturn.Name&" para "&LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Address'&"."
    lblReturnInfoMessage	Largura	300*1
    lblReturnInfoMessage	Altura	44
    lblReturnInfoMessage	Fonte	Segoe UI
    lblReturnInfoMessage	Tamanho da Fonte	10.5
    lblReturnInfoMessage	Alinhamento	Align.Center

19. Adicione um rótulo ao controle conReturnConfirmation – lblReturnHelpMessage.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a conReturnConfirmation	Nome	lblReturnHelpMessage
    lblReturnHelpMessage	X	707*1
    lblReturnHelpMessage	Y	225*1
    lblReturnHelpMessage	Texto	"Para cancelamento e ajuda, entre em contato com:"
    lblReturnHelpMessage	Largura	400*1
    lblReturnHelpMessage	Altura	32*1
    lblReturnHelpMessage	Fonte	Segoe UI
    lblReturnHelpMessage	Tamanho da Fonte	10.5
    lblReturnHelpMessage	Alinhamento vertical	VerticalAlign.Bottom

20. Adicione uma galeria vertical em branco ao controle conReturnConfirmation – galReturnAdminContact.

    Controlar	Propriedade	Valor
    Adicionar uma galeria vertical em branco a conReturnConfirmation	Nome	galReturnAdminContact
    galReturnAdminContact	TemplateSize	100
    galReturnAdminContact	Altura	100
    galReturnAdminContact	Preenchimento	If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White)
    galReturnAdminContact	Largura	400
    galReturnAdminContact	ShowScrollbar	false
    galReturnAdminContact	Itens	[1]

21. Adicione uma imagem ao controle galReturnAdminContact – imgReturnAdmin_Photo.

    Controlar	Propriedade	Valor
    Adicionar uma imagem a galReturnAdminContact	Nome	imgReturnAdmin_Photo
    imgReturnAdmin_Photo	X	10
    imgReturnAdmin_Photo	Y	(Parent.TemplateHeight - Self.Height) / 2
    imgReturnAdmin_Photo	Largura	64
    imgReturnAdmin_Photo	Altura	64
    imgReturnAdmin_Photo	Image	If(!IsBlank(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'),Office365Users.UserPhotoV2(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'))

22. Adicione um rótulo ao controle galReturnAdminContact – lblReturnAdmin_DisplayName.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a galReturnAdminContact	Nome	lblReturnAdmin_DisplayName
    lblReturnAdmin_DisplayName	X	imgReturnAdmin_Photo.X + imgReturnAdmin_Photo.Width + 10
    lblReturnAdmin_DisplayName	Y	imgReturnAdmin_Photo.Y
    lblReturnAdmin_DisplayName	Texto	If(!IsBlank(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin').displayName)
    lblReturnAdmin_DisplayName	Altura	32*1
    lblReturnAdmin_DisplayName	Largura	Parent.Width - Self.X - 80
    lblReturnAdmin_DisplayName	Fonte	Segoe UI
    lblReturnAdmin_DisplayName	Tamanho da Fonte	10.5
    lblReturnAdmin_DisplayName	Espessura da Fonte	Seminegrito
    lblReturnAdmin_DisplayName	VerticalAlign	VerticalAlign.Top

23. Adicione um rótulo ao controle galReturnAdminContact – lblReturnAdmin_JobTitle.

    Controlar	Propriedade	Valor
    Adicionar um rótulo a galReturnAdminContact	Nome	lblReturnAdmin_JobTitle
    lblReturnAdmin_JobTitle	X	imgReturnAdmin_Photo.X + imgReturnAdmin_Photo.Width + 10
    lblReturnAdmin_JobTitle	Y	lblReturnAdmin_DisplayName.Y + lblReturnAdmin_DisplayName.Height
    lblReturnAdmin_JobTitle	Texto	If(!IsBlank(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin').jobTitle)
    lblReturnAdmin_JobTitle	Altura	32*1
    lblReturnAdmin_JobTitle	Largura	Parent.Width - Self.X - 80
    lblReturnAdmin_JobTitle	Fonte	Segoe UI
    lblReturnAdmin_JobTitle	Tamanho da Fonte	10.5
    lblReturnAdmin_JobTitle	Espessura da Fonte	Seminegrito
    lblReturnAdmin_JobTitle	VerticalAlign	VerticalAlign.Top

24. Adicione uma imagem ao controle galReturnAdminContact – imgReturnAdmin_Chat.

    Controlar	Propriedade	Valor
    Adicionar uma imagem a galReturnAdminContact	Nome	imgReturnAdmin_Chat
    imgReturnAdmin_Chat	X	Parent.Width - Self.Width - 20
    imgReturnAdmin_Chat	Y	(Parent.TemplateHeight - Self.Height)/2
    imgReturnAdmin_Chat	Largura	32
    imgReturnAdmin_Chat	Altura	32
    imgReturnAdmin_Chat	PaddingTop	4
    imgReturnAdmin_Chat	paddingBottom	4
    imgReturnAdmin_Chat	PaddingLeft	4
    imgReturnAdmin_Chat	PaddingRight	4
    imgReturnAdmin_Chat	ImagePosition	ImagePosition.Fit
    imgReturnAdmin_Chat	Image	If(gblThemeDark||gblThemeHiCo,ChatDark,Chat)
    ImgReturnAdmin_Chat	OnSelect	With( {varUserName: Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').userPrincipalName}, If( Param("hostClientType") = "web", Launch( "https://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ), Launch( "msteams://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ) ) )

25. Adicione um botão ao controle conReturnConfirmation – btnReturnBackToHome.

    Controlar	Propriedade	Valor
    Adicionar um botão a conReturnConfirmation	Nome	btnReturnBackToHome
    btnReturnBackToHome	X	40
    btnReturnBackToHome	Y	105
    btnReturnBackToHome	Largura	160
    btnReturnBackToHome	Tamanho da Fonte	10.5
    btnReturnBackToHome	Espessura da Fonte	Seminegrito
    btnReturnBackToHome	Texto	"Retornar à página inicial"
    btnReturnBackToHome	Tipo de Botão	Standard

Conectando as telas

Nesta etapa, vamos organizar as telas que você criou para o aplicativo e conectar as três telas que criamos criadas nas etapas anteriores.

Atualize as expressões a seguir para conectar as telas neste aplicativo.

Controlar	Propriedade	Valor
galItemTypes_Checkout	OnSelect	Navigate('Items Screen',ScreenTransition.Fade,{locSelectedItemType:ThisItem,locShowItems: true })
imgCheckout_Checkout	OnSelect	Navigate('My Checkouts Screen',ScreenTransition.Fade)
btnCancelCheckout	OnSelect	Navigate('Items Screen',ScreenTransition.Fade)
btnCheckoutBackToHome	OnSelect	Navigate('Items Screen',ScreenTransition.Fade)
galItems	OnSelect	Navigate('Checkout Screen',ScreenTransition.Fade,{locSelectedItem:ThisItem})
imgCheckout	OnSelect	Navigate('My Checkouts Screen',ScreenTransition.Fade)
galItemTypes_MyCheckouts	OnSelect	Navigate( 'Items Screen', ScreenTransition.Fade, { locSelectedItemType: ThisItem, locShowItems: true })
btnReturnBackToHome	OnSelect	Navigate('Items Screen',ScreenTransition.Fade)

Publicar o aplicativo no Teams

Nesta etapa, vamos publicar o aplicativo no Teams.

1. Sempre que as alterações em um aplicativo de tela forem salvas, elas serão publicadas automaticamente apenas para você e qualquer outra pessoa que tenha permissões para editar o aplicativo.

2. Ao terminar as alterações, você precisa explicitamente publicá-las para disponibilizá-las para todos com quem com compartilha o arquivo.

3. Para obter as etapas detalhadas sobre como publicar seu aplicativo no Teams, consulte Publicar seu aplicativo no Teams.

Compartilhar seu aplicativo com colegas

Nesta etapa, vamos compartilhar o aplicativo com colegas e seus dados subjacentes com outros colegas na empresa que não são membros da Equipe na qual o aplicativo está instalado.

Para obter mais informações sobre como compartilhar um aplicativo, consulte Definir permissões e compartilhar aplicativos com colegas.

Consulte também

• Entender a arquitetura do aplicativo de exemplo Instruções
• Personalizar aplicativos de exemplo
• Perguntas frequentes sobre aplicativos de exemplo
• Usar aplicativos de exemplo da loja do Microsoft 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).