...
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 Client Logic API Functions
...
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 Client Logic API Functions
Open the /sports-webui/ClientLogic/ folder in VS Code. Open Order/getOrderForeignKeys.js from the Explorer view (see picture below).
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.
- 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 CLA supports generic traversing functions like getObject(), getLink() etc. which return the generic base SwatObject class object.
The CLA also supports type specific function like getForm(), getGrid(), getRibbon() etc. to avoid casting.
Alternatively you can use TypeScript casting. For example: (eventSource.getObject("MyObject") 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.
Save (Ctrl-S) and rename (F2) the file as Order/getOrderForeignKeys.ts using the .ts TypeScript file extension (see picture below).
Calling JavaScript functions from TypeScript
...
Open the swat-webui/akioma/sass/ directory in the command line interface. Type npm run sports and press Enter (see picture below).
Note that for the changes to take effect you will need to do a hard refresh on the web page (Ctrl-F5).
...
Open DevTools (F12) in your Sports Application environment. Open the getOrderForiegnKeys.ts file (Ctrl-P) in the Sources tab (see picture below).
You can turn off source maps in DevTools to view the underline JavaScript code which would also allow you to edit the code.
...