Utilization of External or Third-Party Resources in SAPUI5. Section I: Synopsis

How Does SAPUI5 Use External Resources?
It’s always fun to experiment with SAPUI5 programming. After all, creating such slick and responsive SAP programs is not appropriate for plain ABAP. But relying just on the SAPUI5 API won’t be enough to deliver projects that meet the high standards of today’s customers. It is certain that we will need to access outside resources in order to do our assignment. After all, SAP has a strong reason to open up to the wider world.
It was a mountain climb for me to deliver the simplest app when I was honing my SAPUI5 skills. When I used to look for resolution on Google or SAP SCN, I tried to provide the best possible key terms. I was fortunate several times and unlucky others. I’ve encountered these circumstances multiple times in my developing career. I had to work hard to learn the tricks of the programming industry.
I’ll stop crying like a baby now. I aim to present you step-by-step solutions to commonly needed concepts and solutions in actual SAP projects in this post and the ones that will come after. You shouldn’t have to endure the same hardships that I did. Furthermore, there’s no need to keep inventing the wheel. My intention is that by the time someone leaves this website, they will have a resolution in their possession.
I would go over the ideas, synopsis, and speculations in this post. You dislike theories, I know that. Actually, I too detest theories. But it is useless and unproductive to move on to the practical without having a firm grasp of our notions. So please take a moment to read over these important tips, which will help you develop those slick, calming apps. You would undoubtedly recall me back then. 🙂

Step 2: There are two methods for utilizing outside resources.

Online resources (a)
local resources (b).

We must be extremely cautious when it comes to our clients’ expectations because the majority of organizations prefer their applications to have offline capabilities. We will need to load materials locally if they would rather work offline.Don’t worry; we’ll find out shortly.

Step 3: We’ll start by investigating online resource loading.

You can add resources to “index.html” or “Component.js.”.html’ or ‘Component.js’.
I like to load the resources in the component.js file since, if you look closely at SAP Fiori, the loading begins there. When in doubt, always take the usual SAP route.

How Can Resources Be Added?

Grammar:

vUrl, sId?, fnLoadCallback?, fnErrorCallback?) in jQuery.sap.includeScript

Example: A few instances are given below. I’m using just the URl and the “JQuery” library in this example. Other attributes are also available for consideration.

Here are a few of the properties to examine:

vUrl: Enter the web address you wish to load. sId: The resource’s ID.
fnLoadCallback: This function is also known as a “success” function.
fnErrorCallBack: This is a “Error” function that alerts the caller if there is a problem.

includeScript("http://code.jquery.com/jquery-1.9.1.min.js"); jQuery.sap.includeScript;

Where should the code be placed?

As previously mentioned, you must insert the code into component.js or any other controller that you wish to use it in.

As you can see, I used three different internet sites to create this code sample. The same is applicable to any controller file.

Note: Try to stay away from using online resource loading as it could slow down the loading of your application and have an adverse effect on performance. Depending on the need, you can use them.

Step 3: It’s time to locally load the resources.

Let’s look at how to load local resources now. In order to add your materials, create a new folder. You can give a folder whatever name you choose. I would rather call it “libs,” “resources,” “util,” or “library.”

Edit/Right-click the webapp and select “New” > “Folder.”

Step 4: Make a file with the appropriate name.
I will be using “JQueryLib.js” in this example.

Edit/Right-click “Resource Folder” > Choose File > New.

Enter the file name and click “Ok.”

Step 4: Paste the URL into your browser to obtain the source code. There will be JS code when you run the URL. Simply copy the entire URL’s code.

Step 5: Pasting the code into the “JQueryLib.js” local file you created earlier

Important to Know: It’s possible that you won’t see a formatted code—which is difficult to analyze—when you paste the code into your local file. “Beautify” is a great way to format your code in the WebIDE. Kindly select the “Beautify” option. You can use “Edit > Beautify” or “Ctrl + Alt + B” to accomplish it.

There are internet JSON beautifiers available for individuals who use Eclipse.Not required if you wish to avoid code analysis.

Step 6: It is insufficient to just include the file in your application. I promise there will be one last thing you need to do.The data source path must be supplied, just like with any other script or CSS file.

Best Practice: Please refrain from loading files in “index.html,” as was previously mentioned. Choose “Component.js” or the particular controller that has the resource you wish to use.

i. Loading in component.js, commonly known as global loading.