Criando um aplicativo pelo SharePointCreating an app from SharePoint

Gere um aplicativo de três telas de uma lista do SharePoint e explore as telas e os controles do aplicativo.Generate a three screen app from a SharePoint list, then explore screens and controls from the app. Atualize as telas, controles e campos do aplicativo e use fórmulas para personalizar ainda mais o comportamento do aplicativo.Update app screens, controls, and fields; and use formulas to further customize app behavior.

Você aprenderá como...

Gerar um aplicativoGenerate an app

Nesta seção do curso, vamos criar um aplicativo de uma lista do SharePoint "Estimativas de Piso".In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. O aplicativo poderia ser usado por uma pessoa, como um estimador fazendo trabalho externo em sites do cliente, para consultar a lista e mantê-la atualizada.The app could be used by someone, such as an estimator out at customer sites, to refer to the list and keep it up-to-date. Na seção Introdução, mostramos como gerar um aplicativo na mesma lista – então por que examiná-la novamente?In the Getting Started section, we showed you how to generate an app from the same list - so why look at it again? Primeiro, em vez de iniciar no PowerApps Studio, agora mostraremos como o PowerApps é integrado ao SharePoint Online.First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. Em segundo lugar, nos aprofundaremos em como o aplicativo é formado e mostraremos como personalizá-lo.Second, we dig deeper into how the app is put together, and show you how to customize it. Você definitivamente obterá algumas novas informações ao percorrer esta seção, vamos lá!You'll definitely get some new information going through this section, so let's jump in!

Gerar o aplicativoGenerate the app

A imagem a seguir mostra a lista do SharePoint "Estimativas de Piso", que contém informações básicas como nome, preço e uma imagem para cada tipo de piso.The following image shows the "Flooring Estimates" SharePoint list, which contains basic information like name and price, and an image for each flooring type. Você pode ver como o PowerApps e o Microsoft Flow estão agora integrados ao SharePoint Online, para criar facilmente aplicativos e fluxos de suas listas.You can see how PowerApps and Microsoft Flow are now integrated into SharePoint Online, so you can easily build apps and flows from your lists.

Lista de Estimativas de Piso

Para criar um aplicativo, clique em PowerApps e depois em Criar um aplicativo.To build an app, click PowerApps, then Create an app. No painel à direita, digite um nome para o aplicativo e, em seguida, clique em Criar.In the right hand pane, enter a name for the app, then click Create. Depois que você clica em Criar, o PowerApps começa a gerar o aplicativo.After you click Create, PowerApps starts to generate the app. O PowerApps faz todos os tipos de inferências sobre seus dados para que ele gere um aplicativo útil como um ponto de partida.PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.

Gerar um aplicativo da lista

Exibir o aplicativo no PowerApps StudioView the app in PowerApps Studio

Seu novo aplicativo de três telas é aberto no PowerApps Studio.Your new three-screen app opens in PowerApps Studio. Todos os aplicativos gerados de dados têm o mesmo conjunto de telas:All apps generated from data have the same set of screens:

  • A tela de navegação: na qual você procura, classifica, filtra e atualiza os dados obtidos por pull da lista, além de adicionar itens clicando no ícone (+).The browse screen: where you browse, sort, filter, and refresh the data pulled in from the list, as well as add items by clicking the (+) icon.
  • A tela de detalhes: na qual você exibe mais detalhes sobre um item e pode optar por excluir ou editar o item.The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • A tela de edição/criação: aquela em que você pode editar um item existente ou criar um novo.The edit/create screen: where you edit an existing item or create a new one.

Na barra de navegação à esquerda, clique ou toque em um ícone no canto superior direito para mudar para o modo de exibição em miniatura.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

Alternar entre modos de exibição

Clique ou toque em cada miniatura para exibir os controles nessa tela.Click or tap each thumbnail to view the controls on that screen.

O aplicativo gerado

Executar o aplicativo no modo de visualizaçãoRun the app in preview mode

Clique ou toque naClick or tap Seta Iniciar visualização do aplicativo no canto superior direito para executar o aplicativo.in the top-right corner to run the app. Se você navegar pelo aplicativo, verá que ele inclui os dados da lista e fornece uma boa experiência padrão.If you navigate through the app, you see that it includes all the data from the list and provides a good default experience.

Executar o aplicativo no modo de visualização

Em seguida, exploraremos o aplicativo em mais detalhes e, posteriormente, personalizaremos o aplicativo de modo que ele se adeque melhor às nossas necessidades.Next we'll explore the app in more detail and later customize the app so it better suits our needs.

