The new Akioma Swat Client Logic API - CLAPI.
Below are some of the features that CLAPI introduces -:
- Strong objectObject-oriented designprogramming.
- Compile-time checking.
- Intellisense and documentation.
...
TypeScript also allows for intellisense on class methods and properties in addition to JSDoc.
Lastly, TypeScript can allows to compile down to an older version of JavaScript (like ES5) so you can use modern JavaScript features and still support older browsers like Internet Explorer.
...
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
TypeScript Configuration
The TypeScript configuration There is only one TypeScript configuration file - tsconfig.json placed at the project root directory for all the TypeScript project configuration.
The CLAPI TypeScript configuration file should be is in the application CLientLogic<application>-webui/ClientLogic/ directory, for example: sports-webui/ClientLogic/tsconfig.json
Note that you do not need to be familiar For familiar with the TypeScript configuration file to use CLAPI.
For a detailed explanation on tsconfig.json see the link below -
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
For a list of tsconfig.json compiler options see the link below -
https://www.typescriptlang.org/docs/handbook/compiler-options.html
Visual Studio Code
In the following examples example we will be using Visual Studio Code.
Visual Studio Code (VS Code) is a modern, popular and free code editor from Microsoft with built-in TypeScript support.
Fun fact: VS Code is actually written in TypeScript running on the electron framework.
...
https://code.visualstudio.com/docs/getstarted/introvideos
TSLint
Migrating to the CLAPI
In the following example we will migrate a function to the CLAPI. The function gets the foreign keys (or initial field values) when launching a window to create a new record.
In the Sports Sample Application, open the Customers desktop window. Click the New Order button in the Customer Grid Floating Action Button (FAB) (see picture below).
The foreign keys (like customer no.) or initial values in the New Order window are taken from the get foreign keys functions.
Calling CLAPI Functions
You can pass several system objects to a function call written in the Layout Designer or the Smart Component Library (SCL) Maintenance (starting with "$") -
...
Start by renaming (F2) the file to getOrderForeignKeys.ts using the and replacing the JavaScript .js file extension to the TypeScript .ts TypeScript file extension.
Now that the file is saved as a TypeScript file, you can can see the compile errors and use the intellisense.
The compile errors are marked with a red squiggly underline. Hover over the error to show the error messages.
Lines with errors are marked in red on the side scroll bar. Files with errors are marked in red in the File Explorer.
The intellisense and JSDoc comments opens automatically when typing object method and properties (starting when typing "." after an object).
If the JSDoc comments are not shown together with the intellisense, click the blue circle with an "i" to show the JSDoc comments.Replace
if (akioma.samples)
akioma.samples = {};akioma.samples.getOrderForeignKeys = function(self) {
With
namespace akioma.samples {
export function getOrderForeignKeys(self) {
Use namespaces to avoid naming conflicts. Note that functions must be exported to be used outside the namespace (namespaces are compiled into closures).
- Replace
self
witheventSource: akioma.swat.SwatObject
.
Note that the function parameter name does not have to be eventSource. For example: eventGrid eventForm, eventRibbon etc. Although self might be confusing with the JavaScript dynObject.
Note that the function parameter type does not have to be the generic base SwatObject as in this case. Use the correct Object Type class to avoid casting. - Replace
getObject("CustomerDetailsForm")
withgetForm("CustomerDetailsForm"),
getObject("CustomerGrid")
withgetGrid("CustomerGrid")
andcontainer
withwindow
.
The CLAPI supports generic traversing functions like getObject(), getLink() etc. which return the generic base SwatObject class object.
The CLAPI also supports type specific function like getForm(), getGrid(), getRibbon() etc. to avoid casting.
Alternatively you can use TypeScript casting. For example: (eventSource.getObject("MyForm") as akioma.swat.Form). - Replace
getValue
withgetDataValue
.
The Form and Grid classes have both a getScreenValue() and getDataValue() functions for getting the field screen value or record value respectively. - Remember to save (Ctrl-S) your work (see picture below).
Documentation
In addition to the intellisense of the class methods, properties and their explanations
you can find the documentation for the complete list of CLA CLAPI TypeScript classes, their methods and properties in the link below -below
https://<your environment domain>/docs2
clapi-documentation.akiomacloud.de/
Calling JavaScript functions from TypeScript
...
To call global functions and objects, the CLA CLAPI added .akioma, .app .dhtmlx, .$ etc. properties with type any to the global Window type declaration.
...
For example: The JavaScript code: self.myProperty
is equivalent to the CLAPI TypeScript code: eventSource.dynObject.myProperty
.
Compiling
...
CLAPI Functions
Open the swat-webui/akioma/sass/ directory in the command line interface. Type npm run sports and press Enter (see picture below).
...
Note that other environments may have their own custom build and watch scripts that watch for file changes and launch the build scripts automatically.
Debugging
...
CLAPI Functions
You can view and debug your TypeScript source code using source maps.
...