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



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



  • Create the view components

In our application we are using below UI elements

Code :



  • 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.

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

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


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


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


Are you new to SAPUI5? May be you would like to learn SAPUI5 from beginning. Start your learning process with us for FREE!! Read More at SAPUI5 Complete Tutorials