How-to: Implement Typescript function for initialise values of a screen

Introduction

In this section you will learn how to implement a basic typescript function which will triggered by an event in a screen. This example focus on passing data from an overview screen to a called Create-Screen, e. g. if you want to create an offer for a customer and call the offer Create-Screen from the customer detail page. In this case the customer number should be insert automatically to the screen.

Example

1. Given the following example:
1. You have an customer overview screen with the objects: custDSOcustForm and ribbon
2. In the ribbon you have included a function to startup the offerCreateDialog
3. In the offerCreateDialog there’s the offerCreateFrom which includes beside others the field customeerNumber

Steps

1. In your gitpod environment open Build.One in the Simple Browser (not in a separate tab)
2. Open up your screen in designer offerCreateDialogand launch the action Open events file in the top Ribbon
3. With this a new typescript file should be opened in the correct folder in the gitpod environment
4. The file is named like the screen with appendix .ts
5. In this file you can implement your typescript function. For that you can use the integrated templates, just type in b1-eventFunction and the base structure of such a function will be inserted in your file, named myFunction

export function myFunction(eventSource: akioma.swat.SwatObject) {
  
}

6. Here you can implement your logic. Afterwards there are some example which can be used
1. For checking the object, which calls the offerCreateDialog you can use eventSource.caller and assign it
2. For checking the connected object of the caller use eventSource.caller.getLink('DATA:SRC')(which gets the source object of the data connection
3. For getting the field in the offerCreateDialoguse eventSource.GetObject('NAME')
4. For more examples see CLAPI documentation https://clapi.build.one/
7. To include you function into your screen use the following attributes in the offerCreateDialog
1. EventNamespace: Defines the Namespace, use # for default namespace
2. Any event (e.g. EventOnInitialize): Include here your function using the namespace, e.g. #.myFunction(eventSource);
8. Hint: When you add a new function, you have to trim the PASOE, if you change a function you have to reload your testing application (without cache) to see the changes