The following article describes 2 simple examples, how to create and use a custom ui5 library with its own controls. The first is a library named "UI5Utils" with Control "FeatureToggle", consumed in "My Paystubs" app (with no rendering). The second is a sample library with Control "Example", consumed in a sample app, just to demonstrate how to render some elements from the library. The both examples are focused to work with libs within the WebIDE workspace. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Case without Renderer --------- --------------------------------------------------------------------------------------------------------------------------------1. Right click on your Workspace → New → Project from Template. 2. Select Category → SAP Fiori Library → Next. 3. Put the Project name + Title, Namespace and Description → Finish. 4. Create a new Control. Right click on the Library folder → New → SAPUI5 Control. 5. Put the Name of the Control → Next. 6. Finish. To consume your new Custom library in some app within the WebIDE : 7. Include your new Custom Library into your application. Right click on the application folder → Project → Add Reference to Library. 8. Select the "Workspace" from the dropdown and check the checkbox of your library and click the "Add" button. 9. You can check the "neo-app.json" and "manifest.json" files, where we can see, that our library is mapped on the virtual directory "/resources". It is important to know, when you are creating the library out of WebIDE. Create new Configuration of your app as follows : 10. Right click on the app folder → Run → Run Configurations. 11. According your case, select "Run as Web Application" or "Run as SAP Fiori Launchpad Sandbox". 12. In URL Components tab add the new URL parameter : "sap-ui-xx-lesssupport" on true. 13. In Advanced Settings tab check the "Use my workspace first" checkbox. 14. To provide POC for WebIDE case is used "My Paystubs" app (My salary & electronic employment tax statement), where the newly created library with "FeatureToggle" Control (FeatureToggle.js) is included. So the path for "/util/FeatureModel" is commented out : // "hcm/mypaystubs/ZHCM_PAY_ELS/util/FeatureModel" in the "Component.js", and the path for the new library control "hcm/ui5utils/controls/FeatureToggle" is added. As well the whole folder "/util/FeatureModel.js" can be removed from the project as follows : The rest of code for the Feature Toggle functionality can remain untouched across the whole "My Paystubs" app (f.i. in controllers etc.), 15. Now the test run of the "My Paystubs" with new library. a. The "Deuv" item (the third in the dropdown) is visible and active. b. Switch off the feature "Deuv" in FTC. c. The "Deuv" feature is now disabled. The mentioned example above is created without rendering anything out, since the "FeatureToggle" Control has only functional, but not rendering purpose, so the "UI5Utils" lib contains no renderer file for this case. The "UI5Utils" library can has not only the "FeatureToggle" , but multiple Controls, such as Pernr Lock-check mechanism, or some validators, etc. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Case with Renderer --------- --------------------------------------------------------------------------------------------------------------------------------The following is a small example, how to use the renderer as well. If doing from the scratch, please first follow the steps from 1. to 13., but in the step 3. check the checkbox "Add sample control". It creates the "Example" Control with its renderer "ExampleRenderer". Then you can simply add the following xml shape of the Control "Example" directly into the view file of the consuming app: .. the library has its own "messagebundle.properties" file (similar to i18n), so we can use it as a text source for this showcase : .. then the "ExampleRenderer" gets it (via sap.ui.getCore().getLibraryResourceBundle("hcm.lib.ui5utility").getText("ANY_TEXT")) and the result is :
