Criar um aplicativo de tela do zero, usando o Common Data ServiceCreate a canvas app from scratch using Common Data Service

Crie um aplicativo de tela para gerenciar dados armazenados no Common Data Service, usando entidades padrão (que são internas) e/ou entidades personalizadas (que sua organização cria).Build a canvas app to manage data that's stored in Common Data Service, using standard entities (which are built in), custom entities (which your organization creates), or both.

Quando você cria um aplicativo no Common Data Service, você não precisa criar uma conexão no PowerApps, como faria com fontes de dados como o SharePoint, Dynamics 365 ou Salesforce.When you build an app from Common Data Service, you don't need to create a connection from PowerApps, as you do with data sources such as SharePoint, Dynamics 365, or Salesforce. Você precisa apenas especificar as entidades que deseja mostrar ou gerenciar no aplicativo.You need only to specify the entities that you want to show or manage in the app.

Pré-requisitosPrerequisites

Abrir um aplicativo em brancoOpen a blank app

  1. Entre no PowerApps.Sign in to PowerApps.

  2. Em Faça o seu próprio aplicativo, selecione Aplicativo de tela em branco.Under Make your own app, select Canvas app from blank.

    Bloco do aplicativo em branco

  3. Especifique um nome para seu aplicativo, selecione Telefone e, em seguida, selecione Criar.Specify a name for your app, select Phone, and then select Create.

    Você pode criar um aplicativo do zero para tablets, mas este tópico mostra a criação de um aplicativo para telefones.You can build an app from scratch for tablets, but this topic shows building an app for phones.

Especificar uma entidadeSpecify an entity

  1. No meio da tela, selecione Conectar aos dados.In the middle of the screen, select connect to data.

  2. No painel de Dados, selecione Common Data Service, marque a caixa de seleção Contas e, em seguida, selecione Conectar.In the Data pane, select Common Data Service, select the Accounts check box, and then select Connect.

  3. Feche o painel Dados selecionando o ícone fechar no canto superior direito.Close the Data pane by selecting the close icon in the upper-right corner.

Adicionar uma tela de listaAdd a list screen

  1. Na guia Página Inicial, selecione a seta para baixo de Nova tela e, em seguida, selecione Lista.On the Home tab, select the down arrow for New screen, and then select List.

    Adicionar uma tela de lista

  2. Na barra de navegação à esquerda, selecione BrowseGallery1 e, em seguida, defina o valor da propriedade Itens como esta fórmula:In the left navigation bar, select BrowseGallery1, and then set the value of the Items property to this formula:

    SortByColumns(Search(Accounts; TextSearchBox1.Text; "name"); "name"; If(SortDescending1; SortOrder.Descending; SortOrder.Ascending))

    Esta fórmula especifica que:This formula specifies that:

    • A galeria deve mostrar os dados da entidade Contas.The gallery should show data from the Accounts entity.

    • Os dados devem ser classificados em ordem ascendente, até que um usuário selecione o botão de classificação para alterar a ordem de classificação.The data should be sorted in ascending order until a user selects the sort button to toggle the sort order.

    • Se um usuário digitar ou colar um ou mais caracteres na barra de pesquisa (TextSearchBox1), a lista mostrará apenas as contas para as quais o campo nome contiver os caracteres que o usuário especificou.If a user types or pastes one or more characters into the search bar (TextSearchBox1), the list will show only those accounts for which the name field contains the characters that the user specified.

      Use essas e muitas outras funções para especificar como o aplicativo é exibido e se comporta.You can use these and many other functions to specify how your app appears and behaves.

      Definir a propriedade Items da galeria

  3. Defina o layout da galeria para mostrar somente o nome de cada conta e configure a barra de título para mostrar a palavra Procurar, conforme descrito em Personalizar uma galeria.Set the gallery's layout to show only the name of each account, and configure the title bar to show the word Browse, as Customize a gallery describes.

    Tela de navegação

  4. Na barra de navegação à esquerda, passe o mouse sobre Screen1, selecione o ícone de reticências (...) e, em seguida, selecione Excluir.In the left navigation bar, hover over Screen1, select the ellipsis icon (...), and then select Delete.

  5. Na barra de navegação à esquerda, passe o mouse sobre Screen2, selecione o ícone de reticências (...) e, em seguida, selecione Renomear.In the left navigation bar, hover over Screen2, select the ellipsis icon (...), and then select Rename.

  6. Digite ou cole BrowseScreen e, em seguida, renomeie a galeria na tela como BrowseGallery.Type or paste BrowseScreen, and then rename the gallery in that screen as BrowseGallery.

    Renomear tela Procurar, galeria