Explorar um aplicativo geradoExplore a generated app

Neste tópico, analisaremos com detalhes o aplicativo gerado – examinando as telas e controles que definem o comportamento do aplicativo.In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. Não examinaremos todos os detalhes, mas ver mais sobre como esse aplicativo funciona ajudará você a criar seus próprios aplicativos.We won't go through all the details, but seeing more about how this app works will help you to build your own apps. Em um tópico posterior, examinaremos as fórmulas que funcionam com controles e telas.In a later topic, we'll look at the formulas that work with screens and controls.

Noções básicas sobre controles no PowerAppsUnderstanding controls in PowerApps

Um controle é simplesmente um elemento de interface do usuário com comportamentos associados a ele.A control is simply a UI element that has behaviors associated with it. Muitos controles do PowerApps são os mesmos que você usou em outros aplicativos: rótulos, caixas de entrada de texto, listas suspensas, elementos de navegação e assim por diante.Many controls in PowerApps are the same as controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on. Mas o PowerApps tem mais controles especializados como Galerias (que exibem dados de resumo) e Formulários (que exibem dados detalhados e permitem que você crie e edite itens).But PowerApps has more specialized controls like Galleries (which display summary data) and Forms (which display detail data and enable you to create and edit items). Há também alguns outros controles realmente interessantes como Imagem, Câmera e Código de barras.And also some other really cool controls like Image, Camera, and Barcode. Para ver o que está disponível, clique ou toque em Inserir na faixa de opções e, em seguida, clique ou toque em cada uma das opções de cada vez, de Texto a Ícones.To see what's available, click or tap Insert on the ribbon, and then click or tap each of the options in turn, Text through Icons.

Guia de controles na faixa de opções PowerApps Studio

Explorar a tela de navegaçãoExplore the browse screen

Cada uma das três telas do aplicativo tem um controle principal e alguns controles adicionais.Each of the three app screens has a main control and some additional controls. A primeira tela no aplicativo é a tela de navegação, chamada BrowseScreen1 por padrão.The first screen in the app is the browse screen, named BrowseScreen1 by default. O controle principal nessa tela é uma galeria chamada BrowseGallery1.The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 contém outros controles como NextArrow1 (um controle de ícone – clique ou toque nele para ir para a tela de detalhes).BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). Também existem controles separados na tela, como IconNewItem1 (um controle de ícone – clique ou toque nele para criar um item na tela de edição/criação).There are also separate controls on the screen, like IconNewItem1 (an icon control - click or tap it to create an item in the edit/create screen).

Tela de navegação com controles

O PowerApps tem uma variedade de tipos de galeria, de modo que você pode usar aquele que melhor atende aos requisitos de layout do seu aplicativo.PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. Você verá mais maneiras de controlar o layout posteriormente nesta seção.You will see more ways to control layout later in this section.

Opções de galeria do PowerApps

Explorar a tela de detalhesExplore the details screen

Em seguida, temos a tela de detalhes, chamada DetailScreen1 por padrão.Next is the details screen, named DetailScreen1 by default. O principal controle nesta tela é um formulário de exibição denominado DetailForm1.The main control on this screen is a display form named DetailForm1. DetailForm1 contém outros controles, como DataCard1 (um cartão controle, que exibe a categoria de piso nesse caso).DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). Também existem controles separados na tela, como IconEdit1 (um controle de ícone – clique ou toque nele para editar o item atual na tela de edição/criação).There are also separate controls on the screen like IconEdit1 (an icon control - click or tap it to edit the current item on the edit/create screen).

Tela de detalhes com controles

Há muitas opções de galeria, mas os formulários são mais simples – podem ser formulários de edição ou de exibição.There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

Opções de formulário do PowerApps

Explorar a tela de edição/criaçãoExplore the edit/create screen

A terceira tela no aplicativo é a tela de edição/criação, chamada EditScreen1 por padrão.The third screen in the app is the edit/create screen, named EditScreen1 by default. O principal controle nesta tela é um formulário de edição denominado EditForm1.The main control on this screen is an edit form named EditForm1. EditForm1 contém outros controles, como DataCard8 (um cartão controle, que exibe a categoria de piso nesse caso).EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). Também existem controles separados na tela como IconAccept1 (um controle de ícone – clique ou toque nele para salvar as alterações que você fez na tela de edição/criação).There are also separate controls on the screen like IconAccept1 (an icon control - click or tap it to save the changes you made on the edit/create screen).

