Excluir registros de dados em um aplicativo Web Oracle JET

Introdução

Este tutorial mostra como usar seu aplicativo Web Oracle JavaScript Extension Toolkit (Oracle JET) para excluir um registro de dados existente e enviar a alteração para um serviço REST.

Objetivos

Ao concluir este tutorial, você aprenderá a excluir um registro de dados existente e enviar a alteração para um serviço REST.

Pré-requisitos

Tarefa 1: Criar um Botão Excluir na Exibição

  1. Navegue até o diretório JET_Web_Application/src/ts/views e abra o arquivo dashboard.html em um editor.

  2. Localize o elemento oj-button id="updateButton" e adicione um elemento oj-button abaixo dele. Defina o atributo on-oj-action como "[[deleteItem]]" e o atributo disabled como "[[!itemSelected()]]".

    <oj-bind-if test="[[activitySelected()]]">
. . .
<oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
<!-- If itemSelected is set to false, disabled is true, and vice versa. -->
<oj-button id="updateButton" disabled="[[!itemSelected()]]" on-oj-action="[[showEditDialog]]">Update</oj-button>
<oj-button id="deleteButton" disabled="[[!itemSelected()]]" on-oj-action="[[deleteItem]]">Delete</oj-button>
<oj-list-view id="itemsList" 
. . .

  3. Salve o arquivo dashboard.html.

    Seu código deve ser semelhante a este arquivo final-delete-dashboard-html.txt.

Tarefa 2: Tratar Exclusão de Registros no ViewModel

Use a API de Extração e o método HTTP DELETE para excluir um registro do serviço REST. Use o método mutate da RESTDataProvider para atualizar sua instância RESTDataProvider.

  1. Navegue até o diretório JET_Web_Application/src/ts/viewModels e abra o arquivo dashboard.ts em um editor.

  2. Na classe DashboardViewModel, abaixo do código anterior que atualiza registros, crie um método chamado deleteItem.

    . . . 
public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
 . . .
 };

public deleteItem = async (event: ojButtonEventMap["ojAction"]) => {

};

  3. No método deleteItem criado, declare uma variável currentRow e use uma instrução if para confirmar se um item foi selecionado.

    public deleteItem = async (event: ojButtonEventMap["ojAction"]) => {

 const currentRow = this.selectedRow;

 if (currentRow != null) {
   }

};

  4. Adicione outra instrução if para verificar a confirmação do usuário, depois adicione código para enviar uma solicitação para excluir o item selecionado para o serviço REST e, finalmente, atualize a instância RESTDataProvider.

    public deleteItem = async (event: ojButtonEventMap["ojAction"]) => {

 let itemID = this.firstSelectedItem().data.id;

 const currentRow = this.selectedRow;
 if (currentRow != null) {
   let really = confirm("Are you sure you want to delete this item?");
   if (really) {
     // Create and send request to delete row on REST service
     const request = new Request(
       `${this.restServerURLItems}${itemID}`,
       { method: "DELETE" }
     );
     const response = await fetch(request);
     // Create remove mutate event and call mutate method
     // to notify data-provider consumers that a row has been
     // removed
     if (response.status === 200) {
       const removedRowKey = itemID;
       const removedRowMetaData = { key: removedRowKey };

       this.itemsDataProvider.mutate({
         remove: {
           data: [itemID],
           keys: new Set([removedRowKey]),
           metadata: [removedRowMetaData],
         },
       });
       this.itemsDataProvider.refresh();

     }
     else {
       alert("Delete failed with status " + response.status + " : " + response.statusText)
     }
   }
 }
}; // End deleteItem

  5. Salve o arquivo dashboard.ts.

    Seu código deve ser semelhante a este arquivo final-delete-dashboard-ts.txt.

Tarefa 3: Executar o Aplicativo Web e Excluir um Registro

  1. Na janela do terminal, execute seu aplicativo Web.

    $ ojet serve

  2. No aplicativo, clique na atividade Baseball e, em seguida, clique no item SureFire Ball (Conjunto de 4).

  3. Clique no botão Deletar. Uma janela de confirmação é aberta.

  4. Clique em OK.

    A seção é atualizada e o item foi excluído.

  5. Feche a janela ou guia do browser que exibe seu aplicativo Web em execução.

  6. Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair do job em batch de ferramentas do Oracle JET.

Tarefa 4: (Opcional) Executar um Aplicativo Web de um Aplicativo Restaurado

Se quiser executar o aplicativo Web Oracle JET concluído do código fornecido, você poderá restaurar o aplicativo do arquivo compactado baixado. Para trabalhar com um aplicativo Oracle JET "distribuído e compactado", você deve restaurar as dependências do projeto, incluindo o conjunto de ferramentas Oracle JET e as bibliotecas e módulos necessários, dentro do aplicativo extraído.

  1. Faça download do arquivo jet_rest_crud_application_final.zip e extraia o conteúdo do aplicativo concluído para a pasta jet_rest_crud_application_final.

  2. Na janela do terminal, navegue até a pasta jet_rest_crud_application_final e restaure o aplicativo Web Oracle JET.

    $ ojet restore

  3. Aguarde a confirmação.

    Success: Restore complete

    O aplicativo está pronto para ser executado.

  4. Execute o aplicativo Web e teste no browser.

    $ ojet serve

  5. Feche a janela ou guia do browser que exibe seu aplicativo Web em execução.

  6. Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair do job em batch de ferramentas do Oracle JET.

Mais Recursos de Aprendizagem

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal YouTube do Oracle Learning. Além disso, visite education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.