Working with GIT

Open your training SAP Business Application Studio.

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 repository folder. Initialize the local GIT repository by executing the following command: git init.

1. Open the terminal for the 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 codeSwitch to dark mode

   12345678910
   
   <mvc:View controllerName="student.com.sap.training.advancedsapui5.repository.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 codeSwitch to dark mode

   12
   
   repository.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 codeSwitch 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:

If you do not have a GitHub account, visit https://github.com/ and create one. Make sure that you are using a valid email address. Furthermore, make sure that you are able to access the email account.

1. Go to https://github.com/ and choose Sign up.

2. Follow the account creation process step by step.

Go to https://github.com/ and log into your account. Then create a new repository with the following information:

1. In the upper-right corner of any page, use the plus(+) dropdown menu, and select New repository.

2. Enter trainingrepository as the Repository name.

3. Enter Repository for training as the Description.

4. Choose Private as repository visibility.

5. Choose Create repository.

Create a personal access token with the listed information. After the creation of the personal access token, ensure you copy and save it because you will not be able to see it again and you will need to insert it into a file of the SAP Business Application Studio. You can create the personal access token in the Developer settings of your GitHub account.

1. Open the personal settings of your account by clicking on your account in the upper right corner, and choose Settings from the dropdown menu.

2. Choose Developer settings.

3. Choose Personal access tokens.

4. Choose Tokens (classic).

5. Choose Generate new token → Generate new token (classic).

6. Enter training at Note and select repo, delete_repo and write:discussion at Select scopes. Choose Generate token.

7. Make sure to copy and save your new personal access token now because you will not be able to see it again; you will need to insert it into a file of the SAP Business Application Studio.

Open the SAP Business Application Studio.

Open the terminal for the repository folder. Set your email address and username for your Git account by executing the following commands:

1. Open the terminal for the repository folder. Set your email address and username by executing the listed commands.

In order to save the personal access token within the SAP Business Application Studio, create a .netrc file within the /home/user folder with the listed information. Only one space is required between the key and the value.

1. Choose File → Open Folder….

2. Enter /home/user/ and choose OK.

3. Choose the New File icon.

4. Enter .netrc and press the Enter key (on your keyboard).

5. Enter the listed key-value pairs. There is no need to use : or = for the key-value pairs. Only one space is required between the key and the value.

6. It will look like what we see in the following figure:

   

7. Save your changes.

Open the repository workspace. Open the terminal for the repository folder and assign the new remote Git repository to your project. To assign the new remote Git repository to your project, you can use the following command with the URL of your trainingrepository remote Git repository, which can be found on GitHub: git remote add origin https://<Git-Host-URL>/<full-path-to-repository>

1. Choose File → Open Recent … to go back to your projects.

2. From the context menu of the repository folder, choose Open in Integrated Terminal.

3. Within the terminal, execute the following command with the URL of your trainingrepository remote Git repository, which can be found on GitHub: git remote add origin https://<Git-Host-URL>/<full-path-to-repository>

Push the changes from your local Git repository to the remote Git repository. You can use the Push to… action from the Git view.

1. Open the Git view.

2. Choose the three dots symbol (Views and More Actions…) and choose Pull, Push → Push to…

   

3. In the input field, choose origin.

   

4. If the following window appears, answer/select No.

   

Check the content of your remote Git repository on GitHub.

1. Go to https://github.com/ and log into your account.

2. Open your remote Git repository, trainingrepository.

3. Observe the content of your repository.

   

4. To see the three commits, choose the clock symbol.