CRUD(acrónimodoinglêsCreate,Read,Update andDelete) são as quatro operações básicas (criação, consulta, atualização e destruição de dados) utilizadas embases de dadosrelacionais fornecidas aos usuários do sistema. Neste tutorial iremos criar um CRUD de forma manual, porém, a ide do Cronapp oferece uma forma automática de criação do CRUD ao gerar o formulário, clique aqui para conferir.
Figura 1 - Componente CRUD rodando na web
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome
Propriedade
Função
Identificador
id
Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
Estilo
style
Altera o estilo do componente de forma inline.
Exibir
ng-show
Propriedade Angular usada para exibir ou ocultar o componente.
Repetir
crn-repeat
Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança
cronapp-security
Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados.
Classes CSS
class
Adiciona classes CSS que já foram criadas.
Aba de Estilos
O componentes CRUD não possui propriedade de estilo específicas.
Componentes
O componente CRUD possui ao todo, seis elementos, confira na figura 2.
Figura 2 - Elementos do CRUD
Fonte de dados, responsável por alimentar o CRUD com as informações que serão exibidas na grade.
Entrada de texto, por padrão, o nome e a sugestão da entrada de texto no CRUD, são destinados à pesquisa.
Grade, local onde será exibido, em forma de tabela, os campos da fonte de dados escolhidos pelo usuário.
Formulário, componente que permite visualizar, cadastrar, editar e excluir o registro ativo dafonte de dadosvinculada.
Configuração
Vincular fonte de dados
Ao adicionar o componente CRUD na view, o mesmo já vem com uma fonte de dados vinculada, inicialmente precisamos definir qual fonte usaremos, ela servirá para alimentar a grade e o formulário. Ao clicar sobre a fonte será exibida a janela Lista de Fonte de dados, selecione a fonte de sua preferência, para este exemplo utilizaremos uma fonte de dados de cadastro de postos de abastecimento.