Exercício: criar um aplicativo de estoque com o SharePoint

Concluído

Considere um cenário em que você deseja que os usuários de sua empresa, a Contoso, solicitem suas próprias máquinas de café. A Contoso quer que você crie um aplicativo que possa ser compartilhado com qualquer pessoa que lide com esse processo.

Neste exercício, você configura algumas listas do SharePoint para armazenar os dados da máquina de café e os dados da ordem. Em seguida, você cria um aplicativo de tela do Power Apps para interagir com esses dados e criar ordens.

Criar a lista de máquinas

Sua primeira tarefa é criar a lista de máquinas:

1. Baixe o arquivo do Excel Machine Order Data.

2. Acesse um site do SharePoint Online no qual deseja armazenar os dados do aplicativo.

3. No canto superior esquerdo, selecione Nova > Lista.

4. Selecione a opção Do Excel.

   

5. Selecione Carregar arquivo e o arquivo Machine-Order-Data.xlsx que você baixou anteriormente.

6. Na página Personalizar, verifique se a tabela Máquinas está no menu suspenso Selecionar uma tabela deste arquivo e selecione Avançar no canto inferior direito.

   

7. Você pode ajustar o nome da lista e adicionar uma descrição (opcional). Selecione o botão Criar para continuar. Em seguida, aguarde alguns instantes para sua nova lista.

Depois que sua nova lista for concluída, seu navegador deverá ir automaticamente para a nova lista. Todos os dados da planilha do Excel devem estar carregados e prontos para uso.

Criar a lista de ordens

Depois, você cria a lista de ordens seguindo estas etapas:

1. Selecione a opção Início no canto superior esquerdo, abaixo do nome do site do SharePoint.

2. No canto superior esquerdo, selecione Nova > Lista.

3. Selecione Lista em branco.

4. Nomeie a lista como Orders-List e selecione Criar.

   

5. Na página Orders-List, diretamente sob o nome da lista, você vê uma coluna chamada "Título". À direita disso está a opção para Adicionar coluna. Selecione Adicionar coluna.

6. Na caixa de diálogo Criar uma coluna, selecione Data e hora e depois Avançar.

7. Nomeie essa coluna como OrderDate e selecione Salvar.

   

8. Selecione Adicionar coluna novamente.

9. Role para baixo e selecione Moeda e Avançar.

10. Nomeie essa coluna como OrderTotal e selecione Salvar.

Agora, você tem uma lista do SharePoint que pode ser usada para armazenar dados de ordens para as máquinas de café.

Criar um aplicativo de tela

Siga estas etapas para criar o aplicativo de tela no Power Apps:

1. Vá para make.powerapps.com.

2. Selecione a opção Criar à esquerda.

3. Selecione Aplicativo em branco

   

4. Selecione a opção Criar em Aplicativo de tela em branco.

5. Nomeie o aplicativo como Contoso Coffee Machine Ordering e selecione o botão Criar.

6. Após uma breve espera, a tela é aberta no editor de aplicativo de tela, em que criará e editará o aplicativo do Power Apps para interagir com os dados do SharePoint.

   

7. Selecione o ícone Salvar no canto superior direito. (Por padrão, o Power Apps salva automaticamente seu aplicativo a cada dois minutos, mas somente após a primeira vez que você o salva manualmente; portanto, é sempre uma boa ideia salvar o aplicativo após criá-lo).

8. Selecione o menu suspenso Adicionar dados.

9. Pesquise e selecione o SharePoint (a opção SharePoint padrão, não Sites do SharePoint). Pode ser necessário rolar pelos resultados para encontrá-lo. Se você ainda não tiver uma conexão, selecione Adicionar uma conexão. Se você já tiver uma conexão, poderá selecionar a conexão existente e pular a próxima etapa para continuar.

   

10. Para criar uma conexão, é aberto um painel no lado direito da tela. Verifique se a opção Conectar diretamente (serviços de nuvem) está selecionada e selecione Conectar na parte inferior da tela.

11. À direita da tela, agora você verá a opção Conectar-se a um site do SharePoint, que solicita que você insira a URL para o local da sua lista, ou você pode procurar nos sites recentes para encontrar o site do SharePoint.

    O site do SharePoint em que você criou as listas de máquinas deve ser mostrado na lista de sites recentes. Você pode simplesmente selecionar o site para continuar.

    Se o seu site não aparecer na lista, volte para o site no qual você criou a lista e copie a URL (a tela da página inicial do site, não a página de listagem) e cole-a na linha superior do painel. Depois de o Power Apps identificar o site, você pode selecionar Conectar-se para continuar.

12. No painel Escolher uma lista. Marque as caixas de seleção de Machine-Order-Data e Orders-List.

13. Selecione Conectar.

    

Agora você criou e conectou seu aplicativo do Power Apps aos dados para poder ler e gravar de volta no SharePoint diretamente por meio do aplicativo.

Projetar o aplicativo de tela

Vamos criar nosso aplicativo de tela inserindo e conectando alguns controles.

1. Selecione Inserir > Rótulo de texto.

   

2. Mova o rótulo que é exibido no canto superior esquerdo da tela e redimensione-o para esticar por toda a tela.

3. No lado direito da tela, você pode editar as propriedades de controle nos aplicativos de tela usando uma interface amigável, sem a necessidade de editar o código. Com o rótulo ainda selecionado, altere o texto para Contoso Coffee Machine Ordering.

4. Altere o Tamanho da fonte para 18.

5. Para Alinhamento de texto, selecione centro.

