Creating a Local GIT Repository

Log into your training SAP Business Application Studio.

1. Perform this step as shown in a previous exercise.

Create a new SAP Fiori Freestyle project using the following information.

1. Perform this step as shown in a previous exercise.

Open the terminal for the ux402_repository folder. Initialize the local GIT repository by executing the following command: git init.

1. Open the terminal for the ux402_repository folder by choosing Open in Integrated Terminal in the contextual menu.

2. Initialize the local GIT repository by executing the given command.

Stage all changes over the Git view for the first commit. The Git view is located on the left side menu in the form of a branch symbol. If you open it, you will see all changes. You can stage all changes by choosing the three dots symbol and in the dropdown menu, Changes → Stage All Changes.

1. From the left side menu of the SAP Business Application Studio, choose the branch symbol (Source Control) to open the Git view.

2. Check the commit section of the Git view (located under the Message input field). The files are marked as untracked (U) and located under Changes.

   

3. Now stage all changes for the first commit. For the staging, select the three dots symbol (Views and More actions…) and choose Changes → Stage All Changes.

   

4. Check the commit section of the Git view. As you can see, the files are now marked as added (A) and located under Staged Changes.

   

Commit the files that you have staged in your local Git repository. Use the Git view for the commit and Initial Commit as commit message. You can then go back to the Explorer pane.

1. Commit the files that you have staged in your local Git repository. For the commit, just type in Initial Commit into the Message input field of the Git view and select the Commit button or choose the checkmark symbol.

   

2. There will be zero changes within the Git view:

   

3. Go back to the Explorer pane.

Add the listed view of type XML in the view folder and the corresponding controller of type JavaScript in the controller folder of your project. To create the files, use Copy and Paste in the context menu of the Main.view.xml and Main.controller.js files. Rename them to the listed view and controller file names. In the created Detail.view.xml file, you need to change part of the controllerName attribute from Main to Detail and remove the displayBlock attribute. Then change the value of the title attribute of the Page element to the string Title. A string is sufficient for this exercise, you do not need to use i18n. In the created Detail.controller.js file, you need to change part of the controller name in the extend function from Main to Detail.

1. Add the Detail.view.xml file in the view folder and the corresponding Detail.controller.js file in the controller folder of your project. Use Copy then Paste in the context menu of the Main.view.xml and Main.controller.js files to create the files. Now, rename them.

2. In the created Detail.view.xml file, you need to change part of the controllerName attribute from Main to Detail and remove the displayBlock attribute. Then change the value of the title attribute of the Page element to the string Title. A string is sufficient for this exercise, you do not need to use i18n.

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   12345678910
   
   <mvc:View controllerName="student00.com.sap.training.ux402.repository.ux402repository.controller.Detail"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Page id="page" title="Title">
    <content />
    </Page>
   </mvc:View>
   
   

3. In the created Detail.controller.js file, you need to change part of the controller name in the extend function from Main to Detail. The last part of the string should look like the following:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   12
   
   ux402repository.controller.Detail", {

Stage your changes and commit them with the commit message, Detail view and controller added, and come back to the Explorer pane.

1. Open the Git view and check the commit section. As you can see, the Detail.controller.js and Detail.view.xml files are marked now as untracked (U) and located under Changes.

   

2. Now, stage all changes. For the staging, select the three dots symbol (Views and More actions…) and then on Changes → Stage All Changes. Alternatively, you can stage the files individually by selecting the + symbol (Stage Changes) for every file. Now, the files should be marked as added (A) and located under Staged Changes.

   

3. Commit the files that you have staged in your local Git repository. For the commit, just enter Detail view and controller added into the Message input field of the Git view and select the Commit button or choose the checkmark symbol. Now, there should be zero changes.

   

4. Come back to the Explorer pane.

Open the Detail.view.xml file and assign the value Detail to the title attribute of the Page element. For this exercise, there is no need to use i18n, just assign the value Detail as a string. Then save your changes.

1. Open the Detail.view.xml file.

2. Change the value of the title attribute of the Page element to Detail:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   123456
   
   <Page id="page" title="Detail">
    <content />
   </Page>
   
   

3. Save your changes.

Stage your changes and commit them with the Commit message, Detail view title changed.

1. Open the Git view. As you can see, the Detail.view.xml file is now marked as modified (M) and located under Changes.

   

2. Now, stage the changes. For the staging, you can select the + symbol (Stage Changes) for the Detail.view.xml file. When this action is complete, the Detail.view.xml file should still be marked as modified (M) but is now located under Staged Changes.

   

3. Commit the files that you have staged in your local Git repository. For the commit, enter Detail view title changed in the Message input field of the Git view and select the Commit button or select the checkmark symbol. Now, there should be zero changes.

Select the Git: View history (Git log) icon to see the history of commits. You should see all three commits done in this exercise: