CRUD operations in sapui5 using local JSON data

In this post we are going to learn how to create a CRUD Application in SAPUI5 using local JSON data. For JSON local data we can’t use methods like CREATE, UPDATE, DELETE/ POST, PUT, DELETE. What are all the changes we are doing will not store/create/delete from local JSON. All the changes are temporary. Once we refresh the browser every thing will be reset to default.

Post Content:

  • Creating the User Interface
  • Creating the project
  • Setting up the SAPUI5 bootstrap and required libraries
  • Creating the view components

Implementing the Controller’s methods:

  • Create
  • Update
  • Delete

Lets discuss step by step

  • Our application structure look like

json_crud1

 

  • Configure the SAPUI5 bootstrap with required libraries in index.html

 
index.html

json_crud_index

  • Create the view components

In our application we are using below UI elements

Code :
view1.view.js

Output:

json_crud2

  • In controller we have ONINIT, CREATE, EDIT and DELETE method to perform crud operation. Let’s discuss one by one.

 

 

We already created the buttons in view to trigger this events.

onInit:
Here we are creating JSON data locally and defining the JSON model and setting to core.

onSave:
This method is trigger when we click on save button, this method is using to create new product in list.

json_crud_save

editFunction:
This method is trigger when we click on edit button where we have written update functionality to update the existing product.

json_crud_edit

deleteFunction:
This method is trigger when we click on delete button where we have written delete functionality to deletethe product from list.

json_crud_delete