https://github.com/mauriciolauffer/openui5-model-json-crud

An OpenUI5 library which extends JSONModel to support CRUD operations
https://github.com/mauriciolauffer/openui5-model-json-crud

crud javascript jsonmodel openui5 openui5-framework plugin sap sapui5 ui5

Last synced: 3 months ago
JSON representation

An OpenUI5 library which extends JSONModel to support CRUD operations

• Host: GitHub
• URL: https://github.com/mauriciolauffer/openui5-model-json-crud
• Owner: mauriciolauffer
• License: mit
• Created: 2018-09-04T06:09:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-05T00:39:46.000Z (about 1 year ago)
• Last Synced: 2024-10-09T10:06:25.255Z (4 months ago)
• Topics: crud, javascript, jsonmodel, openui5, openui5-framework, plugin, sap, sapui5, ui5
• Language: JavaScript
• Homepage: https://mauriciolauffer.github.io/openui5-model-json-crud/demo/webapp/index.html
• Size: 856 KB
• Stars: 10
• Watchers: 5
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# openui5-model-json-crud

[![npm](https://img.shields.io/npm/v/openui5-model-json-crud)](https://www.npmjs.com/package/openui5-model-json-crud) [![test](https://github.com/mauriciolauffer/openui5-model-json-crud/actions/workflows/test.yml/badge.svg)](https://github.com/mauriciolauffer/openui5-model-json-crud/actions/workflows/test.yml)

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:

![Demo Screenshot](./openui5-model-json-crud.png)

## 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

```sh

$ 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:

```json

{

  "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*:

```javascript

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

* LinkedIn: [https://www.linkedin.com/in/mauriciolauffer](https://www.linkedin.com/in/mauriciolauffer)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details