{"id":30642238,"url":"https://github.com/marianfoo/ui5-call-action","last_synced_at":"2025-08-31T02:07:13.839Z","repository":{"id":305637821,"uuid":"1021318235","full_name":"marianfoo/ui5-call-action","owner":"marianfoo","description":"A CAP/UI5 Sample to showcase the possibilities to call backend action from frontend with code","archived":false,"fork":false,"pushed_at":"2025-07-23T06:53:51.000Z","size":247,"stargazers_count":18,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-28T15:04:54.054Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marianfoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-17T08:11:10.000Z","updated_at":"2025-08-19T03:53:13.000Z","dependencies_parsed_at":"2025-07-21T09:16:53.592Z","dependency_job_id":"b536b38d-b136-4e1f-b576-b4906fb72e37","html_url":"https://github.com/marianfoo/ui5-call-action","commit_stats":null,"previous_names":["marianfoo/ui5-call-action"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marianfoo/ui5-call-action","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-call-action","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-call-action/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-call-action/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-call-action/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marianfoo","download_url":"https://codeload.github.com/marianfoo/ui5-call-action/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-call-action/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272930015,"owners_count":25017058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-31T02:07:13.323Z","updated_at":"2025-08-31T02:07:13.831Z","avatar_url":"https://github.com/marianfoo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SAP CAP Action Extensions Demo\n\nBlog Post about this repository:\nhttps://community.sap.com/t5/technology-blog-posts-by-members/the-complete-guide-to-calling-actions-in-ui5-with-custom-code/ba-p/14156201\n\n\n\n## Quick Start\n\n```bash\ngit clone https://github.com/marianfoo/ui5-call-action.git\ncd ui5-call-action\nnpm install           # installs CAP, UI5 tooling, ESLint, etc.\nnpm run watch             # starts CAP + all UI5 apps on http://localhost:4004\n````\n\nOpen in your browser:\n\n| App                       | URL                                                                                                                |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| **UI5 V4 Fiori Elements** | [http://localhost:4004/com.marianzeis.books/index.html](http://localhost:4004/com.marianzeis.books/index.html)     |\n| **UI5 V2 Fiori Elements** | [http://localhost:4004/com.marianzeis.booksv2/index.html](http://localhost:4004/com.marianzeis.booksv2/index.html) |\n| **UI5 V4 Freestyle**      | [http://localhost:4004/com.freestyle/index.html](http://localhost:4004/com.freestyle/index.html)                   |\n| **UI5 V2 Freestyle**      | [http://localhost:4004/com.freestyle-v2/index.html](http://localhost:4004/com.freestyle-v2/index.html)             |\n\n\n### Prerequisites\n\n| Tool    | Min Version | Install                |\n| ------- | ----------- | ---------------------- |\n| Node.js | 18 LTS      | —                      |\n| cds-dk  | 7.x         | `npm i -g @sap/cds-dk` |\n| git     | any         | —                      |\n\n---\n\n##  What’s Inside\n\n| Layer                 | Folder              | Highlights                                                   |\n| --------------------- | ------------------- | ------------------------------------------------------------ |\n| **CAP Service**       | `srv/`              | `.cds` definitions + JavaScript handlers                     |\n| **Fiori Elements V4** | `app/books/`        | CAP-annotated *CAP* buttons + custom extensions (*CUST*)     |\n| **Fiori Elements V2** | `app/books-v2/`     | Same patterns, but UI5 V2                                    |\n| **Freestyle V4**      | `app/freestyle/`    | `bindContext().invoke()` (✅) \u0026 `execute()` (legacy) + all action types |\n| **Freestyle V2**      | `app/freestyle-v2/` | `ODataModel.callFunction()` - **limited action support** ⚠️ |\n\nA full walk-through is available as a blog post → **“Complete Guide to Calling Actions in UI5 with Custom Code”** (link coming soon).\n\n---\n\n## Action \u0026 Function Types\n\n| Type         | Scope   | Params? | Example              | Purpose                  |\n| ------------ | ------- | ------- | -------------------- | ------------------------ |\n| **Action**   | Bound   | ✔ / ✖   | `promoteBook()`      | Write side-effects       |\n|              | Bound*  | ✔       | `massHalfPrice()`    | Collection-level actions |\n|              | Unbound | ✔ / ✖   | `refreshCatalog()`   | Service-wide mutations   |\n| **Function** | Bound   | ✖       | `getCurrentPrice()`  | Read-only, entity level  |\n|              | Unbound | ✖       | `getSumBookPrices()` | Read-only, service level |\n\n***Bound\\*** = Collection-bound actions (bound to collection, not specific entity instance)\n\n### ⚠️ V2 Limitations\n\n| Feature | V4 Support | V2 Support | Notes |\n|---------|------------|------------|-------|\n| Collection-bound actions | ✅ | ❌ | V2 OData adapter doesn't support collection-bound actions properly [capire](https://cap.cloud.sap/docs/cds/cdl#bound-actions)/[capire](https://cap.cloud.sap/docs/guides/providing-services#actions-functions)/[UI5 Doc \"Static Action\"](https://ui5.sap.com/#/topic/cbf16c599f2d4b8796e3702f7d4aae6c) |\n| Complex nested parameters | ✅ | ❌ | `createBooksAndChapters` not available in V2 |\n| Simple bound/unbound actions | ✅ | ✅ | Works in both V4 and V2 |\n| Functions | ✅ | ✅ | Works in both V4 and V2 |\n\nSee [`srv/bookshop-service.cds`](srv/bookshop-service.cds) for the full catalog.\n\n---\n\n## Implementation Matrix\n\n| Operation                       | Context | Params   | **CAP** Button | **CUST** Implementation                                   |\n| ------------------------------- | ------- | -------- | -------------- | --------------------------------------------------------- |\n| `promoteBook`                   | bound   | –        | ✅              | `customPromoteBook` (V4) / `customPromoteBookInvoke` (V2) |\n| `setDiscount`                   | bound   | ✔        | ✅              | `customSetDiscount` (V4/V2)                               |\n| `halfPrice`                     | bound   | –        | ✅              | Object-Page action                                        |\n| `addChapter`                    | bound   | ✔        | ✅              | Object-Page action                                        |\n| `massHalfPrice`                 | bound*  | ✔        | ✅              | `executeMassHalfPrice` / `invokeMassHalfPrice` (**V4-only**) |\n| `refreshCatalog`                | unbound | –        | ✅              | `customRefreshCatalog` (V4/V2)                            |\n| `generateReport`                | unbound | ✔        | ✅              | `customGenerateReport` (V4/V2)                            |\n| `createBooksAndChapters`        | unbound | ✔ (deep) | ✅              | `customCreateBooksAndChapters` (**V4-only**)              |\n| `getCurrentPrice` *(function)*  | bound   | –        | ✅              | `customGetCurrentPrice` (V4) / function call (V2)         |\n| `getSumBookPrices` *(function)* | unbound | –        | ✅              | `customGetSumBookPrices` (V4) / function call (V2)        |\n\n---\n\n## API Cheat Sheet (+ Docs)\n\n| UI5 Version        | Helper                         | Doc                                                                                                                         | Notes                                       |\n| ------------------ | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |\n| **V4 (FE)**        | `getEditFlow().invokeAction()` | [API](https://ui5.sap.com/#/api/sap.fe.core.controllerextensions.EditFlow%23methods/invokeAction)                           | Bound \u0026 unbound, handles draft/side-effects |\n| **V4 (Freestyle)** | `bindContext().invoke()`       | [API](https://ui5.sap.com/#/api/sap.ui.model.odata.v4.ODataContextBinding%23methods/invoke)                                 | Requires UI5 ≥ 1.123                        |\n|                    | `bindContext().execute()`      | [API](https://ui5.sap.com/#/api/sap.ui.model.odata.v4.ODataContextBinding%23methods/execute)                                | Deprecated in 1.123, still works            |\n| **V2 (FE)**        | `extensionAPI.invokeActions()` | [API](https://ui5.sap.com/#/api/sap.suite.ui.generic.template.ListReport.extensionAPI.ExtensionAPI%23methods/invokeActions) | Bound  \u0026 unbound actions, multi-select            |\n| **V2 (any)**       | `ODataModel.callFunction()`    | [API](https://ui5.sap.com/#/api/sap.ui.model.odata.v2.ODataModel%23methods/callFunction)                                    | Low-level, works everywhere                 |\n\nNeed OData V2 in CAP? Install the community adapter:\n\n```bash\nnpm i -D @cap-js-community/odata-v2-adapter\n# → service on http://localhost:4004/odata/v2/\u003cserviceName\u003e\n```\n\n---\n\n## Best Practices\n\n1. **Prefer CAP annotations** for business logic \u0026 standard UI; fallback to CUST code for dialogs, defaults, or cross-entity tasks.\n2. **V4 first** – new features land here first; V2 is legacy.\n3. **Batch \u0026 Side-effects** – use `groupId` + `requestSideEffects()` in freestyle apps.\n4. **Error handling** – let EditFlow/helpers surface messages; add `MessageBox` only for edge cases.\n5. **Deprecations** – migrate from `execute()` → `invoke()` when upgrading to UI5 1.123+.\n\n---\n\n## Try it Out\n\n* Look for **CAP \\*** buttons (auto-generated) vs. **CUST \\*** buttons (custom).\n* Use your browser’s **Network tab** to compare the OData payloads.\n* Switch between **V2** and **V4** apps to see the path differences (`BookshopService.promoteBook(...)` vs `/Books_promoteBook`).\n* Test **collection-bound actions** like `massHalfPrice` (V4 only) and complex actions like `createBooksAndChapters` (V4 only).\n* Note: **V2 has limitations** - collection-bound actions and complex nested parameters don't work.\n\n---\n\n## Further Reading\n\n* **UI5 Official Docs** – [Actions \u0026 Functions (V4)](https://ui5.sap.com/#/topic/0ec2820b6c0d46d6b82858dfe720c317) | [OData V2 Model](https://ui5.sap.com/#/api/sap.ui.model.odata.v2.ODataModel)\n* **CAP Docs** – [Modeling Actions \u0026 Functions](https://cap.cloud.sap/docs/guides/actions)\n* **Blog Post** – Complete walkthrough with screenshots \u0026 code explanations (link forthcoming).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fui5-call-action","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarianfoo%2Fui5-call-action","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fui5-call-action/lists"}