Apps Development

App is an entry point to your NodeActa system. The list of all available apps is displayed in the tree view on the left side of your Application Center called Navigation View, just like folders are displayed in your Windows Explorer. Even initialiing Application Center is done via app called StartApp. Simply said, in StartApp available apps are selected from the database and used to initialize Navigation View.

Warning

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

Your First App

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 New Application wizard fill in the required fields, select application template and press Make button.

Launch Editor

To write your app's javascript code, call Open in IDE, or even better call Open in VS Code.
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.
Open in VS Code will open Visual Studio Code or Codium, wich is a better option than using Application Center in IDE mode. Visual Studio Code has a sophisticated code editor with auto-complete which simplifies code writing, plus much better and faster debugger.

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 when you close Application Center, you will be asked to uppload changed code (of course, if you are logged in as a developer).

Hint

Standard apps must have index.mjs file. They can also have any number of other files next to index.mjs or in sub-folders.
WEB apps are the exception. They must have index.html file as an entry point.

Debug Your Code

You can start debugging your code by pressing F5 in VS Code, or by switching to the Debugger tab and pressing the Debug button like in the picture below.
This will start Application Center and ask you to login. It is important to login within 15 seconds, od debugger will not be active.

Simple App

If you select Simple Application template when creating your app, the system will create the basic structure of a single page app like in the picture below.

Generated code includes the NewApp class definition, which must inherit from either the base App class or another application class. For instance, you could create a NewAppEx app that extends NewApp and overrides only the methods you wish to modify.

Within NewApp class constructor, a single Page with a single TextView is defined.
The TextView declaration is enclosed within //<LAYOUT DESIGN> markers. These markers indicate page layout boundaries and are utilized by the Page Layout Designer. Removing them will prevent you from designing the page layout using the Designer. Additionally, avoid making manual changes to this code, as it will be overwritten by the Designer.

In NodeActa, each application includes a run() method. Page layout should be designed within the app's constructor, while data initialization should be handled inside the run() method. Keep in mind that constructors cannot call and await asynchronous methods, whereas the run() method has no such restriction. See Launch App From Code.

Dialog App

If you select Dialog Application template when creating your app, the system will create the basic structure of an app with a popup window (dialog). In NodeActa, you can create a popup window using the DialogView class. The DialogView class allows you to create either modal or modeless dialog views. A modal dialog blocks the UI until it is closed, while a modeless dialog lets you interact with other Application Center windows. To display a modal dialog, use the showModal(...buttons?: string[]) method. You can provide up to five button names as parameters, and the DialogView class will render these buttons at the bottom of the dialog. The method returns the name of the button that was clicked. If the buttons parameter is omitted, no buttons will be displayed at the bottom. For displaying a modeless dialog, use the await show(...buttons?: string[]) method.

Query App

If you select Query Application template when creating your app, the system will create the basic structure of an app with a search dialog and list of search result records. In the generated code, within the app's run() method, we have an example how to use QueryParametersView to display a search mask. In this case, the search mask is generated from document class's fields with specified Search flag in Default Visibility property. You can create any query that fits your needs and, instead of a condition value, use an instance of the QueryParameter object for conditions you want to display in the search mask (QueryParametersView).

Container (Folder)

Your containers (folders) in the Navigation View are also apps. Comparing to a regular app, containers inherit Container (instead of App) base class, and can have sub-apps and/or sub-containers. To create a container call command New Container... from the context menu in the first picture above. You can customize a specific container (folder) by modifying its code in index.mjs file. For example, you can customize container's context menu by overriding its static Commands property (see Toolbars and Menus).

Hint

Containers can 'run' like standard applications and may include a user interface. Practically, the main distinction from a regular app is that it can contain sub-containers/apps in the Navigation View.

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: '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: '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.

Layouts

You can create the page or dialog layout by coding it manually, but in most cases, using the Page Layout Designer, as shown in the image below, is much easier.

Page Layout Designer is available in Application Center in IDE mode. Each file opened in Application Center in IDE mode has option to edit either the Code or to Design the page. Alternatively, you can launch Page Layout Designer directly in Visual Studio Code by using the command (Ctrl+Shift+P) NodeActa Design Page or by pressig Design Page Layout button (like in the picture in Write Your Code section). If this command is not available, NodeActa extension is not installed. When you open VS Code from the Application Center, you will be offered to install this extension, make sure you press Install button (like in the picture below).

To install it manually, open the Extensions view in the Activity Bar, and from the context menu (as shown in the image below), select Install from VSIX.... (extension can be found at C:/Program Files/NodeActa/Client/nvjs-1.0.0.vsix).

Launch App From Code

To launch another application from your app, you should first create an app instance and then invoke its run() method. For example:

import { MyOtherApp } from "nv:Samples.MyOtherApp";
or
const { MyOtherApp } = await import('nv:Samples.MyOtherApp');
...
var otherApp = new MyOtherApp( maybe some args: AppArguments );
var result = await otherApp.run();

!!Security!!

When developing your apps, remember to grant users permission to execute it.
As the app's creator, you are automatically app's owner and have execution rights, but other users do not. To ensure proper access, configure the app's security settings as shown in the image below.

Warning

Apps do NOT inherit security from its parent container, but from SYS$APP class.
This means, you will have to grant rights to each app within your container and not just to the container.

Hint

We suggest granting rignts to User Groups and not Users directly.