Script Overview

Comparison with Flows

• A script is code developed using TypeScript. It is equivalent to building blocks, and can batch process the blocks.
• A flow is graphical and equivalent to using blocks to orchestrate service processes. A maximum of 20 diagram elements are recommended.

What Editor Is Used for Scripts?

An online development IDE is provided as the script editor. It delivers a development experience similar to an offline development tool. The advantages are as follows:

• Modern editing page with syntax highlighted
• Smart tips and code completion
• Accurate definition, code preview, search, and reference
• Fast online compilation
• Friendly syntax error notification
• console.log for analyzing complex issues.

Figure 1 shows the script editing page where you can edit, test, and publish scripts.

Figure 1 Script editing page

• Button area
  Table 1 describes the icons on the script editing page.

  Table 1 Icon description

  Icon	Description
  /	: Click this icon to activate the script. If this icon is highlighted, the script is activated. After a script is developed, you need to activate the script. Only activated scripts can be found when being called by other resources (such as flows and standard pages). : Click this icon to deactivate the script. If this icon is not highlighted, the script is deactivated.
  	Save the script.
  	Save as a script.
  	Set script properties, such as visibility and whether to enable overwriting.
  	Run the script.
  /	Undo and redo operations.
  	Check the performance, compatibility, and static configuration of the developed script code. For details about code check, see Rules for Checking Script Performance.
  	Refresh imported scripts to the latest status.
  	Click this icon to open the script editor in a split-screen view.
  	After the script is activated, click in the upper right corner to view the calling relationship of the widget.
  	Go to the TS script manual.
  	Compare versions.
  	Switch versions.

• Code editor

  You can develop code in this area to implement functions. The code editor provides functions such as intelligent prompt, code completion, and display of the row and column where the cursor is located. For more information, see AI Code Completion.

  The script editing page also supports common shortcut keys in offline editors. For example, you can press Ctrl+S to save the modification, and press Ctrl+H to display the Find and Replace dialog box. You can try various shortcut keys as required.

• Test area

  Display area after the code is run. After parameters are input on the input parameter tab page, click on the right of the test area to run the script. You can check the output result on the output parameter tab page and view issues and logs on the problem and log tab pages, respectively. In addition, you can clear log outputs, run scripts, and dynamically check and save input parameters.

What Languages and Libraries Are Used by Scripts?

The script engine of Astro Zero uses TypeScript, which is translated into JavaScript before being executed. For details about the import syntax of TypeScript modules, see the TypeScript official website.

In addition to the official standard libraries of JavaScript ES5, more than 10 preset standard libraries (that is, preset APIs) are provided to help you develop scripts efficiently. For details, see Preset APIs in Scripts.

The following is an example of using a library:

import * as http from 'http';

In the platform, some modules are compiled in binary mode and preloaded in the memory. For example, decimal and context are standard library modules preset in the system. The platform preferentially loads standard library modules. Example:

import * as http from 'http';

The built-in HTTP module is always preferentially loaded, even if there is a custom module with the same name. If a custom module needs to be preferentially loaded, use the relative path syntax.

import * as http from './http';

Code Editor

Right-click the code editing area to view the navigation shown in Figure 2. The script editor also provides functions such as intelligent prompt, code completion, and display of the row and column where the cursor is located.

Figure 2 Code navigation

• Go to Definition

  Right-click a symbol in the code editing area and choose Go to Definition to search for the symbol code definition.

• Go to References

  Right-click the code editing area and choose Go to References to view the symbol reference in the script.

• Go to Symbol

  Right-click the code editing area and choose Go to Symbol. Select a symbol to jump to the part of its code definition.

• Run

  Right-click the code editing area and choose Run to run the script.

• Peek Definition

  Right-click a symbol in the code editing area and choose Peek > Peek Definition to view the code definition.

• Peek References

  Right-click a symbol in the code editing area and choose Peek > Peek References to view the code reference.

• Rename Symbol

  Right-click a symbol in the code editing area and choose Rename Symbol to rename the symbol.

• Change All Occurrences

  Select a string, right-click the code editing area, and choose Change All Occurrences to modify all occurrences of this string throughout the code in batches.

• Format Document/Format Selection

  Select a code block, right-click the code editing area or anywhere and choose Format Document to format the code.

• Fix lint issues

  Select a code block, right-click the code editing area or anywhere and choose Fix lint issues to fix static specification errors.

• Cut/Copy

  Select a code block, right-click the code editing area, and choose Copy to cut or copy the code.

• Command Palette

  Right-click the code editing area and choose Command Palette or press F1. The command palette is displayed for you to perform editing functions.

• Hover

  Hover the cursor over a symbol to view its definition summary. Press Ctrl and click the symbol to view its detailed definition.

  For example, you can hover the cursor over useObject to check its summary, as shown in Figure 3. Press Ctrl and click useObject to view its detailed definition, as shown in Figure 4.

  Figure 3 Viewing a definition summary
  
  Figure 4 Viewing detailed definition
  
• Bracket matching

  The symbols that match the selected content are highlighted, such as braces {}, parentheses (), and brackets [].

  Figure 5 Bracket matching
  
• Errors and warnings

  The code with incorrect syntax is marked with red wavy lines. Move the cursor over a line to view the error details.

  Figure 6 Errors and warnings
  
