{"id":20484500,"url":"https://github.com/sap-samples/fiori-elements-fpm-exercises-codejam","last_synced_at":"2025-10-25T12:46:13.127Z","repository":{"id":234170015,"uuid":"786854303","full_name":"SAP-samples/fiori-elements-fpm-exercises-codejam","owner":"SAP-samples","description":"Material for SAP CodeJam events about the SAP Fiori elements flexible programming model. Step-by-step guide explaining how to build a frontend web application using SAP Fiori elements.","archived":false,"fork":false,"pushed_at":"2024-09-03T11:07:43.000Z","size":3709,"stargazers_count":19,"open_issues_count":1,"forks_count":5,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-01-16T04:26:47.873Z","etag":null,"topics":["exercises","fiori-elements","owner-nicoschoenteich","sample","sap-cap","sap-codejam","sap-fiori","sapui5"],"latest_commit_sha":null,"homepage":null,"language":"CAP CDS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SAP-samples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-04-15T12:36:09.000Z","updated_at":"2024-12-31T09:00:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"24d4ebf8-2825-4740-9e1c-de94e4d6748c","html_url":"https://github.com/SAP-samples/fiori-elements-fpm-exercises-codejam","commit_stats":null,"previous_names":["sap-samples/fiori-elements-fpm-exercises-codejam"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Ffiori-elements-fpm-exercises-codejam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Ffiori-elements-fpm-exercises-codejam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Ffiori-elements-fpm-exercises-codejam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Ffiori-elements-fpm-exercises-codejam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SAP-samples","download_url":"https://codeload.github.com/SAP-samples/fiori-elements-fpm-exercises-codejam/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242058222,"owners_count":20065066,"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","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":["exercises","fiori-elements","owner-nicoschoenteich","sample","sap-cap","sap-codejam","sap-fiori","sapui5"],"created_at":"2024-11-15T16:23:21.547Z","updated_at":"2025-10-25T12:46:13.072Z","avatar_url":"https://github.com/SAP-samples.png","language":"CAP CDS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SAP CodeJam - SAP Fiori elements flexible programming model\n\n[![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/fiori-elements-fpm-exercises-codejam)](https://api.reuse.software/info/github.com/SAP-samples/fiori-elements-fpm-exercises-codejam)\n\nThis repository contains material for SAP CodeJam events on the SAP Fiori elements flexible programming model.\n\nPlease check the [prerequisites](/chapters/00-prep-dev-environment/readme.md#1-prerequisites) before the event an make sure you meet them.\n\n## Overview\n\nThe material in this repository introduces you to the [SAP Fiori elements](https://ui5.sap.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd), more specifically its [flexible programming model](https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/overview/introduction). With SAP Fiori elements developers can create metadata-driven frontend applications that require little to no custom coding. This greatly improves the maintainability and UX consistency of these application, which are enterprise-ready out of the box. By selecting one of the available [floorplans](https://ui5.sap.com/#/topic/797c3239b2a9491fa137e4998fd76aa7.html) (think \"application layouts\"), developers can solely focus on the business logic. In addition to that, the SAP Fiori elements flexible programming model provides extension points to inject custom layouts and logic into the predefined floorplans. Therefore, the SAP Fiori elements flexible programming model bridges the gap between SAP Fiori elements and [freestyle UI5 development](https://github.com/SAP-Samples/ui5-exercises-codejam).\n\nThis repository is a step-by-step guide explaining how to build a bookshop application using the SAP Fiori elements flexible programming model. The finished application is a bookshop, where users can browse and order books. The OData backend service for this application was built using the Node.js flavour of SAP Cloud Application Programming Model (SAP CAP). It is a slightly modified version of the well-know [bookshop example](https://github.com/capire/bookshop). You can inspect it in the `bookshop/` directory.\n\nAfter working through all the chapters, following the instruction, and reading the explanations, you will be able to develop your own applications using the SAP Fiori elements as well as its flexible programming model.\n\n![app](app.png)\n\n## Previous Knowledge\n\nThe material in this repository aims to be beginner friendly. While it certainly helps to have prior (web) development or even UI5 experience, beginners will still be able to follow along - even with no prior knowledge. In any case, make sure you read the instructions and explanations thoroughly to have the best learning experience possible.\n\n## Material Organization\n\nThe material consists of a series of chapters, each in their own directory. The chapters build on top of each other and are meant to be completed in the given order. Each of the [chapters](#chapters) has its own 'readme' file with instructions, explanations, code samples, and screen shots. From a session flow perspective, we are taking a \"coordinated\" approach:\n\nThe instructor will set you off on the first chapter. Do not proceed to the next chapter until the instructor tells you to do so. If you finish a chapter before others, there are some questions at the end of each chapter for you to ponder.\n\n\u003e The exercises are written in a conversational way - this is so that they have enough context and information to be completed outside the hands-on session itself. To help you navigate and find what you have to actually do next, there are pointers like this ➡️ throughout that indicate the things you have to actually do (as opposed to just read for background information).\n\n## Chapters\n\n- [00 - Preparing the development environment](/chapters/00-prep-dev-environment/)\n- [01 - Running the SAP CAP application](/chapters/01-run-cap-app/)\n- [02 - Creating the SAP Fiori elements application](/chapters/02-create-fe-app/)\n- [03 - Creating a custom section via an extension point](/chapters/03-custom-section-via-extension-point/)\n- [04 - Using the JavaScript handler](/chapters/04-handler/)\n- [05 - Adding a controller extension](/chapters/05-controller-extension/)\n- [06 - Adding a building block](/chapters/06-building-block/)\n- [07 - Adding formatting via CDS annotations](/chapters/07-formatting-via-cds-annotations/)\n- [08 - Adding value help via CDS annotations](/chapters/08-value-help-via-cds-annotations/)\n- [09 - Adding a header section via CDS annotations](/chapters/09-header-section-via-cds-annotations/)\n\n## Support\n\nSupport for the content in this repository is available during SAP CodeJam events, for which this content has been designed. Otherwise, this content is provided \"as-is\" with no other support.\n\n## Contributing\nIf you wish to contribute code, offer fixes or improvements, please send a pull request. Due to legal reasons, contributors will be asked to accept a DCO when they create the first pull request to this project. This happens in an automated fashion during the submission process. SAP uses [the standard DCO text of the Linux Foundation](https://developercertificate.org/).\n\n## License\nCopyright (c) 2025 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](/LICENSE) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsap-samples%2Ffiori-elements-fpm-exercises-codejam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsap-samples%2Ffiori-elements-fpm-exercises-codejam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsap-samples%2Ffiori-elements-fpm-exercises-codejam/lists"}