In the realm of SAP Business Application Studio (BAS), the journey of integrating custom UI5 libraries into your projects can sometimes feel like navigating through a labyrinth. As a developer, I recently encountered this challenge firsthand while working on a project that required frequent deployment of a custom UI5 library. Each deployment was not only time-consuming but also seemed unnecessary given the local resources at hand.
Upon delving into the depths of the SAP BAS ecosystem and scouring through community insights, I stumbled upon a revelation: the solution might be closer than anticipated. Initially inspired by @MioYasutake's blog post on How to consume UI5 custom libraries in BAS or VS Code?, I embarked on a quest to streamline this process further. Little did I know that SAP BAS had already laid the groundwork for simplifying this intricate task just like we had in SAP WebIDE.
Unveiling the Magic of SAP BAS
In SAP Business Application Studio, the process of linking or consuming custom SAPUI5 libraries is a breeze, provided you know where to look and how to wield the tools at your disposal. Let's break down the steps:
1. Fiori Add Reference to SAP Fiori Reusable Libraries: Navigate to the Command Palette and execute this command. A prompt will emerge, prompting you to select the desired local libraries from your workspace. Once selected, a simple click on "Finish" sets the wheels in motion.
SAP Fiori Reuseable Library wizard2. Manifest.json and ui5.yaml: With a flick of the wand, SAP BAS updates the manifest.json and ui5.yaml files seamlessly, paving the way for a harmonious integration.
myApplication's manifest file
myApplication's ui5-yaml file3. A Minor Hiccup: However, as with any magical endeavor, a small hiccup ensued. Attempting to run the application via npm run start led to an error. The culprit? The application struggled to locate the requisite files within the designated path.
first npm run start errorMastering the ui5.yaml and ui5/cli Commands
Fear not, for every setback is merely an opportunity to unravel the mysteries of the ui5.yaml file and the power of ui5/cli commands.
1. Understanding Source and Build Code: In the realm of application development, code is bifurcated into source and build code. While source code houses our logic, build code represents its minified counterpart. The error encountered during npm run start stemmed from the search for minified files in the "/src" directory, leading us to our next step.
2. Executing ui5 build: By invoking the ui5 build command in the terminal, we initiate the transformation of source code into its minified form. Voila! The "/dist" folder now houses the coveted minified files.
NOTE: Ensure that the ui5 build command is utilized for each modification to the library. This is essential to ensure that the changes are properly reflected in application locally.
NOTE: the build path can be changed in package.json file. But its better to build the files at /dist directory.
3. Mapping Paths: With the minified code at our disposal, it's imperative to update the manifest.json file within the SAP UI5 application. By providing the relative path to the library's "/dist" folder, we ensure seamless integration.
Now if you execute npm run start for UI5 application everything works fine!
Congratulations!! 🎉
You now can load custom SAP UI5 library from your local workspace without worrying to remove any temp code everytime during deployment!
Conclusion: Empowered by Knowledge
With SAP Business Application Studio's intuitive features and the understanding of key files like manifest.json and ui5.yaml, consuming #custom UI5 libraries becomes a breeze. By following these steps, you can streamline your development workflow and focus on building innovative UI5 applications without the headache of repetitive deployment tasks. Congratulations on simplifying your library deployment process
- SAP Managed Tags:
| User | Count |
|---|---|
| 4 | |
| 3 | |
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
