Criar uma aplicação a partir do SharePointCreating an app from SharePoint

Gere uma aplicação com três ecrãs a partir de uma lista do SharePoint e, em seguida, explore os ecrãs e os controlos da aplicação.Generate a three screen app from a SharePoint list, then explore screens and controls from the app. Atualize os ecrãs, controlos e campos da aplicação, e utilize fórmulas para personalizar ainda mais o comportamento da aplicação.Update app screens, controls, and fields; and use formulas to further customize app behavior.

Vai aprender a...

Gerar uma aplicaçãoGenerate an app

Nesta secção do curso, vamos criar uma aplicação a partir de uma lista do SharePoint "Flooring Estimates".In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. A aplicação pode ser utilizada por qualquer pessoa, como um avaliador que esteja no local 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 secção Introdução, mostrámos-lhe como gerar uma aplicação a partir da mesma lista - portanto, por que motivo vamos revê-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? Em primeiro lugar, em vez de partir do PowerApps Studio, vamos agora mostrar-lhe como o PowerApps está integrado no SharePoint Online.First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. Em segundo lugar, vamos ver melhor como a aplicação está estruturada e mostrar-lhe como a personalizar.Second, we dig deeper into how the app is put together, and show you how to customize it. Vai sem dúvida obter algumas informações novas ao percorrer esta secção. Vamos começar!You'll definitely get some new information going through this section, so let's jump in!

Gerar a aplicaçãoGenerate the app

A imagem seguinte mostra a lista do SharePoint "Flooring Estimates", que contém informações básicas como o nome, o preço e uma imagem para cada tipo de pavimento.The following image shows the "Flooring Estimates" SharePoint list, which contains basic information like name and price, and an image for each flooring type. Pode ver como o PowerApps e o Microsoft Flow estão agora integrados no SharePoint Online, pelo que pode construir facilmente aplicações e fluxos a partir das 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 pavimentos

Para criar uma aplicação, clique em PowerApps e em Criar aplicação.To build an app, click PowerApps, then Create an app. No painel do lado direito, introduza um nome para a aplicação e clique em Criar.In the right hand pane, enter a name for the app, then click Create. Depois de clicar em Criar, o PowerApps começa a gerar a aplicação.After you click Create, PowerApps starts to generate the app. O PowerApps faz todo o tipo de inferências sobre os dados, de modo a gerar uma aplicação ú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 aplicação a partir da lista

Ver a aplicação no PowerApps StudioView the app in PowerApps Studio

A sua nova aplicação com três ecrãs é aberta no PowerApps Studio.Your new three-screen app opens in PowerApps Studio. Todas as aplicações geradas a partir de dados têm o mesmo conjunto de ecrãs:All apps generated from data have the same set of screens:

  • O ecrã de procura: onde pode procurar, ordenar, filtrar e atualizar os dados retirados da lista, bem como adicionar itens ao clicar 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.
  • O ecrã de detalhes: onde pode ver mais detalhes sobre um item e pode optar por eliminar ou editar o item.The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • O ecrã editar/criar: onde 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 num ícone, no canto superior direito, para mudar para a vista de miniatura.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

Alternar as vistas

Clique ou toque em cada miniatura para ver os controlos nesse ecrã.Click or tap each thumbnail to view the controls on that screen.

A aplicação gerada

Executar a aplicação no modo de pré-visualizaçãoRun the app in preview mode

Clicar ou tocarClick or tap Seta para iniciar a pré-visualização da aplicação no canto superior direito para executar a aplicação.in the top-right corner to run the app. Se navegar pela aplicação, verá que inclui todos os dados da lista e fornece uma boa experiência predefinida.If you navigate through the app, you see that it includes all the data from the list and provides a good default experience.

Executar a aplicação no modo de pré-visualização

Em seguida, vamos explorar a aplicação de forma mais detalhada e, mais tarde, personalizar a aplicação de modo a melhor se adequar às nossas necessidades.Next we'll explore the app in more detail and later customize the app so it better suits our needs.

Explorar uma aplicação geradaExplore a generated app

Neste tópico, vamos observar mais atentamente a aplicação gerada - rever os ecrãs e controlos que definem o comportamento da aplicação.In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. Não iremos rever todos os detalhes, mas ver mais informações sobre como funciona esta aplicação irá ajudá-lo a criar as suas próprias aplicações.We won't go through all the details, but seeing more about how this app works will help you to build your own apps. Num tópico posterior, vamos analisar as fórmulas que funcionam com ecrãs e controlos.In a later topic, we'll look at the formulas that work with screens and controls.