Tela de edição com controles

Agora que você tem uma ideia de como o aplicativo é composto de telas e controles, veremos no próximo tópico como personalizar o aplicativo.Now that you have a sense of how the app is composed of screens and controls, we'll look at how you customize the app in the next topic.

Personalizar o aplicativoCustomize the app

Nos dois primeiros tópicos nesta seção, você gerou um aplicativo de uma lista do SharePoint e explorou o aplicativo para obter um melhor entendimento de como aplicativos de três telas são compostos.In the first two topics in this section, you generated an app from a SharePoint list and explored the app to get a better understanding of how three screen apps are composed. O aplicativo gerado pelo PowerApps é útil, mas geralmente você personalizará um aplicativo após ele ser gerado.The app that PowerApps generated is useful, but you will often customize an app after it's generated. Neste tópico, vamos percorrer algumas alterações básicas para cada tela no aplicativo.In this topic, we'll walk through some basic changes for each screen in the app. Há muito mais que você pode fazer para personalizar um aplicativo – falaremos sobre isso em tópicos posteriores.There is a lot more you can do to customize an app - we'll get to that in later topics. Enquanto isso, você poderá desenvolver o que aprender neste tópico.In the meantime, you can take what you learn in this topic and build on it. Tome qualquer aplicativo que você gerar de uma lista, de um arquivo do Excel ou de outra fonte e veja como você pode personalizá-lo.Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. Essa é realmente a melhor maneira de saber como os aplicativos são formados.It really is the best way to learn how apps are put together.

Tela de navegaçãoBrowse screen

Começaremos com a tela de navegação.We'll start with the browse screen. A lista do SharePoint contém uma imagem de cada produto, mas a imagem não é exibida por padrão.The SharePoint list contains an image for each product but the image isn't displayed by default. Nós corrigiremos isso.Let's fix that. No painel direito, na guia Layout, selecione um layout diferente para a tela de navegação.In the right-hand pane, on the Layout tab, select a different layout for the browse screen. Você verá os resultados imediatamente porque o PowerApps atualiza o aplicativo conforme você faz as alterações.You see the results right away because PowerApps updates the app as you make changes.

Alterar o layout de tela de navegação

Com o layout básico correto, altere agora os campos que são exibidos.With the right basic layout, now change the fields that are displayed. Clique ou toque em um campo no primeiro item e, em seguida, no painel à direita, altere os dados que são exibidos para cada item.Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. Isso fornece um resumo melhor de cada item na lista.This provides a better summary of each item in the list.

Alterar os campos da tela de navegação

Tela de detalhesDetails screen

Na tela de detalhes, gostaríamos de alterar a ordem dos campos e também de exibir a imagem.On the details screen, we want to change the order of the fields and display the image also. Há diferentes controles nesta tela, então o processo é um pouco diferente daquele empregado na tela de navegação.There are different controls on this screen, so the process is a little different from the browse screen. Clique ou toque em um campo, no painel à direita, arraste o campo Título na parte superior.Click or tap a field, then in the right-hand pane, drag the Title field to the top. Em seguida, clique ou toque no campo Imagem para exibi-lo.Then click or tap the Image field to display it.

Alterar os campos da tela de detalhes

Tela de edição/criaçãoEdit/create screen

Por fim, na tela em que as entradas são editadas e criadas, queremos alterar um campo para facilitar a inserção de texto.Finally, on the screen where you edit and create entries, we want to change a field so that it's easier to enter text. Clique ou toque na lista suspensa do campo Visão geral e, em seguida, clique ou toque no controle Editar Texto de Várias Linhas.Click or tap the drop-down list for the Overview field, and then click or tap the Edit Multi-line Text control.

Alterar os campos da tela de edição

Você pode ver como algumas etapas básicas podem fazer muita coisa para melhorar a aparência e a experiência de usar um aplicativo gerado.You can see how a few basic steps can do a lot to improve the appearance and experience of using a generated app. Neste tópico, nosso foco será na interface do usuário do PowerApps Studio, que fornece várias opções para personalizar seus aplicativos.In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. No próximo tópico, abordaremos fórmulas que desempenham uma função importante na condução do comportamento do aplicativo.In the next topic, we'll get into formulas, which play an important role in driving app behavior.

Explorar as fórmulas de aplicativoExplore app formulas

