diff --git a/tutorials/create-hello-world-mta/create-hello-world-mta.md b/tutorials/create-hello-world-mta/create-hello-world-mta.md index 041c7d402d..b42a723c9c 100644 --- a/tutorials/create-hello-world-mta/create-hello-world-mta.md +++ b/tutorials/create-hello-world-mta/create-hello-world-mta.md @@ -96,7 +96,7 @@ You define the entities that have to be deployed, namely modules and resources r 2. Using a text editor, enter the following data in the file: - ```YAML +```YAML _schema-version: '3.1' ID: com.example.demo.basic.config extends: com.example.demo.basic @@ -109,7 +109,7 @@ resources: id: dbalias user-id: myuser password : mypassword - ``` +``` The example above instructs the SAP BTP to: diff --git a/tutorials/hana-cloud-collaborative-database-development-5/hana-cloud-collaborative-database-development-5.md b/tutorials/hana-cloud-collaborative-database-development-5/hana-cloud-collaborative-database-development-5.md index dfc3068990..4e7766493b 100644 --- a/tutorials/hana-cloud-collaborative-database-development-5/hana-cloud-collaborative-database-development-5.md +++ b/tutorials/hana-cloud-collaborative-database-development-5/hana-cloud-collaborative-database-development-5.md @@ -198,22 +198,22 @@ As the last two steps, you will create two generic roles and database users. The 3. In the SQL Console, copy and paste the following code. Run it to create a role for the object owner (OO). - ```SQL +```SQL create role "genericRoleForOO"; ``` > The Object Owner, in this example, will be assigned to the user who owns the project and creates calculation views. This role will need Select privileges with grant option that will be assigned to it in the next steps. 4. Next, copy and paste the following code in the SQL Console and run it to create a role for application users (AP). - ```SQL +```SQL create role "genericRoleForAP"; - ``` +``` > The Application User, in this example, will be assigned to the user who uses the data preview on the calculation views created by the object owner. This role will need Select privileges that will be assigned to it in the next steps. 5. Copy and paste the following code in the SQL Console. Run the code to view the schema name for the role inventory created earlier in this tutorial group. - ```SQL +```SQL select role_schema_name,* from roles where role_name='inventory'; ``` @@ -229,23 +229,23 @@ select role_schema_name,* from roles where role_name='inventory'; 1. Here, you will assign the two roles you have created in the fourth tutorial ("`inventory_with_grant#`" and "`inventory_without_grant`") to the two new roles you have just created. Copy and paste the following code in the SQL Console and make sure the schema name ("`WS3_1_HDI_DB_1`") matches the schema name you have just checked with the previous statement. Run the statement to grant roles to the object owner and application user. - ```SQL +```SQL grant "WS3_1_HDI_DB_1"."inventory_with_grant#" to "genericRoleForOO"; grant "WS3_1_HDI_DB_1"."inventory_without_grant" to "genericRoleForAP"; - ``` +``` 2. Create a database user by running the following SQL statement. `UPS_GRANTOR` means **User-Provided Service Granter**. In the next step, this user will be allowed to grant the roles created above. - ```SQL +```SQL create user UPS_GRANTOR password "DnATBG!1" NO FORCE_FIRST_PASSWORD_CHANGE; - ``` +``` 3. Assign the roles you have created to this user `UPS_GRANTOR` by running the statements below. - ```SQL +```SQL grant "genericRoleForOO" to UPS_GRANTOR WITH ADMIN OPTION; grant "genericRoleForAP" to UPS_GRANTOR WITH ADMIN OPTION; - ``` +``` 4. Now the user `UPS_GRANTOR` is assigned both roles that were created previously for collaborating on the project. diff --git a/tutorials/hana-cloud-connection-guide-2/hana-cloud-connection-guide-2.md b/tutorials/hana-cloud-connection-guide-2/hana-cloud-connection-guide-2.md index 8beb6ab2ac..7a0d6c8145 100644 --- a/tutorials/hana-cloud-connection-guide-2/hana-cloud-connection-guide-2.md +++ b/tutorials/hana-cloud-connection-guide-2/hana-cloud-connection-guide-2.md @@ -68,7 +68,7 @@ Once the packages are installed, launch Jupyter Notebook. 2. Import the packages using the following lines of code: - ```Python +```Python import hdbcli from hdbcli import dbapi import hana_ml @@ -76,14 +76,14 @@ import hana_ml 3. To check if the package has been imported correctly, you can check the package version. Just type the following: - ```Python +```Python print(hdbcli.__version__) #Use two underscores '_''_' for __version__ print(hana_ml.__version__) #Use two underscores '_''_' for __version__ ``` 4. Next, import the following packages required for this tutorial: - ```Python +```Python from hana_ml import dataframe from hana_ml.dataframe import ConnectionContext import pandas as pd @@ -134,19 +134,19 @@ print(flight_hdf.select_statement) 1. Now that you have a table in your database, to access this table we execute the following lines of code. Replace the XXXX with your schema name and table with your table name. - ```Python +```Python flight_hdf=conn2.sql ('select * from XXXX.(table) ') ``` 2. To check the data types of the table, you can execute the following command: - ```Python +```Python flight_hdf.dtypes() ``` 3. To explore the SAP HANA data-frame, you can execute the following command: - ```Python +```Python flight_hdf.describe().collect() ``` ![Access SAP HANA Cloud Table](ss-03-access-SAP-HANA-Cloud-table.png) @@ -157,13 +157,13 @@ flight_hdf.describe().collect() 1. To add visualizations to your data, import `EDAVisualizer` using the command: - ```Python +```Python from hana_ml.visualizers.eda import EDAVisualizer ``` 2. Next, import the following packages required for this tutorial. - ```Python +```Python from hana_ml import dataframe import pandas as pd import matplotlib.pyplot as plt @@ -176,7 +176,7 @@ from hana_ml.algorithms.pal import stats 3. Now we will create a pie chat using the database table to find the most frequently travelled destination. To create a pie chart using run the following: - ```Python +```Python f = plt.figure(figsize=(10,10)) ax1 = f.add_subplot(111) start=time.time() diff --git a/tutorials/hana-cloud-data-anonymization-3/hana-cloud-data-anonymization-3.md b/tutorials/hana-cloud-data-anonymization-3/hana-cloud-data-anonymization-3.md index 94aee9e290..8d1f9f1619 100644 --- a/tutorials/hana-cloud-data-anonymization-3/hana-cloud-data-anonymization-3.md +++ b/tutorials/hana-cloud-data-anonymization-3/hana-cloud-data-anonymization-3.md @@ -157,20 +157,20 @@ Once you have filled in all information in this statement, you can run it to cre 1. To trigger the actual calculation of the required anonymization steps, the view then needs to be refreshed: - ```SQL +```SQL -- refresh creates the metadata (before, it's not queryable) REFRESH VIEW "[view_name]" ANONYMIZATION; ``` 2. To show the results of the anonymization, you can use a SELECT statement: - ```SQL +```SQL -- shows the results SELECT * FROM "[view_name]"; ``` 3. If you want to double-check if there are no individual cases with unique combinations of quasi-identifiers left in the view, you can run this statement: - ```SQL +```SQL -- double checks if there are any singled-out ones left --> should be empty SELECT "column1", "column2", "column_n", count(*) FROM "[view_name]" GROUP BY "column1", "column2", "column_n" @@ -181,7 +181,7 @@ HAVING count(*)=1; 4. To examine if your anonymization was successful, you might also check how many people are indistinguishable as specified by the parameter k. To do so, you can run this statement: - ```SQL +```SQL -- show the actual counts SELECT "[column1]", "[column2]", "[column_n]", count(*) as "Count" FROM "[view_name]" GROUP BY "[column1]","[column2]","[column_n]" @@ -212,7 +212,7 @@ If you open the **Explain Plan** of your anonymization view, you can examine the 4. To understand the need for anonymization, run the SQL query on the sample data as given below: - ```SQL +```SQL SELECT "start_year", "gender", "zipcode", "salary", count(*) as "Count" FROM "ANON_SAMPLE" GROUP BY "start_year", "gender", "zipcode", "salary" ORDER by "Count" ASC; ``` diff --git a/tutorials/hana-cloud-data-anonymization-4/hana-cloud-data-anonymization-4.md b/tutorials/hana-cloud-data-anonymization-4/hana-cloud-data-anonymization-4.md index 444841f9bb..cf7bacb231 100644 --- a/tutorials/hana-cloud-data-anonymization-4/hana-cloud-data-anonymization-4.md +++ b/tutorials/hana-cloud-data-anonymization-4/hana-cloud-data-anonymization-4.md @@ -53,7 +53,7 @@ To use L-Diversity, you only need to slightly change the statement for creating 4. You need to add a `COLUMN PARAMETERS` expression defining the type of data in the sensitive column {`"is sensitive":true`} - ```SQL +```SQL CREATE VIEW "[view_name]" ("id", "[column1]", "[column_n], "[column_sensitive]") AS SELECT "id", "[column1]", "[column_n], "[column_sensitive]" @@ -76,7 +76,7 @@ The higher the value you specify for the L-parameter, the more people in each gr 1. First, you must create a sample table `PERSONALDATA` that has sensitive information on people regarding their age. Run the following SQL codes in your SAP HANA Database Explorer. - ```SQL +```SQL CREATE COLUMN TABLE PERSONALDATA ( -- sequence column ID BIGINT NOT NULL PRIMARY KEY GENERATED ALWAYS AS IDENTITY, @@ -92,7 +92,7 @@ AGE NVARCHAR(3) NOT NULL); 2. Now, you need to insert information into each column of your table. - ```SQL +```SQL INSERT INTO PERSONALDATA VALUES ('Peter', 'm', 'Berlin', '30'); INSERT INTO PERSONALDATA VALUES ('Sigrid', 'f', 'Cologne', '31'); INSERT INTO PERSONALDATA VALUES ('François', 'm', 'Paris', '24'); @@ -105,7 +105,7 @@ INSERT INTO PERSONALDATA VALUES ('Fabienne', 'f', 'Toulouse', '28'); 3. Based on the table created above, here is an example of how a completed statement could look like for an anonymized view on a table that contains two quasi-identifying columns (gender and location) as well as a sensitive age column. In this view, at least `K=2` people should be indistinguishable based on their quasi-identifiers and at least `L=2` people should have different age values: - ```SQL +```SQL CREATE VIEW PERSONALDATA_L_ANON (ID, GENDER, LOCATION, AGE) AS SELECT ID, GENDER, CITY AS LOCATION, AGE FROM PERSONALDATA diff --git a/tutorials/hana-cloud-python-analysis-multimodel-1/hana-cloud-python-analysis-multimodel-1.md b/tutorials/hana-cloud-python-analysis-multimodel-1/hana-cloud-python-analysis-multimodel-1.md index 3d87e5bb87..980b4e6ec1 100644 --- a/tutorials/hana-cloud-python-analysis-multimodel-1/hana-cloud-python-analysis-multimodel-1.md +++ b/tutorials/hana-cloud-python-analysis-multimodel-1/hana-cloud-python-analysis-multimodel-1.md @@ -112,7 +112,7 @@ pandas_df = hana_df.collect() Add the following content into the file: - ```Python +```Python { "user": "YourUserName", "pwd": "YourPassword", diff --git a/tutorials/hana-cloud-smart-multi-model-2/hana-cloud-smart-multi-model-2.md b/tutorials/hana-cloud-smart-multi-model-2/hana-cloud-smart-multi-model-2.md index e224b6e9d7..62a1746454 100644 --- a/tutorials/hana-cloud-smart-multi-model-2/hana-cloud-smart-multi-model-2.md +++ b/tutorials/hana-cloud-smart-multi-model-2/hana-cloud-smart-multi-model-2.md @@ -63,19 +63,19 @@ Before, we can create our first column using this SRS, we need to install it on 2. Set the schema `DAT260` by executing this statement: - ```SQL +```SQL SET SCHEMA DAT260; ``` 3. Paste this statement to the console and execute it: - ```SQL +```SQL CREATE PREDEFINED SPATIAL REFERENCE SYSTEM IDENTIFIED BY 32630; ``` 4. A list of all installed Spatial Reference Systems can be found in the table [`ST_SPATIAL_REFERENCE_SYSTEMS`(*)](https://help.sap.com/viewer/bc9e455fe75541b8a248b4c09b086cf5/LATEST/en-US/7a2ea357787c101488ecd1b725836f07.html). To confirm that the above statement has installed `SRS 32630`, you can check the result by executing this statement: - ```SQL +```SQL SELECT * FROM ST_SPATIAL_REFERENCE_SYSTEMS WHERE SRS_ID = 32630; ``` diff --git a/tutorials/hana-cloud-smart-multi-model-3/hana-cloud-smart-multi-model-3.md b/tutorials/hana-cloud-smart-multi-model-3/hana-cloud-smart-multi-model-3.md index 8c84f47624..f2fa20035f 100644 --- a/tutorials/hana-cloud-smart-multi-model-3/hana-cloud-smart-multi-model-3.md +++ b/tutorials/hana-cloud-smart-multi-model-3/hana-cloud-smart-multi-model-3.md @@ -49,9 +49,9 @@ You are starting your trip at Canary Wharf in London. In this step, you will use 3. Next, you need to bring these coordinates into SAP HANA Cloud, SAP HANA database. To do that, you can use the function [`ST_GeomFromText`(*)](https://help.sap.com/viewer/bc9e455fe75541b8a248b4c09b086cf5/LATEST/en-US/7a194a8e787c1014bed49b5134e6b930.html). This constructor for geometries expects a [ **Well-known Text (WKT)** ](https://en.wikipedia.org/wiki/Well-known_text_representation_of_geometry) as well as the associated spatial reference system as input. Latitude and longitude can be easily assembled to match the expected WKT string. The associated spatial reference system in this case has `id 4326 (WGS84)`. - ```SQL +```SQL SELECT ST_GeomFromText('POINT(-0.026859 51.505748)', 4326) FROM DUMMY; - ``` +``` 4. If you use a SQL editor with built-in spatial visualization, like `DBeaver`, you will be able to preview the location and double-check that it matches your previously selected location. @@ -59,22 +59,22 @@ SELECT ST_GeomFromText('POINT(-0.026859 51.505748)', 4326) FROM DUMMY; 5. To make the following exercises more convenient, it is a good idea to transform this point to the same spatial reference system as our data from OpenStreetMap (SRS with `id 32630`). We can extract the Well-known Text representation by using the function [`ST_AsWKT`(*)](https://help.sap.com/viewer/bc9e455fe75541b8a248b4c09b086cf5/LATEST/en-US/7a169dff787c1014a095b86992806f14.html). - ```SQL +```SQL SELECT ST_GeomFromText('POINT(-0.026859 51.505748)', 4326) .ST_Transform(32630) .ST_AsWKT() FROM DUMMY; - ``` +``` 6. In the Results Panel you should now see the transformed coordinates: - ``` +``` POINT (706327.107445 5710259.94449) ``` 7. Next, you need to select this point with Spatial Reference System `32630` by executing the following statement. - ```SQL +```SQL SELECT ST_GeomFromText('POINT (706327.107445 5710259.94449)', 32630) FROM DUMMY; - ``` +``` ### Select a target POI @@ -83,21 +83,21 @@ Now that your starting point coordinate has been transformed and selected, you n 1. Your target destination is a bar called **Blues Kitchen** in Camden. All points of interest are stored in the table `LONDON_POI`. You can search our POI based on field name and amenity. The latter describes the type of POI. In our case we would like to filter for value **bar** by executing this statement: - ```SQL +```SQL SELECT * FROM LONDON_POI lp WHERE LOWER("name") LIKE '%blues kitchen%' AND "amenity" = 'bar' - ``` +``` 2. You should receive 4 records in the **Results** panel. 3. You can use a visualization tool to see the location of these records. If you do not have a visualization tool installed, you can use online tools such as [Wicket](https://arthur-e.github.io/Wicket/sandbox-gmaps3.html). Wicket is able to visualize geometries in WKT format in spatial reference system 4326. To obtain these geometries from SAP HANA Cloud we can use [`ST_Transform`(*)](https://help.sap.com/viewer/bc9e455fe75541b8a248b4c09b086cf5/LATEST/en-US/e2b1e876847a47de86140071ba487881.html) in combination with [`ST_AsWKT`(*)](https://help.sap.com/viewer/bc9e455fe75541b8a248b4c09b086cf5/LATEST/en-US/7a169dff787c1014a095b86992806f14.html). - ```SQL +```SQL SELECT "osmid", SHAPE.ST_Transform(4326).ST_AsWKT() FROM LONDON_POI lp WHERE LOWER("name") LIKE '%blues kitchen%' AND "amenity" = 'bar'; - ``` +``` 4. When you copy over the geometries in WKT format to your (online) visualizer, you will see that two records are not located in Camden and the two other records are actually referring to the same location - one being a polygon depicting the outline of the building and the other being a point depicting the location of the building. @@ -105,9 +105,9 @@ WHERE LOWER("name") LIKE '%blues kitchen%' AND "amenity" = 'bar'; 5. In the next step we will work with the POI with OSM ID (field `osmid`) **6274057185**. Select it by executing this statement: - ```SQL +```SQL SELECT * FROM LONDON_POI lp WHERE "osmid" = 6274057185; - ``` +``` diff --git a/tutorials/hana-cloud-smart-multi-model-5/hana-cloud-smart-multi-model-5.md b/tutorials/hana-cloud-smart-multi-model-5/hana-cloud-smart-multi-model-5.md index 3f92830a7f..8e033bd7d4 100644 --- a/tutorials/hana-cloud-smart-multi-model-5/hana-cloud-smart-multi-model-5.md +++ b/tutorials/hana-cloud-smart-multi-model-5/hana-cloud-smart-multi-model-5.md @@ -66,7 +66,7 @@ Before creating the query, you need to make an adjustment in the SAP HANA Databa 4. Now that this setting has been adjusted, you can start with your query. To perform a spatial union operation and construct one geometry out of the result set of the above query, use the function [`ST_UnionAggr`(*)](https://help.sap.com/viewer/bc9e455fe75541b8a248b4c09b086cf5/LATEST/en-US/601aa9fb93e241af96faafcb8f01b12e.html). The following query creates the SVG as a CLOB: - ```SQL +```SQL SELECT ST_UnionAggr(le.SHAPE).ST_AsSVG(Attribute=>'stroke="red" stroke-width="0.1%"') FROM LONDON_EDGES le JOIN LONDON_VERTICES u ON le.SOURCE = u."osmid" diff --git a/tutorials/xsa-node-modules/xsa-node-modules.md b/tutorials/xsa-node-modules/xsa-node-modules.md index 55ce380bd5..fdf018d520 100644 --- a/tutorials/xsa-node-modules/xsa-node-modules.md +++ b/tutorials/xsa-node-modules/xsa-node-modules.md @@ -1,13 +1,13 @@ --- -parser: v2 +parser: v2 author_name: Thomas Jung author_profile: https://github.com/jung-thomas primary_tag: products>sap-hana tags: [ tutorial>intermediate, products>sap-hana, products>sap-hana\,-express-edition ] --- -# SAP HANA XS Advanced - Modules within Node.js SAP HANA applications - Working with Node.js modules - +# SAP HANA XS Advanced - Modules within Node.js SAP HANA applications + Working with Node.js modules + ## Prerequisites - This tutorial is designed for SAP HANA on premise and SAP HANA, express edition. It is not designed for SAP HANA Cloud. - **Proficiency:** Intermediate @@ -17,15 +17,23 @@ tags: [ tutorial>intermediate, products>sap-hana, products>sap-hana\,-express-e - [HANA Database Access from Node.js](https://developers.sap.com/tutorials/xsa-node-dbaccess.html) ## You will learn -In a previous tutorial you created [a Node.js Module](https://developers.sap.com/tutorials/xsa-xsjs-xsodata.html), but didn't really do much Node.js specific programming. You were only using Node.js to run XSJS and XSODATA services. The support for XSJS and XSODATA is an important feature for XS Advanced. It not only allows backward compatible support for much of your existing development, but it also provides a simplified programming model as an alternative to the non-blocking I/O event-driven programming model normally used by Node.js , but you certainly aren't limited to only the functionality provided by XSJS and XSODATA. You have access to the full programming model of Node.js as well. In this section you will learn how to extend your existing Node.js module in the SAP Web IDE for SAP HANA. You will learn about how to create and use reusable code in the form of Node.js modules. You will use `package.json` to define dependencies to these modules which make the installation of them quite easy. You will use one of the most popular modules – **express** - which helps with the setup the handling of the request and response object. You will use `express` to handle multiple HTTP handlers in the same service by using routes. You will learn about the fundamentals of the asynchronous nature of Node.js You will also see how this asynchronous capability allows for non-blocking input and output. This technique is one of the basic things that makes Node.js development different from other JavaScript development and also creates one of the reasons for its growing popularity. You will see how these techniques are applied to common operations like HTTP web service calls or even SAP HANA database access. You will also see how to create language translatable text strings and HANA database queries from Node.js Your final part of this section will demonstrate the ease at which you can tap into the powerful web sockets capabilities of Node.js You will use web sockets to build a simple chat application. Any message sent from the SAPUI5 client side application will be propagated by the server to all listening clients. - +In a previous tutorial you created [a Node.js Module](https://developers.sap.com/tutorials/xsa-xsjs-xsodata.html), but didn't really do much Node.js specific programming. You were only using Node.js to run XSJS and XSODATA services. The support for XSJS and XSODATA is an important feature for XS Advanced. It not only allows backward compatible support for much of your existing development, but it also provides a simplified programming model as an alternative to the non-blocking I/O event-driven programming model normally used by Node.js + +, but you certainly aren't limited to only the functionality provided by XSJS and XSODATA. You have access to the full programming model of Node.js as well. In this section you will learn how to extend your existing Node.js module in the SAP Web IDE for SAP HANA. + +You will learn about how to create and use reusable code in the form of Node.js modules. You will use `package.json` to define dependencies to these modules which make the installation of them quite easy. You will use one of the most popular modules – **express** - which helps with the setup the handling of the request and response object. You will use `express` to handle multiple HTTP handlers in the same service by using routes. + +You will learn about the fundamentals of the asynchronous nature of Node.js You will also see how this asynchronous capability allows for non-blocking input and output. This technique is one of the basic things that makes Node.js development different from other JavaScript development and also creates one of the reasons for its growing popularity. You will see how these techniques are applied to common operations like HTTP web service calls or even SAP HANA database access. You will also see how to create language translatable text strings and HANA database queries from Node.js + +Your final part of this section will demonstrate the ease at which you can tap into the powerful web sockets capabilities of Node.js You will use web sockets to build a simple chat application. Any message sent from the SAPUI5 client side application will be propagated by the server to all listening clients. + ## Time to Complete **15 Min**. --- -### New Node.js module +### New Node.js module Return to the project from the previous tutorial (https://developers.sap.com/tutorials/xsa-xsjs-xsodata.html) and create a new module of type Node.js. @@ -106,7 +114,7 @@ require("./router")(app, server); server.on("request", app); server.listen(port, function () { console.info(`HTTP Server: ${server.address().port}`); -}); +}); ``` Please take a look at the code you have just pasted. @@ -114,7 +122,7 @@ Please take a look at the code you have just pasted. First, the `@sap/logging` module is used to write log and trace files. By calling the external node module, `passport`, you are enforcing the UAA authentication you defined earlier. How? By using a JWT (JSON web token) strategy, a middleware function passes the request to the actual route which, in this case, is the `xsuaa` service you defined at the very beginning using the XS client. You are then injecting an instance of `@sap/hdbext`, called `xsHDBConn`. This module is designed to expose pooled HANA database connections as a Node.js middleware. -### Create route handler +### Create route handler Back in `server.js`, you are calling a router. You will now create a router that will accommodate the different Express route requests. You will mimic part of the folder structure suggested in the [Express module documentation](http://expressjs.com/en/starter/generator.html) and create a folder called `router` with a file called `index.js` in it. @@ -143,7 +151,7 @@ module.exports = (app, server) => { Add the code to the new `index.js` file and **save**. -### Create destination module for route +### Create destination module for route As you can imagine from the code in the previous step, you now need a script called `myNode.js` in a folder called `routes` @@ -171,7 +179,7 @@ module.exports = function() { You are now responding to a `GET` request to the relative root location of the file (in this case, `router`). However, in the `index.js` file inside the `router` folder, you set the path to `/node` in the URL. You need to map this route in the `xs-app.json` file in the HTML5 module. -### Add the route in the web module +### Add the route in the web module Because it is the web module that is exposed for calls, you need to add the new `/node` route to the file `xs-app.json`: @@ -199,7 +207,7 @@ Now we need to extend the dependencies for the `core_node` module itself so it h ![Add dependency in mta.yaml for core_node](5-2.png) -### Extend dependencies in package.json +### Extend dependencies in package.json Back in step 1 you added the modules `express`, `passport` and several other modules using the **require** function. You now need to add them manually in the `package.json` file with the rest of the dependencies for the `core_node` module. @@ -227,7 +235,7 @@ Back in step 1 you added the modules `express`, `passport` and several other mod ``` -### Build and Run +### Build and Run You can now run the `core_node` module. @@ -242,4 +250,5 @@ You can also test the newly added router by adding `/node` to the URL: ![Replace with node](10.png) - + + diff --git a/tutorials/xsa-sapui5/xsa-sapui5.md b/tutorials/xsa-sapui5/xsa-sapui5.md index ef2006756a..9cbe327a4c 100644 --- a/tutorials/xsa-sapui5/xsa-sapui5.md +++ b/tutorials/xsa-sapui5/xsa-sapui5.md @@ -1,14 +1,14 @@ --- -parser: v2 +parser: v2 author_name: Thomas Jung author_profile: https://github.com/jung-thomas primary_tag: products>sap-hana tags: [ tutorial>intermediate, topic>html5, topic>odata, topic>sapui5, products>sap-hana, products>sap-hana\,-express-edition ] time: 15 --- -# SAPUI5 User Interface - SAP HANA XS Advanced, Creating a SAPUI5 user interface to consume XSJS and oData services - +# SAPUI5 User Interface + SAP HANA XS Advanced, Creating a SAPUI5 user interface to consume XSJS and oData services + ## Prerequisites - This tutorial is designed for SAP HANA on premise and SAP HANA, express edition. It is not designed for SAP HANA Cloud. - **Tutorials:** [Creating an OData Service with Create Operation and XSJS Exit](xsa-xsodata-create) and [SAP HANA XS Advanced - Consume the OData service in a basic HTML5 module](xsa-html5-expand-module) @@ -18,7 +18,7 @@ In this tutorial, you will create a SAPUI5 user interface, including the view an --- -### Create a new HTML file +### Create a new HTML file Return to your `web` module and create a new folder named `resources/odataView` with an HTML file called `index.html` @@ -29,39 +29,39 @@ Here is the complete coding for the new page. ```HTML - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + ``` -### Create `csrf.js`, `error.js`, and `index.js` +### Create `csrf.js`, `error.js`, and `index.js` There are three utility JavaScript libraries you reference in this HTML page: @@ -76,39 +76,40 @@ Create a `common` folder in resources and add these three files. Here is the coding of `csrf.js` : ```JavaScript -/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0*/ -$.ajaxSetup({ - beforeSend: function(xhr,settings) { - if (settings && settings.hasOwnProperty("type") - && settings.type !== "GET"){ - var token = getCSRFToken(); - xhr.setRequestHeader("X-CSRF-Token", token); - } - }, - complete: function(xhr,textStatus) { - var loginPage = xhr.getResponseHeader("x-sap-login-page"); - if (loginPage) { - location.href = loginPage + "?x-sap-origin-location=" + encodeURIComponent(window.location.pathname); - } - } - }); - - function getCSRFToken() { - var token = null; - $.ajax({ - url: "/xsjs/csrf.xsjs", - type: "GET", - async: false, - beforeSend: function(xhr) { - xhr.setRequestHeader("X-CSRF-Token", "Fetch"); - }, - complete: function(xhr) { - token = xhr.getResponseHeader("X-CSRF-Token"); - } - }); - return token; - } - ``` +/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0*/ +$.ajaxSetup({ + beforeSend: function(xhr,settings) { + if (settings && settings.hasOwnProperty("type") + && settings.type !== "GET"){ + var token = getCSRFToken(); + xhr.setRequestHeader("X-CSRF-Token", token); + } + }, + complete: function(xhr,textStatus) { + var loginPage = xhr.getResponseHeader("x-sap-login-page"); + if (loginPage) { + location.href = loginPage + "?x-sap-origin-location=" + encodeURIComponent(window.location.pathname); + } + } + }); + + function getCSRFToken() { + var token = null; + $.ajax({ + url: "/xsjs/csrf.xsjs", + type: "GET", + async: false, + beforeSend: function(xhr) { + xhr.setRequestHeader("X-CSRF-Token", "Fetch"); + }, + complete: function(xhr) { + token = xhr.getResponseHeader("X-CSRF-Token"); + } + }); + return token; + } + +``` And here is the code for `error.js`: @@ -181,7 +182,9 @@ function oDataFailed(oControlEvent) { return; } - ``` + + +``` Finally check that your `common` folder also has a file named `index.js`. You likely created this in a previous tutorial. If not, please create it now with the following content: @@ -258,7 +261,7 @@ sap.ui.require(["sap/ui/core/Core", "sap/ui/core/Component"], (oCore, Component) ``` -### Create optional images folder +### Create optional images folder You also reference some images in this HTML page. They aren't critical, but if you want you can create an images folder inside resources and then upload these images from our GIT repository: @@ -270,7 +273,7 @@ You also reference some images in this HTML page. They aren't critical, but if y ![new images](6.png) -### Create `Component.js` +### Create `Component.js` Next you need to create your `Component.js` file in the folder `web/resources/odataView`. Here is the coding of this file: @@ -303,13 +306,15 @@ sap.ui.define([ } }); }); - ``` + + +``` Here you initialize the SAPUI5 component and in doing so you create an instance of the JSON configuration model. You also load your first view which you will create in the next step. -### Create manifest.json file +### Create manifest.json file This file works as an application descriptor. This file provides metadata about the application, such as libraries and other technical details. It also sets the initial view details as well as creates the JSON and OData models. @@ -409,7 +414,7 @@ You can see the reference to this file in the `Component.js` file. This allows u -### Create `App.view.xml` +### Create `App.view.xml` Create a folder called `view` inside `odataView`. This is where you will hold all of your views and controllers. Create the root view named `App.view.xml`. @@ -436,32 +441,32 @@ Here is the complete coding of the `App.view.xml` file. It creates the shell con ``` -### Create fragments +### Create fragments Create a file named `MRead.fragment.xml` in the `view` folder. Here is the complete coding of this file. Here you build a panel with your input fields. These fields will allow you to control settings for calling your XSODATA service. You will then have a table control for your purchase order header and another for your purchase order items. The rendering of these two sections are further separated out into two JavaScript based fragments. ```xml - - - - - - - - - - - - - -