Criando sua base de dados
Para um aplicativo eficiente vamos utilizar o SharePoint como nosso "banco de dados".
Acesse seu SharePoint, na barra lateral esquerda clique em criar (detalhe 1) e escolha a opção de lista (detalhe 2), na página que se abre clique em lista em branco (detalhe 3).
Na página que se abre escolha um nome para sua lista (detalhe 4) e clique no botão de criar(detalhe 5) você será direcionado para sua lista nova.
Vamos criar nossas colunas para salvar os dados das tarefas. Repare que temos ja temos um coluna chamada "titulo", porém não iremos usa-la. clique no botão de adicionar coluna (detalhe 6) e crie as seguintes colunas.
| idTask | Texto simples |
| titleTask | Texto simples |
| statusTask | Texto simples |
| descriptionTask | Texto Longo |
| deadlineTask | Data and time |
Sua lista deve estar como a imagem abaixo, agora iremos para o Power Apps.
Criando um aplicativo com Power Apps e Design System Apex
A vantagem de se utilizar um design system é que várias decisões de design já foram tomadas por você, como cores, tipos de botões, padrões e estilo de design.
Dessa forma você pode focar na extratégia do negócio entregando mais valor de forma rápida
Abra seu Power Apps, na barra lateral esquerda, selecione a opção criar (detalhe 1), clique em criar app em branco (detalhe 2) e escolha o Aplicativo canvas em branco (detalhe 3). Finalmente escolha um nome para seu aplicativo e o formato de tablet.
Aguarde seu aplicativo ficar pronto, isso pode levar alguns minutos.
Ao carregar seu aplicativo a primeira coisa que faremos é renomear a tela para "Home" (detalhe 1)
Tokens de design
Tokens são variáveis criadas na etapa de design que servem para identificar e padronizar elementos de código, como cores, tamanho de fontes, espaçamento e outros elementos da interface.
Na aba de componentes do nosso site "Design System Apex" procure por "tokens" (detalhe 2) e clique no botão "Copiar Código" (detalhe 3).
Retorne ao Power Apps e vá na propriedade "OnVisible" (detalhe 4) da nossa tela de home e vamos adicionar o códito que copiamos do nosso design system (detalhe 5).
Template para página
Nossos componentes possuem certas configurações já feitas, dessa forma você pode se preocupar com o que realmente importa, suas regras de negócio, o primeiro elemento que vamos importar será um template para todas as páginas.
Na aba de componentes do nosso site "Design System Apex" procure por "Page template" (detalhe 6) e clique no botão "Copiar Código" (detalhe 7).
Repare na aba lateral direita que seu abriu, ela contem os detalhes do componente e como usar cada propriedade dele, essa propriedades ja estão nosso app pois colamos ela no "OnVisible" da tela de home.
Cole e crie
Volte ao seu power apps e tão fácil como colar um texto, agora basta clicar em qualquer parte em branco da nossa tela de "Home" com botão direito do mouse vá "Paste" > "Paste code" veja (detalhe 9)
Repare que você já vai ter um header e um menu lateral para navegar pelo seu aplicativo.
Cole e crie
Na tela de home vamos adicionar um título e uma galeria do power apps visualizarmos as tarefas que vamos adicionar a nossa todo-list.
Repare que você já vai ter um header e um menu lateral para navegar pelo seu aplicativo.
Nosso workflow de trabalho vai ser basicamente esse pegando elementos da nossa biblioteca e colando nas páginas do Power Apps
Mostrando nossas tarefas
Na tela de home vamos adicionar um título e uma galeria do power apps visualizarmos as tarefas que vamos adicionar a nossa todo-list.
Clique em qualquer parte branca da tela, e no menu "Insert" do Power Apps um "Container" e renomeio-o para "content", clique no simbolo de "+" e adicione uma "Label". Iremos alterar a propriedade "Text" dela para "Minhas tarefas" (detalhe 10). Se lembra dos nossos "Tokens"? Aqui já vamos utiliza-los, na propriedade "Font size" altera para "dsaTokens.fontTextLarge" (detalhe 11), na propriedade "Color" insira a formula com o valor do nosso token de cor "ColorValue(dsaTokens.colorAccentTertiary)" (detalhe 12), a principal vantagem de usa-los é que se você precisar alterar uma cor ou tamnho de fonte basta alterar no token e isso se refletira em todo o aplicativo, mesmo que ele tenha centenas de páginas ou elementos.
Caso seu texto esteja desconfigurado basta ligar as chaves de "Auto height" e "Flexible width" veja o (detalhe 13)
Adicione uma galeria vertical em branco apartir de menu "Insert" do Power Apps e renomei-a para "tasksGallery", posicione-a abaixo do seu titulo, na sua propriedade "Data" (detalhe 14) vamos apontar para nossa base de dados do Sharepoint que criamos no passo 1.
Para isso em "Select a data source" na própria galeria, procure por SharePoint > seu usuário, e na barra lateral direita que se abre aponte para nossa tabela chamada "todolist" (detalhe 15).
Como não temos nenhuma tarefa ainda não vai aparecer nada por enquanto, então já vamos resolver isso no próximo passo
Adicionando tarefas
Vamos começar adicionando uma nova página no nosso Power Apps, vá em "New screen" > "Blank" para adicionar uma página em branco, renomei-a para "AddTasks".
Se lembra do nosso componente "Page template", utilize ele novamente aqui nessa página
Para que nossa página de adicionar tarefas apareça no menu, vamos na propriedade "OnStart" do "App" na barra lateral esquerda. Procure pelas configurações de "settings for nav menu" repare que já existe um objeto que é nossa tela de Inicio, copie esse objeto e cole ele logo abaixo (detalhe 16), altere as propriedades de "Icon" para "Icon.Add", "linkName" para "Nova Tarefa", "toScreen" para "AddTasks" e por fim clique nos três pontinhos e vá em "Run OnStart" (detalhe 17) para as alterações que fizemos tenha efeito.
Criando inputs
Adicione um container e renomeio-o para "content", agora adicione um título assim como fizemos na tela da galeria, escreva algo como "Crie uma nova tarefa", dessa forma quem for acessar seu app sabe exatamente do que se trata essa tela, lembre-se de utilizar os tokens em "size" e "color" dessa forma nosso app se mantem consistente.
Agora vamos adicionar as inputs necessárias para criar uma tarefa, vá na nossa galeria de componentes e procure pela sessão de "inputs" e selecione "Text input" veja (detalhe 18).
Volte a nossa página de AddTasks no Power Apps e com botão direito do mouse vá em "Paste" > "Paste code" e sua input irá aparecer na tela.
Na input que surgiu na tela altere as propriedades de "Label" para "Tarefa", na propriedade "Hint Text" da própria input altere para algo como "Título da tarefa" (detalhe 19)
Adicione mais uma input do tipo "Text Input" e altere a "Label" para "Descrição", e no "Hint Text" altere para "Descrição da tarefa" mas dessa vez na barra lateral direita da input troque a propriedade "Mode" para "Multiline".
Nossas tarefas terão um campo de status onde vamos definir se elas ja foram concluidas, se estão em andamento ou se estão pendentes, para isso dessa vez vamos usar uma input do tipo "Dropdown Input", vá na nossa galeria de componentes e selecione-a e cole abaixo da input anterior.
Na nova input adicionada, em "Label" altere para "Status da tarefa" veja (detalhe 20), agora dentro do "dropdown" crie os nossos status no seguinte formato ["Pendente", "Andamento", "Concluida"] veja (detalhe 21), dessa forma uma tarefa nova já fica pré selecionada como "Pendente".
Vamos colocar um campo de data onde podemos dizer a data final da nossa tarefa.
Selecione uma input de "Data Picker Input" apartir da nossa galeria de componentes e cole na tela do Power Apps conforme já fizemos anteriormente. Altere a propriedade de "Label" para "Prazo final".
Por fim vamos colocar um botão do tipo primario com ícone a esquerda para quando o usuário clicar nele nós vamos salvar a tarefa na base do SharePoint.
Na nossa galeria de compoentes vá em "Buttons" e selecione o botão "Button icon Left" veja (detalhe 22) e cole-o na nossa tela do Power Apps, altere o texto do botão para "Criar Tarefa" e troque o ícone do botão para o de uma página com um "+" veja (detalhe 23) dessa forma além do texto do botão ajudamos o usuário do nosso aplicativo a entsender que esse botão tem a função de criar uma nova tarefa.
Horá de codar
Vamos criar a funcionalidade de enviar a tarefa para nossa base do SharePoint, selecione o botão que acabamos de criar e na propriedade "OnSelect" vamos fazer nossa lógica.
Basicamente iremos utilizar o Patch() veja (detalhe 24), para pegar os valores inseridos pelo usuário em cada uma das nossas inputs para atualizar nossa base de dados da maneira correta. Use a lógica abaixo:
Patch(
toDoList,
Defaults(toDoList),
{idTask: GUID()},
{titleTask: textInput.Text},
{descriptionTask: textInput_1.Text},
{statusTask: dropdown.Selected.Value},
{deadlineTask: datePickerInput.SelectedDate}
);
Repare que estamos pegando cada coluna que criamos no SharePoint e estamos pegando os valores das inputs que o usuário digitou para salvar nas suas respectivas colunas.
Coloque seu aplicativo em modo de preview e teste seu formulário afim de verificar se nossas tarefas serão salvas na nossa base de dados.
Para melhorar a usabilidade do nosso formulário podemos resetar as inputs para os valores default apoós o usuário criar uma tarefa, para isso utilize a função Reset(), logo abaixo da lógica que fizemos anteriormente.
Reset(textInput);
Reset(textInput_1);
Reset(dropdown);
Reset(datePickerInput);
Personalizando nossa galeria
Nós já fizemos o link da nossa galeria com a base de dados, vamos mostrar as tarefas agora.
Apartir da nossa galeria de componentes em "Cards" escolha o "Card Horizontal" e cole na tela do Power Apps conforme já fizemos anteriormente, repare que o card está fora da galeria selecione o card que acabamos de colar (detalhe 25) e com o atalho de recortar CTRL + x, selecione a galeria e cole com CTRL + v dentro dela o card, repare que a própria galeria já vai replicar os cards.
Por fim vamos ajustar a posição do card dentro galeria alterando as propriedades "X" e "Y" para 0.
Configurando a galeria
Vamos agora mostrar realmente as informações das tarefas que estão na nossa base de dados na galeria, para isso selecione o título do card atualmente chamado de "Main Title" e na propriedade "Text" altera para "ThisItem.titleTask" veja (detalhe 26).
Agora no card em "Sub Title" altere a propriedade propriedade "Text" para "ThisItem.deadlineTask"
Para mostrar o status das nossas tarefas selecione a "Label" e altere a propriedade "Text" para "ThisItem.statusTask"
Para a descrição de cada tarefa selecione o texto longo que já veio no card altere a propriedade "Text" para "ThisItem.descriptionTask", sua galeria deve estar como na imagem abaixo, caso não tenha criado nenhuma tarefa nos passos anteriores, tente criar algumas para popular nossa galeria.
Configurando os botões da galeria
Nossa galeria tel três botões onde podemos criar ações para eles, repare que os botões tem uma hierarquia
Agora no card em "Sub Title" altere a propriedade propriedade "Text" para "ThisItem.deadlineTask"
Para mostrar o status das nossas tarefas selecione a "Label" e altere a propriedade "Text" para "ThisItem.statusTask"
Para a descrição de cada tarefa selecione o texto longo que já veio no card altere a propriedade "Text" para "ThisItem.descriptionTask", sua galeria deve estar como na imagem abaixo, caso não tenha criado nenhuma tarefa nos passos anteriores, tente criar algumas para popular nossa galeria.