Thursday, March 26

Steps for making changes to existing custom UI5 App


If you want to make changes in an existing custom UI5 app which is deployed on ABAP repository, this blog will guide you through the steps.
First you need to download the app from ABAP repository
Then, import it in eclipse
Then, make changes in the app in eclipse as per business requirements
Then, deploy the app with the same technical name or a different technical name. Capture this deployment in a TR.
Download application source code from ABAP repository
For this, login to SAP system as shown below. Enter logon credentials at below screen.
You will be taken to SAP Easy Access screen as shown below













Enter tcode SE38 in the commmad line










On the following screen, run the program called /UI5/UI5_REPOSITORY_LOAD as shown below















Click on execute button. On the screen that follows, enter the technical name of the application you identified previously. See below. Select the Download radio button since you want to download the source code of this application and then import in eclipse.

Click on execute button, you will be asked to select a location on your local machine for saving the folder of source code of this application

Select a folder or create a new folder at a specific location of your choice. And click on OK button. Below popup will then display

On this popup, check the checkbox ‘Remember my decision’ and click on Allow. Then system will display the summary of the files which will be downloaded

Scroll towards the bottom and click on ‘Click here to download’ button

On the popup that appears, click on continue

On the popup that appears next, check the checkbox ‘Remember my decision’ and click on allow

Done. Your application source code is now downloaded in a local folder. See below message

Importing the downloaded App in Eclipse for making changes in source code
Now let us import this application source code in eclipse to make changes as per business requirements. Open Eclipse.

Go to File->Import…






































Select Existing project into Workspace option as shown below

On the subsequent screen in the wizard, browse and select the folder which was downloaded from SAP system and then click on next





































Click on Finish. This will create a project in project explorer view of Eclipse.


Sometimes, there are some junk characters which appear in the JS files or json files which are downloaded from ABAP repository and hence some errors will be displayed in the project, refer above picture. In order to resolve these, refer the same code file in SE80  tcode in the ABAP frontend server and make same changes or remove unnecessary characters from files while comparing the code with code available in ABAP repository.
In my case, these are the special characters appearing on the File

So now I am going to SE80 and opening the same file and going to line no .115 to see what is causing these special characters and is it ok to remove/comment this code or remove the special characters and do away with the error.

Here, we can see that the source code need not commented. It is required and so I will remove the special characters from Eclipse file and make it error free manually.

Cleaning done, this is how it looks like now and error free. So, now the project is error free and ready for making code changes for business requirements. Once you are done with the necessary changes to the application, its time to deploy the changed app on ABAP repository. Here, you can decide to overwrite the existing app source code on the server or you can create a brand new app for deploy the changed source code under it. Here I will deploy the code under new app.
Deploying the App to ABAP repository
Right click on the app and select team->Share






































Select SAPUI5 ABAP repository from below

Enter ABAP frontend system’s details to deploy the App on it

Enter logon credentials. Ensure that this user has developer key assigned and developer roles given to it and using this ID, you have already created at least one technical object in the system prior to using the ID for deployment of UI5 app fom eclipse.

On the next page, you have options. Options one is to select an existing App onto which the changed resources will be overwritten. Option two is to create a new App. This will create a BSP application and a ICF service for the App in the system.

Finally, you need to select the TR or create a new TR to capture these changes


Click on Finish.
Test the new App
Once the application is deployed, you need to test that. Right click on the project and select Run As->Run on ABAP server shown below

Verify the changes in the deployed App. With this you have successfully made changes to an existing custom UI5 app and deployed on ABAP frontend server. 

In case you face any issues while following these steps, post a comment below and I will be happy to assist you resolve the issues

No comments:

Post a Comment

You are welcome to express your views here...