How-To: Hello World! in TypeScript

In this How-To we will create a simple TypeScript function and call it from the UI.

In a nutshell: create a new screen with a button which displays an info message on click.

Steps:

1. Create a new screen
2. Add at least one button to this screen.
ℹ️
Best way to do it: Create a new form, include the button there and add the form to the screen.
⚠️
You have to enable the button and add a label. For example: “Tell me something”.
3. Go to the Gitpod environment and create a new file helloworld.ts in the directory src/webui/akioma/ts
1. Add the following code to your newly created file
Copy

export function HelloWorld () {

  akioma.swat.Message.informationMessage(`Hello Builder, you're awesome. Keep building!`);

}

4. Go to the file index.ts
1. Add an import line before the existing export line, which imports your function:
Copy

import { HelloWorld } from './helloworld';

2. Add your function also to the export line (in the curly brackets)
Copy

export default { HelloWorld };

5. Now you have to add the function to an event in the frontend. For that use the attribute eventClick of the button. There you should add the following: $ [YOUR NAMESPACE HERE].HelloWorld ()

To check what’s the value for [YOUR NAMESPACE HERE] go to src/webui/webpack.config.babel.js and find the following code snippet

return [
    { // TS build
      name: 'typescript-build',
      mode: constants.mode[mode],
      entry: './clientlogic/index.ts',
      output: {
        filename: 'app.ts.bundle.js',
        path: outputPath,
        library: 'app',
        libraryTarget: 'assign-properties',
        libraryExport: 'default'
      },
]

The value of library defines the namespace, so in this case its app and in this example the value of the eventClick attribute would be $ app.HelloWorld ()