6. Ao lado da cor, o ícone da letra A indica a cor do texto e o ícone de balde de tinta indica a cor da tela de fundo desse rótulo. Selecione o ícone de cor de texto A e, depois, branco.

7. Selecione o ícone de balde de tinta e escolha azul-escuro (ou qualquer outra cor que desejar).

   

   Observação

   Na maioria dos controles, você pode ajustar configurações como fontes, cores e cores de plano de fundo por vários meios. O painel Propriedades é um jeito, mas você também pode notar que essas mesmas opções aparecem na faixa de opções da barra de comandos.

8. Na faixa de opções superior, selecione Inserir > Galeria vertical.

9. Uma janela pop-up é exibida, solicitando que você conecte a galeria a uma fonte de dados. Selecione Machine-Order-Data.

10. Para ajustar os campos, vamos tentar usar a interface da faixa de opções da barra de comandos. Selecione Editar campos na barra de comandos.

11. Verifique se o menu suspenso Subtitle1 mostra Preço e a opção Title1 mostra Machine Name. Selecione fora da caixa de diálogo Editar campos para continuar.

12. O texto exibido na galeria deve refletir o nome do computador e o preço, além de uma "imagem de amostra", que corrigiremos momentaneamente. Agora, redimensione a galeria para caber sob o rótulo do cabeçalho de modo que ela ocupe a metade esquerda da tela abaixo do rótulo.

13. Vamos substituir essa imagem de exemplo para mostrar a imagem real do produto. Selecione o primeiro ícone de imagem na galeria. Logo abaixo da faixa de opções da barra de comandos está o campo de entrada de fórmula fx, no qual você pode escrever o código para alterar as propriedades de um controle no Power Apps, excluir o texto SampleImage e inserir ThisItem.Photo.

    

14. Em seguida, vamos modificar o formato de texto do campo de legenda para mostrar a moeda. Selecione o rótulo Subtitle1 no primeiro item da galeria que mostra o preço do item. Observe que você tem um realce cinza no Modo de exibição de árvore para este controle, e o campo de fórmula mostra ThisItem.Price.

    

15. No campo de fórmula, modifique a propriedade Text para: Text(ThisItem.Price,"$##,###.00"). Imediatamente você vê seu Preço mostrar cifrões, separadores de milhares e centavos.

16. Em seguida, vamos adicionar um formulário para modificar nossos dados. Selecione a metade em branco da tela de edição (para sair da galeria) e depois selecione Inserir > Editar formulário.

17. Selecione Orders-List como a fonte de dados e o Power Apps preencherá o formulário com campos, de acordo com nossas colunas de listado SharePoint.

18. Reposicione e redimensione o formulário para se ajustar na metade direita da tela.

    

19. Selecione o cartão Título no formulário. Observe que um ícone de cadeado aparece à esquerda do nome do cartão logo acima do cartão selecionado. Vamos desbloquear o cartão para personalizá-lo. Clique com o botão direito do mouse no cartão selecionado e selecione Desbloquear.

    

20. Desbloqueie os cartões OrderDate e OrderTotal no formulário usando a mesma técnica.

21. Selecione a caixa de entrada de texto em Título no formulário (desbloqueie, se necessário).

22. Altere a fórmula Default de Parent.Default para Gallery1.Selected.'Machine Name'. Agora você deve ver o título do item selecionado na galeria no lado esquerdo da tela.

    Dica

    Ao inserir suas fórmulas, o Power Apps sugerirá automaticamente as opções à medida que você digita. Você pode selecionar Tab ou Enter para selecionar a sugestão realçada ou rolar pela lista para selecionar uma. Isso é completamente opcional, mas pode acelerar a criação e a precisão da fórmula conforme você se acostuma.

23. Selecione o controle seletor de data em OrderDate e altere a fórmula de DefaultDate para Today().

24. Selecione a caixa de entrada de texto em OrderTotal e altere a fórmula para Gallery1.Selected.Price.

25. Selecione todo o formulário. No canto superior esquerdo, a propriedade DataSource é exibida em uma lista suspensa com o campo de entrada da fórmula exibindo 'Orders-List'. Ao selecionar esse menu suspenso Propriedades, você pode escolher qualquer propriedade disponível para um controle e alterar a fórmula para essa propriedade de controle. Nesse caso, você alterará a propriedade Item do formulário, então, selecione esse menu suspenso e depois selecione Item.

    

26. Na fórmula de Item, digite Defaults('Orders-List'). A função Defaults() informa o Power Apps de que estamos criando um novo item para a lista do SharePoint Orders-List cada vez que enviamos este formulário.

27. Vá para a barra de comandos e selecione Inserir > Botão.

28. Arraste o botão para a direita da tela sob as entradas do formulário.

29. Altere a propriedade Text do botão para Enviar Ordem.

30. Altere a propriedade OnSelect do botão para SubmitForm(Form1).

Agora, você tem um aplicativo no qual os usuários podem selecionar uma máquina de café, visualizar a versão preliminar da ordem e enviá-la. O aplicativo concluído deve for semelhante à imagem a seguir.

Coloque seu aplicativo no modo versão preliminar selecionando o botão Reproduzir (triângulo) no canto superior direito da barra de comandos (ou selecione a tecla de função F5 no teclado). Selecione uma máquina de café e selecione o botão Enviar Ordem. Volte para a Orders-List no site do SharePoint e deverá ver a ordem criada.

Espero que isso desperte seu apetite pelas possibilidades de usar o Power Apps para interagir com dados do SharePoint. Embora este seja um aplicativo básico, você pode adicionar personalizações para alterar a interface do usuário/experiência do usuário para dar suporte às suas necessidades de negócios.