Compreender os controlos do PowerAppsUnderstanding controls in PowerApps

Um controlo é simplesmente um elemento da IU que tem comportamentos associados à mesma.A control is simply a UI element that has behaviors associated with it. Muitos controlos do PowerApps são iguais a controlos que utilizou noutras aplicações: etiquetas, caixas de introdução de texto, listas pendentes, elementos de navegação, etc.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. No entanto, o PowerApps tem controlos mais especializados, como Galerias (que apresentam dados de resumo) e Formulários (que apresentam dados detalhados e permitem-lhe criar e editar 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). Além disso, também inclui outros controlos fantásticos, como Imagem, Câmara, 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 no friso e, em seguida, clique ou toque em cada uma das opções, de Texto até Í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.

Separador Controlos no friso do PowerApps Studio

Explorar o ecrã de procuraExplore the browse screen

Cada um dos três ecrãs da aplicação tem um controlo principal e alguns controlos adicionais.Each of the three app screens has a main control and some additional controls. O primeiro ecrã na aplicação é o ecrã de procura, com o nome BrowseScreen1 por predefinição.The first screen in the app is the browse screen, named BrowseScreen1 by default. O controlo principal neste ecrã é uma galeria com o nome BrowseGallery1.The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 contém outros controlos, como NextArrow1 (um controlo de ícone - clique ou toque no mesmo para aceder ao ecrã de detalhes).BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). Também existem controlos separados no ecrã, como IconNewItem1 (um controlo de ícone - clique ou toque no mesmo para criar um item no ecrã editar/criar).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).

Ecrã de procura com controlos

O PowerApps tem diversos tipos de galeria, pelo que pode utilizar o que melhor se adequa aos requisitos de esquema da sua aplicação.PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. Irá ver mais formas de controlar o esquema, mais tarde nesta secção.You will see more ways to control layout later in this section.

Opções da galeria do PowerApps

Explorar o ecrã de detalhesExplore the details screen

Segue-se o ecrã de detalhes, com o nome DetailScreen1 por predefinição.Next is the details screen, named DetailScreen1 by default. O controlo principal neste ecrã é um formulário de apresentação com o nome DetailForm1.The main control on this screen is a display form named DetailForm1. DetailForm1 contém outros controlos, como DataCard1 (um controlo de cartão, que apresenta a categoria de pavimentos, neste caso).DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). Também existem controlos separados no ecrã, como IconEdit1 (um controlo de ícone - clique ou toque no mesmo para editar o item atual no ecrã editar/criar).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).

Ecrã de detalhes com controlos

Existem várias opções de galeria, mas os formulários são mais simples - é um formulário de edição ou um formulário de apresentaçã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 o ecrã editar/criarExplore the edit/create screen

O terceiro ecrã na aplicação é o ecrã editar/criar, com o nome EditScreen1 por predefinição.The third screen in the app is the edit/create screen, named EditScreen1 by default. O controlo principal neste ecrã principal é um formulário de edição com o nome EditForm1.The main control on this screen is an edit form named EditForm1. EditForm1 contém outros controlos, como DataCard8 (um controlo de cartão, que permite editar a categoria de pavimentos, neste caso).EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). Também existem controlos separados no ecrã, como IconAccept1 (um controlo de ícone - clique ou toque no mesmo para guardar as alterações que efetuou no ecrã editar/criar).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).

Ecrã editar com controlos

Agora que tem uma noção de como a aplicação é composta por ecrãs e controlos, iremos personalizar a aplicação no tópico seguinte.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 a aplicaçãoCustomize the app

Nos dois primeiros tópicos desta secção gerou uma aplicação a partir de uma lista do SharePoint e explorou a aplicação para obter uma melhor compreensão da composição de aplicações com três ecrãs.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. A aplicação gerada pelo PowerApps é útil, mas é muito comum personalizar as aplicações depois de serem geradas.The app that PowerApps generated is useful, but you will often customize an app after it's generated. Neste tópico, iremos explicar algumas alterações básicas para cada ecrã na aplicação.In this topic, we'll walk through some basic changes for each screen in the app. Pode fazer muito mais para personalizar uma aplicação - será abordado em tópicos posteriores.There is a lot more you can do to customize an app - we'll get to that in later topics. Entretanto, pode tirar partido do que aprender neste tópico e utilizar esse conhecimento como base.In the meantime, you can take what you learn in this topic and build on it. Utilize qualquer aplicação que gerar a partir de uma lista ou ficheiro do Excel, ou outra origem, e veja como pode personalizá-la.Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. É, sem dúvida, a melhor forma de perceber como as aplicações são estruturadas.It really is the best way to learn how apps are put together.