• Go to a specified line

  Press Ctrl+G and enter a line number to go to the line.

• Search and replace

  Press Ctrl+F and enter a keyword to search the code. indicates that the search content supports case-sensitive matching, full-text matching, and regular expressions.

  

  Press Ctrl+H and enter a keyword to find and replace content in the code.

  

• Code complete
  • Complete a symbol.
    Figure 7 complete_symbol
    
  • Complete an object member.
    Figure 8 complete_member
    
  • Complete a parameter.
    Figure 9 complete_parameter
    
• Comment code

  Select a code block in the code editing area, and press Ctrl+/ to comment out or uncomment the selected code block.

• Save file

  In the code editing area, press Ctrl+S or click the save icon in the upper right corner to save the script.

AI Code Completion

The code completion engine learns coding habits from the historical scripts and learns context syntax from the current script. The system provides prompts based on the context and historical code to automatically complete code.

When you write code, code recommendation is automatically triggered. Select the desired content and press Enter to complete it. Move the cursor to the field whose details are to be viewed, copy the text in the floating window, and paste it to the code.

Sample Code Interpretation

This section provides specific interpretation of scripts. The process of compiling a script is as follows:

1. Introduce standard libraries as required.
   Figure 16 Introducing standard libraries
   
2. Define output and input parameter structures.
   Figure 17 Defining input parameters
   
   Figure 18 Defining output parameters
   
3. Define methods and objects.
   Figure 19 Defining methods and objects
   
4. Perform database operations.
   Figure 20 Database operations
   

The following script example helps you understand the overall structure and compilation requirements.

import * as decimal from 'decimal';

@action.object({type: "param"})
export class ActionInput {
    @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'})
    name: string;

    @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'})
    age: decimal.Decimal;

    @action.param({type: 'Date', pattern: 'yyyy-MM-dd'})
    birthday: Date;

    @action.param({type: 'String', isCollection: true})
    schools: string[];

    @action.param({type: 'Boolean'})
    married: boolean;

    @action.param({type: 'MyObject'})
    obj: MyObject;
}

@action.object({type: "param"})
export class MyObject {
    @action.param({type: 'String'})
    something: string;
     @action.param({type: 'Number'})
    otherthing: decimal.Decimal;
}

@action.object({type: "param"})
export class ActionOutput {
    @action.param({type: 'String', isCollection: true})
    greets: string[];
}

@action.object({type: "method"})
export class ActionDemo {
    @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' })
    public greet(inarg: ActionInput): ActionOutput {

        console.log('name = ', inarg.name);
        console.log('age = ', inarg.age);
        console.log('birthday = ', inarg.birthday);
        console.log('schools = ', inarg.schools);
        console.log('married = ', inarg.married);
        console.log('obj = ', inarg.obj);

        let out = new ActionOutput();
        out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see'];
        return out;
    }
}

The preceding script consists of the following parts:

• Import standard libraries or other modules.
  In the preceding example, the first line indicates that the decimal library provided by the platform is used.

  import * as decimal from 'decimal';

  In addition to preset standard libraries, you can reference custom modules. For example, if you have developed the circle script in advance, you can import it as follows:

  import * as circle from './circle';

• Define input and output variables.

  A script may have no or multiple input/output parameters. All input or output parameters must be encapsulated in a class as instance members.

  In this example, the script has six input parameters, which are encapsulated as ActionInput. The parameter type must be defined, and optional properties such as mandatory/optional, label, maximum value, and minimum value can be defined.

  @action.object({type: "param"})
  export class ActionInput {
      @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'})
      name: string;
  
      @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'})
      age: decimal.Decimal;
  
      @action.param({type: 'Date', pattern: 'yyyy-MM-dd'})
      birthday: Date;
  
      @action.param({type: 'String', isCollection: true})
      schools: string[];
  
      @action.param({type: 'Boolean'})
      married: boolean;
  
      @action.param({type: 'MyObject'})
      obj: MyObject;
  }

  The parameter type of the sixth input parameter obj is a custom object, so the definition of MyObject must be provided.

  @action.object({type: "param"})
  export class MyObject {
      @action.param({type: 'String'})
      something: string;
       @action.param({type: 'Number'})
      otherthing: decimal.Decimal;
  }

  The script has one output parameter, which is encapsulated as ActionOutput.

  @action.object({type: "param"})
  export class ActionOutput {
      @action.param({type: 'String', isCollection: true})
      greets: string[];
  }

• Definition method

  In the example, ActionDemo is a class called by the external system, and needs to be exported using the export script. ActionDemo defines an action method, which is represented by action.method. This method is the entry for script calling. greet is an instance method of a class. Its input and output parameters are ActionInput and ActionOutput defined previously. In a module file, action.method can be used only once.

  @action.object({type: "method"})
  export class ActionDemo {
      @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' })
      public greet(inarg: ActionInput): ActionOutput {
  
          console.log('name = ', inarg.name);
          console.log('age = ', inarg.age);
          console.log('birthday = ', inarg.birthday);
          console.log('schools = ', inarg.schools);
          console.log('married = ', inarg.married);
          console.log('obj = ', inarg.obj);
  
          let out = new ActionOutput();
          out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see'];
          return out;
      }
  }

  The script editing page does not support single-step debugging. In the example, console.log can print process output in logs to facilitate code debugging.