Design a Page Layout

Note

We highly recommend that before reading about designing a page layout, you read about writing an App.

The best way to create a page layout is to code it manually. Writing the code gives you the most control, especially for very complex layouts. But in most cases, using the Page Layout Designer, as shown in the image below, is much easier and usually sufficient. Using the designer, you can add a control by simply dragging and dropping available controls from the control palettes (Standard, User Controls, and User Templates).

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 below). 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).

Page Layout Designer will generate corresponding javascript code, surrounded with //<LAYOUT DESIGN> macros. Please do not remove or change the lines containing the LAYOUT DESIGN macro, and especially the code between them, as this is the code generated by the designer itself. Changing this code can confuse designer or designer may ignore it.

//<LAYOUT DESIGN>
this.recordsView = new RecordsView(this);
this.recordsView.align = Align.Client;

this.splitter = new Splitter(this);
this.splitter.align = Align.Right;

this.attributesView = new AttributesView(this);
this.attributesView.align = Align.Right;
this.attributesView.width = '30%';
this.attributesView.options.status = true;
this.attributesView.options.labelsWidth = '30%';
this.attributesView.options.readOnly = false;
this.attributesView.source = this.recordsView;
//<LAYOUT DESIGN>