Skip to content

Create an App With One Page

Warning

To write an app, you must login to the Application Center as a developer (member of Developers group).

Launch New App Wizard

Select container (folder) where you want your app to be located. Then call command New Application... from the context menu like in the picture below.
In the first page of the New Application wizard select Simple Application template and press the Next button. Context Menu→New Application...

Name, Class and Icon

In the second page of the New Application wizard fill in the required fields like in the picture below and press the Next button. New Application->Second Page...

Warning

App Name must be an alphanumeric text without any spaces or special characters and must start with a letter. This name will be used in JavaScript code to identify application's class.
App Full Name is read only and is made of app's parent container name and this app name. This name will be used in JavaScript code to identify application's module.
You can see here how to use app name and full name to start an app from JavaScript code.

Security

In the third page of the New Application wizard select which user groups will have the 'execution' right on this app and press the Finish button. Application rights can be also later granted or revoked using app's Properites Window (command Properties... in the context menu in the first picture above).
New Application->Third Page...

JavaScript Code

After pressing the Finish button on the last page of the New Application wizard, you will be offered to open your app in Visual Studio Code (or VSCodium).
You can also use context menu commands Open in VS Code or Open in IDE, like in the picture below.
Open in VS Code will open Visual Studio Code or Codium, wich is always the best option for changing the code in NodeActa. VS Code has a sophisticated code editor with auto-complete which simplifies code writing, plus much better and faster debugger.
Open in IDE will open Application Center in Integrated Development Environment (IDE) mode, where you will not be able to execute your apps, but to edit your apps' code instead. We strongly recomend using VS Code instead of build-in IDE. Build-in IDE is good only for small changes when you don't want or you can't install additional software (VS Code or Codium).
Edit New Application

Write Your Code

In VS Code, you can modify existing application .js files, create new ones, or delete unwanted. All the changes you make in VS Code are local and only you are affected by them on your local PC. If you want other users to see your changes, you will have to uppload them to the server. To upload the changes run the command command (Ctrl+Shift+P) NodeActa Upload Changes or press Upload Changes button like in the picture below. Alternatively, you could call Commands→Save All from the main menu in the Application Center. Also, every time you close Application Center, you will be asked to uppload changed code (of course, if you are logged in as a developer). Edit New Application in VS Code

Standard apps always have index.mjs file. They can also have any number of other files next to index.mjs or in sub-folders. WEB apps are an exception, as they can have index.html instead.

In the code generated by the New Application wizard, you can see we already have one Page declared: 

export class MyNewApp extends App {
  ...
  constructor() {
      super();

      class Page extends PageView {
          constructor(app) {
              super(app);

              //<LAYOUT DESIGN>
              this.textView = new TextView(this);
              this.textView.left = '45%';
              this.textView.top = '45%';
              this.textView.width = '20ch';
              this.textView.height = '2ch';
              this.textView.textAlignment = Alignment.Center;
              this.textView.textVerticalAlignment = VerticalAlignment.Center;
              this.textView.text = '<Add controls here>';
              //<LAYOUT DESIGN>
          }
      }

      this.page = new Page(this);
  }
...
}
When building your app's interface, you have to chose between 2 options:

  1. Your app window will be embedded within the Application Center main window, or
  2. Your app window will pop-up as a separate window on top of the Application Center main window.

If you you want your window to be embedded, your will create an instance of PageView class. If you want it to pop-up on top, you will use DialogView (example). In this example we are building an embedded window, and the best practice is to declare our own class that inherrits PageView class. Within our Page class constructor we will declare all of the controls of that page. In the sample code above we have one TextView control declared. We can add any other built-in control to this page (except another PageView or DialogView) or any custom control you develop. You can also use Layout Designer to design your page, but please be aware that designer has its limitations.

Hint

The best practice is to create your Page within app's constructor() and initialize controls of your page with data (usualy retireved from the database) in app's run() method.

Toolbars and Menus

Use app's static commands property to customize the Navigation View context menu, and app's commands property to customize the main toolbar and the main menu. Also, each PageView can have its own commands, and whenever that page is shown and active, whey will be displayed in the main menu and toolbar (merged with the existing commands defined in app's commands property). See Command.

get commands() {
    return [ {    
        group: L`My Main Menu`,   // <main meny item (default is `Commands`),
        label: L`Command 1`,
        icon: Icons.play,        // one of the icons in the system
        visible: () => ...,      // expression or variable
        enabled: () => ...,      // expression or variable
        checked: () => ...,      // expression or variable
        command: () => { /*do something*/ },
      },
      {    
        group: L`My Main Menu`,   // <main meny item (default is `Commands`),
        label: L`Command With Sub-Command`,
        icon: Icons.stop,        // one of the icons in the system
        visible: () => ...,      // expression or variable
        enabled: () => ...,      // expression or variable
        commands: [ {            // list of commands for sub-menu/dropdown button in toolbar 
          label: L`Sub-Command`,
          icon: Icons.grantee,
          command: () => { /*do something*/ } } ]
      }  ];
  }

Hint

The initial toolbar, main menu, and navigation view context menu are defined in StartApp. These toolbar buttons and menu items are always present, regardless of whether another app is running or not. Of course, you can change those by modifying JavaScript code of the StartApp itself.