Skip to main content

Helpcenter

Implement a First Function in TypeScript

The following instruction is based on an example of a B2C uses case where an address data set has to be checked manually. For this purpose, a small Typescript function is implemented, with which an employee can mark a record as manually checked.

Add a Button to a Form

  1. Go to Design > Screens.

  2. Open the desired screen containing a form in the Object Designer.

  3. Click the gear wheel next to the form in the Layout Design panel, then click Open Object Master.

  4. Add the SimpleSwatButton to your form.

  5. Change the following attributes in the Attribute panel:

    1. ENABLED: True

    2. Label: <Label>, e. g. 'Click me'

  6. Click save.

Create a New TypeScript Function

  1. In the Object Designer click on Open events file button.

    A new file is created in the Gitpod environment in the src\webui folder.

  2. Open the file in your Gitpod environment.

  3. Type b1-eventFunction.

    Tip

    To create a new function in this file, you can use the provided template. If you type only b1 more examples are suggested.

  4. Rename the created function myfunction to for example AddressCheck.

  5. To create a simple text output here type the following:

    akioma.swat.Message.informationMessage ('Hello World!')

  6. Save the changes.

    You can see the build running.

  7. When the build is finished, trim the PASOE with the command b1 trim.

    Note

    With a trim the PASOE is restarted without losing the current session.

Add the TypeScript Function to the Screen

  1. Open the screen in the Object Designer.

  2. Enter the value '#' in the eventNamespace attribute in the Attribute panel.

  3. Open the form included in the screen in the Object Designer and select the previously added button.

  4. Enter the value '#.AddressCheck(eventSource);' in the eventClick attribute in the Attribute panel.

  5. Click Save.

  6. Refresh your application without cache.

  7. Click the Launch button.

    The screen is launched and you can click the button and see the 'Hello World' info message.

Expand the TypeScript Function

You can expand the function, for example, by displaying the text 'This address was checked by' and the username in the field Name1.

Adapt the code as follows:

export function AddressCheck(eventSource: akioma.swat.SwatObject) {
  const Form = eventSource.parent as akioma.swat.Form;
  const user = akioma.swat.SessionManager.get('userKey');
  
  Form.setDataValue('Name1','Address was checked by ' + user);

  akioma.swat.Message.informationMessage ('Hello World!');
}

  • const Form = eventSource.parent as akioma.swat.Form;: To define a constant for the form.

  • const user = akioma.swat.SessionManager.get('userKey');: To get the name of the current logged in user.

  • Form.setDataValue('Name1','Address was checked by ' + user);: To fill the field with a string and the user.

In this section: