The new Akioma Swat Client Logic API (- CLAPI).
The CLAPI includes the following features among others Below are some of the features CLAPI introduces -
- Strong object-oriented design.
- Compile-time checking.
- Intellisense and documentation.
TypeScript
The CLAPI is written in TypeScript which allows for compile-time checking and intellisense, among others.
...
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
TypeScript Configuration
The TypeScript configuration
...
https://www.typescriptlang.org/docs/handbook/compiler-options.html
Visual Studio Code
In the following examples we will be using Visual Studio Code.
...
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).
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 "$") -
...
Open the SCL Maintenance for the Sports Sample Application. Open the "New Customer Order" Menu Function in the Menu Function Maintenance. Replace "self" with "eventSource" in the Action Options field and save (see picture below).
Writing CLAPI Functions
Open the /sports-webui/ClientLogic/ folder in VS Code. Open Order/getOrderForeignKeys.js from the Explorer view (see picture below).
...
Start by renaming (F2) the file to getOrderForeignKeys.ts using the .ts TypeScript file extension.
Now that the file is saved as a TypeScript file, you canReplace
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.
Documentation
In addition to the intellisense of the class methods, properties and their explanations
...
https://<your environment domain>/docs2
Calling JavaScript functions from TypeScript
There are cases where you might need to call JavaScript functions and objects you have created or framework functions and objects that have not yet been migrated to TypeScript from CLAPI functions.
...
For example: The JavaScript code: self.myProperty
is equivalent to the CLAPI TypeScript code: eventSource.dynObject.myProperty
.
Compiling Client Logic API 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 Client Logic API Functions
You can view and debug your TypeScript source code using source maps.
...