Um dos principais benefícios do PowerApps é não precisar escrever o código de aplicativo tradicional – você não precisa ser um desenvolvedor para criar aplicativos!One of the major benefits of PowerApps is not having to write traditional application code - you don't have to be a developer to create apps! Mas você ainda precisa de uma maneira para expressar a lógica em um aplicativo e para controlar a navegação, a filtragem, a classificação e as outras funcionalidades de um aplicativo.But you still need a way to express logic in an app and to control an app's navigation, filtering, sorting, and other functionality. É aí que entram as fórmulas.This is where formulas come in. Se você já usou as fórmulas do Excel, a abordagem usada pelo PowerApps lhe deve ser familiar.If you have used Excel formulas, the approach that PowerApps takes should feel familiar. Neste tópico, mostraremos algumas fórmulas básicas para formatação de texto e, em seguida, passe por três das fórmulas que o PowerApps inclui no aplicativo gerado.In this topic, we'll show a couple of basic formulas for text formatting and then walk through three of the formulas that PowerApps includes in the generated app. Você terá uma ideia do que as fórmulas podem fazer.You will get a taste of what formulas can do. Em seguida, você pode passar algum tempo observando outras fórmulas no aplicativo gerado e escrever seu próprio.Then you can spend some time looking at other formulas in the generated app and writing your own.

Noções básicas sobre fórmulas e propriedadesUnderstanding formulas and properties

