Develop a Vue Application for SAP BTP on Cloud Foundry

1. Open the Dev Space Manager and verify that the dev space’s status is STOPPED. If needed, click the Stop icon.

   

2. Click the Extensions Manager icon to edit the dev space.

   

3. Verify that the following extensions are either in displayed in the SAP Predefined Extensions list or are selected in the Additional SAP Extensions list: HTML5 Runner, MTA Tools, and HTML5 Application Template. If you selected an extension, click Save Changes.

   

4. Click the Play icon to start the dev space and wait for the dev space status to change to RUNNING.

   

5. Click the dev space name.

   

1. Wait for the “We have finished installing all tools and templates…” notification to appear, and then from the Get Started tab, click Start from template.

   

   If the Get Started Page doesn’t appear, from the burger icon, select Help | Get Started.

   The easiest way to develop a Vue app from scratch is to create it from a template. To continue developing an existing application, the best practice is to use Git source code management and clone the repository.

   Using the UI wizard, you can at any point click the Back or Start Over button to go back to the previous step or click the specific wizard step to go back to that step.

   You can create a project from the template wizard or from the terminal, using the Yeoman generator (@sapdmz/html5 Project).

2. Select the HTML5 Project tile and click Start.

   

3. For Template Selection, select the Vue.js Application, and click Next.

   

4. For Project Name, enter VueDemo, and click Next.

   

5. For Approuter Configuration, select the following, and click Next.

   Step	Parameter	Value
   A	Select your HTML5 application runtime	Managed Approuter
   B	Enter a unique name for the business solution of the project	VUEDemoApprouterService

   Note: Any name can be used for the business solution

   When end-users access an app in the Cloud Foundry environment, they actually access the Application Router first. The application router is used to serve static content, authenticate users, rewrite URLs, and forward or proxy requests to other micro services while propagating user information.

   The recommendation is to use Managed Application Router that provides many benefits, when compared to Standalone Application Router, such as save resources, lower maintenance efforts, etc. Standalone Application Router should only be used in advanced cases, for example when application router extensibility is required. More information is available in Developing HTML5 Applications in the Cloud Foundry Environment

   

6. For Module Name, enter businesspartners, and click Next.

   

7. For Data Source and Service Selection, select the following, and click Next.

   Step	Parameter	Value
   A	Select a system	My SAP Systems
   B	Select a source	ES5(Catalog)
   C	Select a service	ZGWSAMPLE_BASIC

   

8. For Entity Selection, select the following, and click Finish.

   Step	Parameter	Value
   A	Select the entity set name	BusinessPartnerSet
   B	Select the property for the first column	CompanyName
   C	Select the property for the second column	WebAddress
   D	Select the property for the third column	EmailAddress

   

9. Wait until the installation of project dependencies is completed.

   A notification that “The project has been generated” appears at the bottom right of the screen, SAP Business Application Studio reloads in a new workspace, and the files and project structure in the Explorer view are updated.

   

The application runs on build artifacts. Therefore, using the watch command ensures that every change in the source code will be built automatically.

1. From the menu bar, select Terminal | New Terminal.

   

   A new terminal tab opens.

   

   The terminal is opened for a specific project folder. You can use the following command in the terminal to verify the folder path:

   Shell/Bash

   Copy

   pwd
   

   

2. Change the directory to the businesspartners directory.

   Shell/Bash

   Copy

   cd businesspartners
   pwd
   

   

3. Run the npm run watch command in the terminal.

   Shell/Bash

   Copy

   npm run watch
   

   

   The application is built. Any change to the code will rebuild the application.

   

4. Open the Run Configurations view.

   

5. Press the “+” icon or click the Create Configuration button to create a new run configuration.

   The command palette opens at the top-center of the SAP Business Application Studio window. Select the following:

   Step	Parameter	Value
   A	What would you like to run?	businesspartners (default)
   B	Enter a name	Run VueDemo-businesspartners (default)

6. Click ‘>’ to expand the run configuration.

   

7. Hover over the Data Source resource and click the Bind icon.

   The command palette opens at the top-center of the SAP Business Application Studio window. Select the following:

   

8. Select ES5.

   

   The icon next to the Data Source resource changes, indicating that it is successfully bound to ES5.

   

   Binding to a XSUAA service is required when testing for different users or testing for various authorizations. For the purpose of this tutorial it is not required.

9. Click the Run Module icon to run the application.

   

   The run tool installs all dependencies that are missing for run execution, opens the debug view, and uses a dedicated run port (6004).

   

10. Click Expose and Open.

    The application opens in a separate browser tab.

    

1. Click Toggle Bottom Panel to free up screen space for the editors pane.

   

2. Open the Explorer view.

   

3. Choose VUEDEMO > businesspartners > src > pages and click the MasterPage.vue file that you created with the template in a previous step.

   The Suppliers view opens in the Code Editor.

   

4. In the headers section, modify the code as follows:

   Step	Parameter	Current Value	New Value
   A	text	“CompanyName”	“Company Name”
   B	text	“WebAddress”	“Website”
   C	text	“EmailAddress”	“Email”

   After the update is should look like the following:

   JavaScript

   Copy

   data() {
     return {
       loading: false,
       items: [],
       headers: [
         {
           text: "Company Name",
           value: "CompanyName",
           sortable: false
         },
         {
           text: "Website",
           value: "WebAddress",
           sortable: false
         },
         {
           text: "Email",
           value: "EmailAddress",
           sortable: false
         }
       ]
     };
   },
   methods: {
   
   

   

   Changes to the source code trigger automatic re-build of the app.

5. Refresh the browser tab where the app is running to see the effect of the code modifications.

   

1. In the Explorer view, choose VUEDEMO > businesspartners, and click the manifest.json file that you created with the template in a previous step. The manifest.json file opens in the Code Editor.

   

2. Modify the file using the following code snippet as depicted below:

   json

   Copy

     },
     "crossNavigation": {
         "inbounds": {
             "intent1": {
                 "signature": {
                     "parameters": {},
                     "additionalParameters": "allowed"
                 },
                 "semanticObject": "vuedemo",
                 "action": "display",
                 "title": "Suppliers"
             }
         }
     },
   

   

   Refer to Add Content to the Launchpad for more information on the application attributes that are related to SAP Build Work Zone, standard edition.

1. Follow the Build and Deploy Your SAP Fiori App to SAP Business Technology Platform tutorial with the necessary adjustments.

1. Follow the Set Up the SAP Build Work Zone, standard edition Using a Trial Account tutorial to get started with SAP Build Work Zone, standard edition.

2. Follow the Create a Site Using SAP Build Work Zone, standard edition tutorial to create a site where you will later add the Vue application.

3. Follow the Add a URL App to Your Site tutorial to add your app to the site and run the app from within the site. Use the URL of the deployed application.

   Removing the suffix of the application from the URL, such as “-0.0.1”, will cause the site to launch the latest deployed version of the app.

   In the Navigation tab obtain the Semantic Object and action from the manifest.json.

   

Congratulations!

You have completed the development of an SAP business application that uses the Vue JavaScript framework, using SAP Business Application Studio. You created the app using a wizard, test run the app locally in the dev space, and built, deployed, and ran the app on SAP BTP, Cloud Foundry environment. As an optional step, you included the app in your SAP Build Work Zone, standard edition site.

In this tutorial, you learned about high productivity tools that are available out-of-the-box in SAP Business Application Studio, including templates and wizards, the command palette, local run (Run Configurations), and more.