Skip to content

An OpenUI5 library which extends JSONModel to support CRUD operations via REST API with optional OAuth authentication

License

Notifications You must be signed in to change notification settings

KaiRoesner/openui5-model-json-crud

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

openui5-model-json-crud

npm test

An OpenUI5 library which extends JSONModel to support CRUD (Create, Read, Update, Delete) operations. It uses fetch (not jQuery.ajax) to send requests to the server and populates a JSON Model with the responses. As aforementioned, OpenUI5 CRUD JSON Model uses fetch hence it returns Promises.

Demo

You can check out a live demo here:

https://mauriciolauffer.github.io/openui5-model-json-crud/demo/webapp/index.html

Demo Screenshot

Project Structure

  • demo - Library's live demo
  • dist - Distribution folder which contains the library ready to use
  • src - Development folder
  • test - Testing framework for the library

Getting started

Installation

Install openui5-model-json-crud as an npm module

$ npm install openui5-model-json-crud

Configure manifest.json

Add the library to sap.ui5/dependencies/libs and set its path in sap.ui5/resourceRoots in your manifest.json file, as follows:

{
  "sap.ui5": {
    "dependencies": {
      "libs": {
        "openui5.model.json.crud": {}
      }
    },
    "resourceRoots": {
      "openui5.model.json.crud": "./FOLDER_WHERE_YOU_PLACED_THE_LIBRARY/openui5/model/json/crud/"
    }
  }
}

How to use

Import openui5-model-json-crud to your UI5 controller using sap.ui.define or sap.ui.require:

sap.ui.require([
  'openui5/model/json/crud/CRUDModel'
], function(CRUDModel) {
  const serviceUrl = 'https://api.jikan.moe/v3/'; //backend root URL
  const crudModel = new CRUDModel(serviceUrl);
  this.getView().setModel(crudModel, 'CRUDModel');
  //'search/anime?q=DBZ' is the path to the service to be called, it'll be concatenated to serviceUrl
  //'/DBZ' is the path to the property into the model, in case you want to updated the model with the response;
  // empty value does not update the local model, it only returns the response
  crudModel.read('search/anime?q=DBZ', '/DBZ')
    .then(function() {
      console.log('Data selected from API');
    })
    .catch(function(err) {
      console.error(err.toString());
    });
});

Author

Mauricio Lauffer

License

This project is licensed under the MIT License - see the LICENSE file for details

About

An OpenUI5 library which extends JSONModel to support CRUD operations via REST API with optional OAuth authentication

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.1%
  • HTML 8.9%