No tópico anterior, incluímos o campo Preço na galeria da tela de navegação, mas ele apareceu como um número sem formatação sem o símbolo da moeda.In the previous topic, we included the Price field in the browse screen gallery, but it showed up as a plain number without a currency symbol. Suponha que desejamos adicionar um cifrão e também alterar a cor do texto dependendo de quanto o item custa (por exemplo, vermelho se custar mais de US$ 5, caso contrário verde).Suppose we want to add a dollar sign, and also change the text color depending on how much the item costs (for example red if it's more than $5, otherwise green). A imagem a seguir mostra a ideia.The following image shows the idea.

Formatação de texto para cor e moeda

Começaremos com a formatação de moeda.Let's start with the currency formatting. Por padrão, o PowerApps apenas recebe um valor de Preço de cada item, que é definido como a propriedade Text do rótulo que exibe o preço.By default PowerApps just pulls in a Price value for each item, which is set as the Text property of the label that displays the price.

Formatação padrão de Preço

Para adicionar o símbolo da moeda dos EUA, clique ou toque no controle de rótulo e, na barra de fórmulas, defina a propriedade Text com esta fórmula.To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.

Formatação da moeda do preço

A fórmula – Text(Price, "[$-en-US]$ ##.00" usa a função Texto para especificar como o número deve ser formatado.The formula - Text(Price, "[$-en-US]$ ##.00" uses the Text function to specify how the number should be formatted. A fórmula é como uma fórmula do Excel, mas fórmulas do PowerApps se referem a controles e outros elementos do aplicativo em vez de células em uma planilha.The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. Se você clicar ou tocar em um controle e, em seguida, clicar ou tocar na lista suspensa de propriedade, você verá uma lista de propriedades que são relevantes para o controle.If you click or tap a control and then click or tap the property drop down list, you see a list of properties that are relevant to the control. Por exemplo, esta é uma lista parcial das propriedades de um rótulo.For example, here is a partial list of the properties for a label. Algumas propriedades são relevantes para uma ampla variedade de controles e outras apenas para um controle específico.Some properties are relevant across a broad range of controls and others only for a specific control.

Configuração de propriedades

Para formatar a cor condicionalmente com base no preço, use uma fórmula como a seguinte para a propriedade Color do rótulo: If(Price > 5, Color.Red, Color.Green).To format the color conditionally based on the price, use a formula like the following for the Color property of the label: If(Price > 5, Color.Red, Color.Green).

Formatação de cor de preço

Fórmulas incluídas no aplicativo geradoFormulas included in the generated app

Agora que você entende como usar fórmulas em conjunto com propriedades, examinaremos três exemplos de fórmulas que o PowerApps usa no aplicativo gerado.Now that you understand how to use formulas in conjunction with properties, we'll look at three examples of formulas that PowerApps uses in the generated app. Os exemplos são todos da tela de navegação e trabalham com a propriedade OnSelect, que define o que acontece quando um usuário clica ou toca em um controle do aplicativo.The examples are all from the browse screen and work with the OnSelect property, which defines what happens when a user clicks or taps an app control.

  • A primeira fórmula é associada com o controle IconNewItem1: ícone de Novo item.The first formula is associated with the IconNewItem1 control: New item icon. Você clica ou toca nesse controle para ir da tela de navegação para a tela de edição/criação e criar um item.You click or tap this control to go from the browse screen to the edit/create screen and create an item.

    • A fórmula é NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)The formula is NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
    • A fórmula instancia um novo formulário de edição e, em seguida, navega para a tela de edição/criação para que você possa criar um novo item.The formula instantiates a new edit form and then navigates to the edit/create screen so that you can create a new item. Um valor de ScreenTransition.None significa que não há nenhuma transição entre telas (como um esmaecimento).A value of ScreenTransition.None means there is no transition between screens (such as a fade).
  • A segunda fórmula é associada com o controle IconSortUpDown1: ícone Classificar galeria.The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. Você clica ou toca nesse controle para classificar a lista de itens na galeria da tela de navegação.You click or tap this control to sort the list of items in the browse screen gallery.

    • A fórmula é UpdateContext({SortDescending1: !SortDescending1})The formula is UpdateContext({SortDescending1: !SortDescending1})
    • A fórmula usa UpdateContext para atualizar uma variável chamada SortDescending1.The formula uses UpdateContext to update a variable called SortDescending1. O valor da variável muda sempre quando você clica no controle.The value of the variable switches back and forth as you click the control. Isso informa à galeria nesta tela como classificar os itens (assista ao vídeo para obter mais detalhes).This tells the gallery on this screen how to sort the items (watch the video for more details).
  • A terceira fórmula que está associada com o controle NextArrow1: ícone Ir para a seta de detalhes.The third formula is associated with the NextArrow1 control: Go to details arrow icon. Você clica ou toca nesse controle para ir da tela de navegação para a tela de detalhes.You click or tap this control to go from the browse screen to the details screen.

    • A fórmula é Navigate(DetailScreen1, ScreenTransition.None)The formula is Navigate(DetailScreen1, ScreenTransition.None)
    • A fórmula navega para a tela de detalhes, novamente sem nenhuma transição.The formula navigates to the details screen, again with no transition.

Há muitas outras fórmulas no aplicativo, então passe algum tempo clicando nos controles e vendo quais fórmulas estão definidas para as diversas propriedades.There are many other formulas in the app, so take some time to click on controls and see what formulas are set for various properties.

ConcluindoWrapping it all up

Aqui terminamos de explorar o aplicativo gerado e, nos bastidores, dar uma olhada nas telas, controles, propriedades e fórmulas que dão ao aplicativo as suas capacidades.This brings us to the end of exploring the generated app, and taking a look behind the scenes at the screens, controls, properties, and formulas that give the app its capabilities. Se você acompanhou até aqui, deve ter uma melhor compreensão de como funciona um aplicativo gerado.If you've followed along, you should have a better understanding of how a generated app works. Agora, leve isso em consideração ao criar seus próprios aplicativos.Now you can take this understanding into creating your own apps.

Antes de passar para a próxima seção, gostaríamos de voltar para o SharePoint e mostrar como o aplicativo agora está integrado com a experiência de lista.Before moving on to the next section, we want to loop back to SharePoint and show you how the app is now integrated with the list experience. Como você pode ver, o FlooringApp agora funciona como uma exibição da lista e você inicia o aplicativo clicando em Abrir.As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. Isso fornece uma maneira simples de gerenciar listas com uma experiência personalizada amigável.This provides a simple way to manage your lists with a friendly customized experience.

Aplicativo como exibição de lista do Sharepoint

Agora que você já verificou a seção de aplicativo do SharePoint, você tem uma opção quanto ao que ver em seguida:Now that you've gone through the SharePoint app section, you have a choice about where to go next:

A seção de gerenciamento mostra como compartilhar e realizar o controle de versão de aplicativos; além disso, ela apresenta os ambientes, que são contêineres para aplicativos, dados e outros recursos.The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources. É recomendável que todas as pessoas confiram a seção de gerenciamento em algum momento, mas a seção Common Data Service também tem algumas informações excelentes, incluindo mais personalizações de aplicativo.We recommend that everyone go through the management section at some point, but the Common Data Service section has some great information too, including more app customizations.

Parabéns!

Você concluiu a seção Criando um aplicativo pelo SharePoint do Aprendizado Guiado do Microsoft PowerApps.You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

Você aprendeu como...

Próximo Tutorial

Criando um aplicativo pelo Common Data ServiceCreating an app from the Common Data Service

Colaboradores

  • Michael Blythe
  • olprod
  • Alisha-Acharya