From 112945a6c283b13a85f58c3fdf3653a3ca656dec Mon Sep 17 00:00:00 2001 From: bsrdjan Date: Thu, 28 Jan 2021 15:44:10 +0100 Subject: [PATCH] only table row definition is mandatory --- README.md | 2 +- abap-api-tools/README.md | 46 +++++++++++++++---------------- abap-api-tools/package-lock.json | 21 ++++++++------ abap-api-tools/package.json | 18 ++++++------ abap-api-tools/src/ts/frontend.ts | 40 +++++++++++++++------------ 5 files changed, 69 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 8876237e..88a1b190 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Command line tool for pattern based web applications with ABAP/HANA systems and any ui framework. -- Any old or new ABAP system +- Any new or old SAP system - Front-end frameworks: - [Aurelia](http://aurelia.io/) - Angular, React and Vue by [SAP Fundamenal Library](https://sap.github.io/fundamental/) diff --git a/abap-api-tools/README.md b/abap-api-tools/README.md index f98777bd..beec1674 100644 --- a/abap-api-tools/README.md +++ b/abap-api-tools/README.md @@ -4,7 +4,7 @@ Command line tool for pattern based applications with ABAP/HANA systems and any ui framework. -- BAPI/RFM call templates +- [BAPI/RFM](https://sap.github.io/cloud-sdk/docs/java/features/bapi-and-rfc/bapi-and-rfc-overview/) call templates - ui components'with ABAP data annotations: - [Aurelia](http://aurelia.io/) - Angular, React and Vue by [SAP Fundamenal Library](https://sap.github.io/fundamental/) @@ -87,14 +87,20 @@ abap call ### ABAP Function Module call template -NodeJS call template of single ABAP function module. +NodeJS call template of a single ABAP function module. -Echoed to console or saved to `bapi_user_get_details.js` when the `-s` option given: +Echoed to console or saved to local `js` file if the `-s` option is used: ```shell -abap call MME stfc_connection -s +abap call MME stfc_structure -s ``` +The call template provides a source code for ABAP function module invocaton, with all parameters and their data structures: + +- Optional parameters are commented and initialized with ABAP default values +- Required parameters are initialized with empty string, buffer or zero number +- Conversion ("ALPHA") exit, if attached to data element, is mentioned in data element comment + More than one ABAP function module ```shell @@ -175,20 +181,16 @@ After annotations are saved, ui elements can be created: abap make fudamental-ngx -c my-api # .yaml extension optional ``` -Now we have one `js` file and one `html` file for each ABAP function module: +Now we have one `js` file with a call template one `html` file with ui components, for each ABAP function module: ```shell bapi_whse_to_get_detail.js bapi_whse_to_get_detail.html ``` -The **js file** is ABAP function module call template, with all parameters and data structure reset values: +The `html` file contains ui components' templates, for each BAPI/RFM parameter and structure/table data field. -- Optional parameters are commented and initialized with ABAP default values -- Required parameters are initialized with standard defaults, like empty string or zero number -- Conversion ("ALPHA") exit, if attached to data element, is mentioned in data element comment - -The **html file** contains ui component template, for each BAPI/RFM parameter and structure/table data field. Components are annoted with: +Annoted with: - Data type, length - Texts (label, caption) @@ -199,8 +201,8 @@ The **html file** contains ui component template, for each BAPI/RFM parameter an Ui components look like this (Aurelia example): ```html - @@ -208,22 +210,22 @@ Ui components look like this (Aurelia example): - - + ``` ## Custom ui configurations -Standard ui components' templates can be changed using local ui configuration. +Using two configuration files, you can map ABAP data types to your own ui components, for practically any ui framework. -Using copy command, the `ui5-react` configuration for example is copied to local config folder: +First copy the standard ui5-react configuration for example, to local config folder: ```shell abap cp ui5-react @@ -234,7 +236,7 @@ config └── ui5-react.yaml ``` -The configuration file with `-abap` suffix defines the mapping of ABAP data types to ui components: +The file with `-abap` suffix defines mapping of ABAP data types to ui components: `ui5-react-abap.yaml` @@ -262,8 +264,6 @@ datepicker: >- ``` -Using these two config files, you can map ABAP data types to your own ui components and use practically any ui framework. - Elements with tilde prefix `~` are placeholders for texts, data binding and value input helps, documented in `yaml` files. Custom configuration in local config folder, if present, is used instead of the standard configuration. To go back to standard, remove it from `config` folder or run: diff --git a/abap-api-tools/package-lock.json b/abap-api-tools/package-lock.json index 0a644c04..6770b27e 100644 --- a/abap-api-tools/package-lock.json +++ b/abap-api-tools/package-lock.json @@ -1,11 +1,11 @@ { "name": "abap-api-tools", - "version": "0.9.0", + "version": "0.9.1", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "0.9.0", + "version": "0.9.1", "cpu": [ "!arm" ], @@ -2834,9 +2834,9 @@ "dev": true }, "node_modules/fastq": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.0.tgz", - "integrity": "sha512-NL2Qc5L3iQEsyYzweq7qfgy5OtXCmGzGvhElGEd/SoFWEMOEczNh5s5ocaF01HDetxz+p8ecjNPA6cZxxIHmzA==", + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.1.tgz", + "integrity": "sha512-AWuv6Ery3pM+dY7LYS8YIaCiQvUaos9OB1RyNgaOWnaX+Tik7Onvcsf8x8c+YtDeT0maYLniBip2hox5KtEXXA==", "dev": true, "dependencies": { "reusify": "^1.0.4" @@ -6389,6 +6389,11 @@ "safer-buffer": "^2.0.2", "tweetnacl": "~0.14.0" }, + "bin": { + "sshpk-conv": "bin/sshpk-conv", + "sshpk-sign": "bin/sshpk-sign", + "sshpk-verify": "bin/sshpk-verify" + }, "engines": { "node": ">=0.10.0" } @@ -9492,9 +9497,9 @@ "dev": true }, "fastq": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.0.tgz", - "integrity": "sha512-NL2Qc5L3iQEsyYzweq7qfgy5OtXCmGzGvhElGEd/SoFWEMOEczNh5s5ocaF01HDetxz+p8ecjNPA6cZxxIHmzA==", + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.1.tgz", + "integrity": "sha512-AWuv6Ery3pM+dY7LYS8YIaCiQvUaos9OB1RyNgaOWnaX+Tik7Onvcsf8x8c+YtDeT0maYLniBip2hox5KtEXXA==", "dev": true, "requires": { "reusify": "^1.0.4" diff --git a/abap-api-tools/package.json b/abap-api-tools/package.json index 4f2d76c2..43f58b87 100644 --- a/abap-api-tools/package.json +++ b/abap-api-tools/package.json @@ -1,7 +1,7 @@ { "name": "abap-api-tools", "description": "ABAP api tools", - "version": "0.9.0", + "version": "0.9.1", "homepage": "https://github.com/sap/fundamental-tools", "author": "SAP", "license": "Apache-2.0", @@ -43,6 +43,14 @@ "node", "nodejs" ], + "dependencies": { + "chalk": "^4.1.0", + "js-yaml": "^4.0.0", + "loglevel": "^1.7.1", + "node-rfc": "^2.4.0", + "sprintf-js": "^1.1.2", + "yargs": "^16.2.0" + }, "devDependencies": { "@types/js-yaml": "^4.0.0", "@types/node": "^14.14.22", @@ -53,13 +61,5 @@ "eslint": "^7.18.0", "jest": "^26.6.3", "typescript": "^4.1.3" - }, - "dependencies": { - "chalk": "^4.1.0", - "js-yaml": "^4.0.0", - "loglevel": "^1.7.1", - "node-rfc": "^2.4.0", - "sprintf-js": "^1.1.2", - "yargs": "^16.2.0" } } diff --git a/abap-api-tools/src/ts/frontend.ts b/abap-api-tools/src/ts/frontend.ts index 27df357b..3a530e5d 100644 --- a/abap-api-tools/src/ts/frontend.ts +++ b/abap-api-tools/src/ts/frontend.ts @@ -77,11 +77,11 @@ type AbapConfigType = Record< >; type UiConfigTableType = { - header: string; + header?: string; header_row?: string; body?: string; row: string; - footer: string; + footer?: string; }; type UiConfigType = Record; @@ -141,7 +141,7 @@ export class Frontend { "ui", `${argv.ui}.yaml` ); - this.uiConfig = yamlLoad(this.configPath["ui"]) as UiConfigType; + this.uiConfig = yamlLoad(this.configPath.ui) as UiConfigType; log.debug(`default ui configuration ${argv.ui}`); } @@ -284,15 +284,11 @@ export class Frontend { parse(): void { log.info( `\nfrontend: ${this.argv.ui || ""} using ${ - this.configPath["abapLocal"] - ? this.configPath["abap"] - : "default abap.yaml" + this.configPath.abapLocal ? this.configPath.abap : "default abap.yaml" } ${ this.argv.ui ? "and " + - (this.configPath["uiLocal"] - ? this.configPath["ui"] - : "default ui.yaml") + (this.configPath.uiLocal ? this.configPath.ui : "default ui.yaml") : "" }\n` ); @@ -539,14 +535,22 @@ export class Frontend { ...(this.uiConfig.table as UiConfigTableType), }; - // header - element_template.header = element_template.header - .replace(/~bind/, Param.paramName) - .replace(/~title/, Param.PARAMTEXT); - htmlWriter.write(); - htmlWriter.write(element_template.header); + if (Object.keys(element_template).length === 0) { + htmlWriter.write( + `` + ); + return; + } + // header + if (element_template.header) { + element_template.header = element_template.header + .replace(/~bind/, Param.paramName) + .replace(/~title/, Param.PARAMTEXT); + + htmlWriter.write(element_template.header); + } // header row if (element_template.header_row) { for (const [field_name, Field] of Object.entries(_Field)) { @@ -592,7 +596,9 @@ export class Frontend { } // footer - htmlWriter.write(element_template.footer); + if (element_template.footer) { + htmlWriter.write(element_template.footer); + } } structure_init( @@ -801,7 +807,7 @@ export class Frontend { if (!(m.tag in this.uiConfig)) { throw new Error( - `html element ${m.tag} of ${this.configPath["abap"]} not found in ${this.configPath["ui"]}` + `html element ${m.tag} of ${this.configPath.abap} not found in ${this.configPath.ui}` ); }