Creating a Local GIT Repository

Objectives

After completing this lesson, you will be able to:

  • Create a local GIT repository

Work with a Local GIT Repository

Business Example

In this exercise, you will learn how to work with a local Git Repository.

Note
SAP BTP Platform and SAP Business Application Studio are cloud services. Due to the nature of cloud software, the naming of fields and buttons, as well as the content of the steps, may differ from the exercise solution provided here.
Note
In the following exercises, replace <L> with the course group and ## with your user group.
Caution
Be aware that in some cases the initial code or code of previous implementation steps is not shown. In the following steps, do not delete any existing code or code that you have added in previous steps if not explicitly asked. In addition, be aware that the screenshots show the solutions from student00 namespace; you should replace this with your own student## one.

Steps

  1. Log into your training SAP Business Application Studio.

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

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

    SAP Fiori Freestyle Project Information

    FieldValue
    TemplateSAP Fiori application
    Template TypeSAP Fiori
    TemplateBasic
    Data sourceNone
    View nameMain
    Module nameux402_repository
    Application titleRepository-integration
    Application namespacestudent##.com.sap.training.ux402.repository
    DescriptionA Fiori Application.
    Project folder path/home/user/projects

    Leave other fields and radio buttons as default values.

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

  3. 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.

  4. 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, ChangesStage 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 ChangesStage 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.

  5. 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.

  6. 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.

    View and Controller File Names

    View file nameController file name
    Detail.view.xmlDetail.controller.js
    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
      
      <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>
      
      
      Expand
    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
      
      ux402repository.controller.Detail", {
      Expand
  7. 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 ChangesStage 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.

  8. 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
      
      <Page id="page" title="Detail">
       <content />
      </Page>
      
      
      Expand
    3. Save your changes.

  9. 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.

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

Log in to track your progress & complete quizzes