Blame Not with Git Blame and Diff Tools in Web IDE

[lakshmi_sankergi]

In this blog post, I will guide you on how to utilize two of the very simple yet useful features (Blame and Diff) available on SAP Web IDE Git. Even though its been a little while I had been developing UI5 apps in Web IDE coming across the open sap course on Git was a real eye opener when it comes to version management. Git is an open source system which is widely used for distributed version control/management. If you totally new to Git you can refer few of the blogs by Daniel Wroblewski  and Kiran Israni to understand how to get started.

Introduction:

Diff/Compare is an option for code comparison between the currently editing code and the previous committed version of it, this can be easily done by using the git Diff tool available in the Git Pane. The second one is Blame, you can use it to track the details of who all made changes to a file in Web IDE.

Pre-requisites:

For this blog post, I have a repository created in SCP and a project in WEB IDE created using the SAP UI5 Application template. I have cloned this project with the repository having one remote branch ‘origin/master’. There is only one local branch master which gets automatically created by SAP WEB IDE when you clone.

Fig 1. SAP Cloud Platform Repository

Fig 2. Git Repository

Fig 3. WebIDE Project

Diff/Compare:

• Let’s add a new text box like below in our View1.view.xml file.

Fig 4. View

• Stage and commit the changes to master branch.

Fig 5. Initial Commit

• Now let’s make some changes to the text in text box by changing “First line” to “Hello World” and save it.


• To compare the changes, we have made to the previous version of it, Go to Git Pane staging area -> Select the file and right click -> Click on Compare option.

 

Fig 6. Compare

• A new compare tab opens with Current Version and Previous version of the code. The lines with changes made are highlighted grey color and it also helps us to identify the exact words changed by highlighting it with yellow. The option to push to left ( <- ) can be used if you want the previous version changes.

Fig 7. Comparison Tab

Blame

Git Blame feature can be highly useful to us when more than one developer works on the same set of code. It shows us the details like username of the last person who has made changes to each line in the file and date along with the commit details.

• Open the View1.view.xml file from our demo in Web IDE.


• Click anywhere in the file to select it and then right click.


• Choose the option “Show Git Blame”.

Fig 8. Blame

• It opens a read only tab “Blame-View1.view.xml” with the line by line indicators. Each set of changes under a commit is marked in a different color to easily identify it. To get more revision details hover around the line.

Fig 9. Blame Tab

• To get the details of the commit like which branch it belongs to and where in the flow it comes, you can click on the line. It opens the Git History Pane with the commit highlighted.

Conclusion:

To sum up, we have seen the different steps to follow if you what to do a version comparison and to discover the revision details of your source code in SAP Web IDE Git.

I hope you found this simple demo useful in understanding Diff and Blame in Git.

Regards,

Lakshmi Sankergi