Ecrã de procuraBrowse screen

Vamos começar pelo ecrã de procura.We'll start with the browse screen. A lista do SharePoint contém uma imagem para cada produto, mas a imagem não é apresentada por predefinição.The SharePoint list contains an image for each product but the image isn't displayed by default. Vamos resolver isso.Let's fix that. No painel da direita, no separador Esquema , selecione um esquema diferente para o ecrã de procura.In the right-hand pane, on the Layout tab, select a different layout for the browse screen. Os resultados são apresentados imediatamente, porque o PowerApps atualiza a aplicação à medida que faz as alterações.You see the results right away because PowerApps updates the app as you make changes.

Alterar o esquema do ecrã de procura

Uma vez escolhido o esquema básico certo, altere os campos apresentados.With the right basic layout, now change the fields that are displayed. Clique ou toque num campo do primeiro item e, no painel da direita, altere os dados apresentados 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. Isto fornece um melhor resumo de cada item na lista.This provides a better summary of each item in the list.

Alterar os campos do ecrã de procura

Ecrã de detalhesDetails screen

No ecrã de detalhes, queremos alterar a ordem dos campos e apresentar também a imagem.On the details screen, we want to change the order of the fields and display the image also. Este ecrã tem controlos diferentes, pelo que o processo é ligeiramente diferente do ecrã de procura.There are different controls on this screen, so the process is a little different from the browse screen. Clique ou toque num campo e, no painel da direita, arraste o campo Título para a 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 apresentá-la.Then click or tap the Image field to display it.

Alterar os campos do ecrã de detalhes

Ecrã editar/criarEdit/create screen

Por último, no ecrã onde pode editar e criar entradas, queremos alterar um campo, para que seja mais fácil introduzir 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 pendente do campo Descrição geral e clique ou toque no controlo Editar Texto Multilinha.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 do ecrã editar

Veja como alguns passos básicos podem contribuir imenso para melhorar o aspeto e a experiência de utilização de uma aplicação gerada.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, focámo-nos na IU do PowerApps Studio, que disponibiliza muitas opções para personalizar as suas aplicações.In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. No tópico seguinte, iremos aprofundar as fórmulas, que desempenham uma função importante no comportamento das aplicações.In the next topic, we'll get into formulas, which play an important role in driving app behavior.

Explorar as fórmulas da aplicaçãoExplore app formulas

Uma das principais vantagens do PowerApps é não ter de escrever código de aplicação tradicional. Não precisa de ser programador para criar aplicações!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! No entanto, continua a precisar de uma forma de expressar lógica numa aplicação e de controlar a navegação, a filtragem, a ordenação e outras funcionalidades da mesma.But you still need a way to express logic in an app and to control an app's navigation, filtering, sorting, and other functionality. É nesta vertente que as fórmulas se mostram úteis.This is where formulas come in. Se já utilizou fórmulas do Excel, irá reconhecer semelhanças na abordagem do PowerApps.If you have used Excel formulas, the approach that PowerApps takes should feel familiar. Neste tópico, vamos mostrar algumas fórmulas básicas para a formatação de texto e, em seguida, vamos explicar três das fórmulas que o PowerApps inclui na aplicação gerada.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. Ficará com uma ideia das capacidades que as fórmulas têm para oferecer.You will get a taste of what formulas can do. Depois disso, pode dedicar-se à análise de outras fórmulas disponíveis na aplicação gerada e a escrever as suas próprias fórmulas.Then you can spend some time looking at other formulas in the generated app and writing your own.

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

No tópico anterior, incluímos o campo Price na galeria do ecrã de procura, mas este era apresentado como um número simples sem símbolo de 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. Vamos supor que queremos adicionar um cifrão e também alterar a cor do texto em função do preço do artigo (por exemplo, vermelho se for superior a 5 $, verde se for inferior).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 seguinte ilustra o que se pretende.The following image shows the idea.

Formatação de texto ao nível da cor e da moeda

Vamos começar pela formatação da moeda.Let's start with the currency formatting. Por predefinição, o PowerApps extrai simplesmente um valor Price para cada artigo, definido como a propriedade Text da etiqueta que apresenta 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 predefinida do preço