Adicionar uma tela de formulárioAdd a form screen

  1. Repita a primeira etapa do procedimento anterior, exceto que você adicionará uma tela de Formulário em vez de uma tela de Lista.Repeat the first step of the previous procedure, except add a Form screen instead of a List screen.

  2. Defina a propriedade DataSource do formulário como Accounts e sua propriedade Item como BrowseGallery.Selected, conforme mostra a guia Avançado do painel direito.Set the form's DataSource property to Accounts and its Item property to BrowseGallery.Selected, as the Advanced tab of the right-hand pane shows.

    Definir as propriedades Datasource e Item do formulário

  3. Sobre o propriedades guia do painel direito, selecione editar campos para abrir o campos painel.On the Properties tab of the right-hand pane, select Edit Fields to open the Fields pane.

  4. Selecione Adicionar campo e, em seguida, marque as caixas de seleção desses campos:Select Add field, and then select the check boxes for these fields:

    • Nome da ContaAccount Name
    • Endereço 1: Rua 1Address 1: Street 1
    • Endereço 1: CidadeAddress 1: City
    • Endereço 1: CEPAddress 1: ZIP/Postal code
    • Número de FuncionáriosNumber of Employees
    • Receita AnualAnnual Revenue

    Observação

    Fora nesse cenário, você pode criar um campo personalizado, selecionando novo campo, fornecendo as informações necessárias e, em seguida, selecionando feito.Outside of this scenario, you can create a custom field by selecting New field, providing the required information, and then selecting Done. Mais informações: Criar um campo.More information: Create a field.

  5. Selecione Adicionar.Select Add.

  6. Defina a propriedade Text da barra de título para que ela mostre Criar/Editar.Set the title bar's Text property to show Create/Edit.

    A tela refletirá as alterações.The screen reflects your changes.

    Definir as propriedades Datasource e Item do formulário

  7. Renomeie esta tela FormScreen.Rename this screen FormScreen.

Configurar íconesConfigure icons

  1. Na BrowseScreen, defina a propriedade OnSelect do ícone circular próximo à parte superior da tela com esta fórmula:On the BrowseScreen, set the OnSelect property of the circular icon near the top of the screen to this formula:

    Refresh(Accounts)

    Ícone de atualização

  2. Defina a propriedade OnSelect do ícone de adição como esta fórmula:Set the OnSelect property of the plus icon to this formula:

    NewForm(EditForm1);; Navigate(FormScreen; ScreenTransition.None)

    Ícone de adição

  3. Defina a propriedade OnSelect da primeira seta apontando para a direita como esta fórmula:Set the OnSelect property of the first arrow pointing to the right to this formula:

    EditForm(EditForm1);; Navigate(FormScreen; ScreenTransition.None)

    Ícone Próximo

  4. Em FormScreen, defina a propriedade OnSelect do ícone de cancelamento como esta fórmula:On the FormScreen, set the OnSelect property of the cancel icon to this formula:

    ResetForm(EditForm1);;Navigate(BrowseScreen; ScreenTransition.None)

    Ícone de cancelamento

  5. Defina a propriedade OnSelect do ícone de marca de seleção como esta fórmula:Set the OnSelect property of the checkmark icon to this formula:

    SubmitForm(EditForm1);; Navigate(BrowseScreen; ScreenTransition.None)

    Ícone de marca de seleção

  6. Na guia Inserir, selecione Ícones e, em seguida, selecione o ícone Lixo.On the Insert tab, select Icons, and then select the Trash icon.

  7. Defina a propriedade Color do ícone Lixeira como White e sua propriedade OnSelect com esta fórmula:Set the Trash icon's Color property to White and its OnSelect property to this formula:

    Remove(Accounts; BrowseGallery.Selected);; Navigate(BrowseScreen; ScreenTransition.None)

    Ícone de Lixeira

Testar o aplicativoTest the app

  1. Na barra de navegação à esquerda, selecione BrowseScreen e, em seguida, abra a Visualização pressionando F5 (ou selecionando o ícone de reprodução próximo ao canto superior direito).In the left navigation bar, select BrowseScreen, and then open Preview by pressing F5 (or by selecting the play icon near the upper-right corner).

    Abrir a Visualização

  2. Alterne a lista entre as ordens de classificação ascendente e descendente e filtre a lista um ou mais caracteres no nome da conta.Toggle the list between ascending and descending sort orders, and filter the list by one or more characters in the account name.

  3. Adicione uma conta, edite a conta adicionada e comece a atualizar a conta, mas cancele as alterações e, em seguida, exclua a conta.Add an account, edit the account that you added, start to update the account but cancel your changes, and then delete the account.

Próximas etapasNext steps