Para adicionar o símbolo de moeda dos E.U.A., clique ou toque no controlo de etiqueta e, na barra de fórmulas, defina a propriedade Text como 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" utiliza a função Text para especificar a forma 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 é semelhante a uma fórmula do Excel, com a diferença que as fórmulas do PowerApps fazem referência a controlos e outros elementos da aplicação em vez de referenciarem células numa folha de cálculo.The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. Se clicar ou tocar num controlo e, em seguida, clicar ou tocar na lista pendente de propriedades, verá uma lista de propriedades relevantes para o controlo.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, segue-se uma lista parcial das propriedades de uma etiqueta.For example, here is a partial list of the properties for a label. Algumas propriedades são relevantes para uma vasta gama de controlos, outras para apenas um controlo específico.Some properties are relevant across a broad range of controls and others only for a specific control.

Definir propriedades

Para formatar a cor condicionalmente com base no preço, utilize uma fórmula como a que se segue para a propriedade Color da etiqueta: 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 da cor do preço

Fórmulas incluídas na aplicação geradaFormulas included in the generated app

Agora que compreende como utilizar as fórmulas em conjunto com as propriedades, vamos analisar três exemplos de fórmulas utilizadas pelo PowerApps na aplicação gerada.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 extraídos do ecrã de procura e funcionam com a propriedade OnSelect, que define o que acontece quando um utilizador clica ou toca um controlo da aplicação.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 está associada ao controlo IconNewItem1: Ícone de item Novo.The first formula is associated with the IconNewItem1 control: New item icon. Clique ou toque neste controlo para passar do ecrã de procura para o ecrã de criação/ediçã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 o ecrã de edição/criação para que 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 igual a ScreenTransition.None significa que não existe nenhuma transição entre os ecrãs (por exemplo, um efeito de desvanecimento).A value of ScreenTransition.None means there is no transition between screens (such as a fade).
  • A segunda fórmula está associada ao controlo IconSortUpDown1: Ícone de Ordenar galeria.The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. Clique ou toque neste controlo para ordenar a lista de itens na galeria do ecrã de procura.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 utiliza UpdateContext para atualizar uma variável denominada SortDescending1.The formula uses UpdateContext to update a variable called SortDescending1. O valor da variável muda alternadamente à medida que clica no controlo.The value of the variable switches back and forth as you click the control. Isto serve de indicador à galeria neste ecrã de como deve ordenar 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 está associada ao controlo NextArrow1: Ícone de seta Ir para detalhes.The third formula is associated with the NextArrow1 control: Go to details arrow icon. Clique ou toque neste controlo para passar do ecrã de procura para o ecrã 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 o ecrã de detalhes, uma vez mais sem qualquer transição.The formula navigates to the details screen, again with no transition.

Existem muitas outras fórmulas na aplicação, por isso, dedique algum do seu tempo a clicar nos controlos e veja as fórmulas que se encontram 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.

Para terminarWrapping it all up

Com isto, chegamos ao fim da nossa incursão pela aplicação gerada e da visita aos bastidores dos ecrãs, controlos, propriedades e fórmulas que colocam estas capacidades ao serviço da aplicação.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 nos acompanhou até aqui, deverá ter ficado com uma noção mais clara do funcionamento de uma aplicação gerada.If you've followed along, you should have a better understanding of how a generated app works. Agora, está em condições de utilizar os conhecimentos adquiridos para criar as suas próprias aplicações.Now you can take this understanding into creating your own apps.

Antes de avançarmos para a secção seguinte, queremos voltar ao SharePoint e mostrar-lhe a integração da aplicação com a experiência ao nível das listas.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 pode constatar, a FlooringApp funciona agora como uma vista da lista e a aplicação é iniciada quando se clica em Abrir.As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. Isto proporciona uma forma simples de gerir as suas listas através de uma experiência personalizada fácil de utilizar.This provides a simple way to manage your lists with a friendly customized experience.

A aplicação como vista de lista do Sharepoint

Agora que já percorreu a secção da aplicação do SharePoint, pode escolher o que quer fazer a seguir:Now that you've gone through the SharePoint app section, you have a choice about where to go next:

A secção sobre gestão mostra-lhe como partilhar e criar versões de aplicações e apresenta ambientes, que funcionam como contentores para aplicações, 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. Recomendamos que, a determinada altura, todos os utilizadores passem em revista a secção sobre gestão; em todo o caso, a secção sobre o Common Data Service também contém informações muito interessantes, incluindo outras personalizações da aplicação.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!

Concluiu a secção Criar uma aplicação a partir do SharePoint da Aprendizagem Orientada do Microsoft PowerApps.You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

Aprendeu a...

Tutorial Seguinte

Criar uma aplicação a partir do Common Data ServiceCreating an app from the Common Data Service

Contribuidores

  • Michael Blythe
  • olprod
  • Alisha-Acharya