- Logic is where you work on how page behave: program data binding, widgets interoperations and so on,
- Gui is WYSIWYG editor, you work on how page looks, it's default screen,
- Preview is where to test how page is working.
On the left side is page's name. If you move mouse cursor over name you'll see in tooltip when page was created and edited last time.
2. The Gui Editor
Gui is default editor and is what you see when start working on new page. Gui screen consists of next parts:
- Save clearly, saves page changes. Btw, we have save history up to 5 versions, it's possible to backup previous page state.
- Add Widget opens a dialog to add widget. you will see it in details in Layout Area section.
- Import means you can import page content. This is a json file with full page content: styles, layout and logic. Button open a dialog where you paste new page content as json text. After import it changes page and saves it.
- Export saves current page's state (even unsaved) as json file on your computer. You can import that file in other page, that way you can clone page or share it with coworkers. There is not other way to clone page.
- Undo can work with all unsaved changes, unlimited count. undo queue is reset after you save page.
- Redo as previous command, can reapply actions that was canceled. If you make any change, all next redo queue is reset.
- Lock layout allows you fix widgets and panes position, mouse can't move them anymore.
After state controls is basic widgets. If they are all not fit at shelf, there is scrolling buttons to see them.
They opens different dialogs serve for HeatMap feature. Shortly, you can make heatmap over you floorplan, or make 3D building heatmap. Respectively, first button lets you initialize points to work with that feature, second — change points. You can learn HeatMap feature in other article.
When no widget selected Breadcrumbs shows only one button "Select all" which, as you can guess, selects all widgets.
If something is selected, Breadcrumbs show you next controls:
- Deselect button which clears selection.
- Duplicate button.
- Breadcrumbs itself.
- Delete button, deletes selected.
Widgets can be nested on different levels. It is possible with Pane widget. Breadcrumbs is more useful when you have nested widgets: Pane with widgets, Pane in Pane. If you have selected widget, you can change selection to Pane, contains it (go on level up). If you have selected few widgets in Pane, you can alter selection on same level: choose one of selected widgets.
Layout Area shows you how page would looks, allows to add, remove, move, select and reorder widgets. Mostly widgets never show realtime data — data which can be retrieved by page's logic. But Charts tries run logic to load real data to let you configure plots.
Add Widget dialog
- Basic — all standart widgets like label, charts and all other (read more at Widgets tour).
- Default — is a library of smart widgets. For now contains only PointDisplay.
If user have other libraries, they would be listed in tabs too. Read more at Using Smart Widgets and libraries.
- resize edges and corners,
- toolbar with Duplicate and Remove buttons, and drag holder (dotted area).
Usually w. editor looks like dashed rectangle around widget. When selected it displays resize controls and toolbar.
At top of panel is property search field. It's useful when you work with charts and grids — they have a lot of properties. Below search field is widget card. It contains widget name and logic representation: if you have used widget in logic, you see link with block name, otherwise you have button to abb widget block in Logic Editor.
Everything below is properties. For your comfort properties are divided by groups. Every widget has next groups:
Some style properties and other ones are complex: instead of one value they have set of nested properties. It has preview display, which opens nested properties by click.
If you take a look at Gauge widget, you will see it has zones property, which is a list of complex values. That editor has buttons to add value, remove it, and property rows are collapsible as other complex properties.
Actions on property
By clicking on "Styles" tab you can switch Properties panel on Styles panel. It allows you manage page's styles.
Page style is not something you can apply to page itself. It just styles by their own. But you can choose widget (like label, button, image) and apply style in
classes property. That way you can share one style between many widgets, and you don't have to copy style properties between widgets.
Outline helps with two tasks: reorder widgets and navigate through nesting. It's more helpful when you have fullbleed widgets and other absolute positioned ones, which overlaps and it's hard to select exactly widget you need.
Top toolbar contains buttons:
- filter — to filter widgets by name, case-sensivity,
- select children — selects first child for selected pane.
Drag and drop in Outline
D&D actions behave different with empty and filled panes. When you drag widget over empty pane drop result depends on where is mouse cursor. Drop over left half of pane inserts widget after pane. Drop over right half — adds widget to pane.
Pane with one or more widget hasn't such behavior. You just choose before which widget to insert.
3. The Logic Editor
This is the second editor you will often use. On that screen you will program page to do work to load data, change queries, alter data display and so on. Logic editor has dark theme and simpler interface to compare with Gui Editor.
Logic Editor is a simple IDE for flow-based programming. Yes, to make widgets work you write a program here. It makes editing a bit harder to understand, but it gives you rich possibilities in developing page in return. Something like that you could see in Niagara Ax Workbench and in Sedona Framework.
Logic program consist of blocks and connections. Each block has ports. You set block parameters at inports, and it returns some result at outport. To pass data between blocks you connect outport of one block with inport of another. Also, you can set inport value directly.
In that example first block Temp points loads some data, which goes from outport
grid to inport
grid of second block Point 1 . The second block processes data and fires new out value on port
record. Last block Get curVal gets new value and can process data too.
That's all you need to understand terms of that section. To learn more about how to develop pages read further articles.
3.2 Logic Editor Toolbar
Top toolbar contains same state buttons like in Gui Editor (like save, import, undo), but there is few new buttons:
That function moves all nodes to form readable and compact layout of blocks depends on connections. It uses KIELER's automatic layout algorithms. To get understand just take a look at result.
Algorithms split blocks by its bonds, split not connected blocks on rows. Each row starts from same x position.
To do that you need to connect blocks together. Select blocks you need to connect.
And click Mass Link button. In a wizard choose direction "one to many", because we have one source block
Equip and many points. And choose Equip as source block in list below.
On next screen choose source outport, this is
record in our case, and
context for targets. And click apply.
And result will be like that.
It was more faster and easier than draw each connection. Imagine you have 15 blocks to connect instead of 4 blocks here.
That's easy: just select all that blocks and click button "Switch selected" and toy get selected connections only. All you need to do after that — press "delete" button on keyboard.
You can open the dialog with button on the toolbar or with shortcuts
Ctrl+Shift+d on Windows or ⌘⇧D on Mac OS, select at least one block before.
First line allows you to set count of new duplicates.
Second option — free space. It that case new blocks would be at bottom of all logic graph, and keep same relative positions to each other:
Fourth parameter is "Keep labels same". If it unchecked new blocks take names like originals have, but take or increase number on the end. "Add" becomes "Add2", "Add2" becomes "Add3". If parameter is checked new blocks keep same name as original.
This is a nice feature when you need to duplicate few connected blocks. Take a look at next example: I have loaded a grid with points and need extract some ones. I have already done work for one point and need to repeat that.
I need to select
Point 1 and
Get curVal blocks, open duplicate dialog and choose "Copy external connections". And I have it. All I need now is to change
index inport value for new points blocks.
That way you don't need Mass Link feature, which could take more actions to get job done.
You can add block with Add Block dialog. To open it click red circle "plus" button, click "add" button at toolbar or press Ctrl+A (⌘A) on keyboard.
Dialog has few tabs, which contain different items. Tabs except two first contains usual blocks to build logic, grouped by category. It is regular collections of blocks. First two tabs contains different kind of blocks and they both can be empty. Let's overview all the tabs:
To move block just drag where you need it. To drag few blocks select it and drag selection box, picking it by any free point.
While you have selected blocks you still can drag one block.
Other option is use context menu. Click right mouse button over any block and you will see circle context menu with delete option. That way you can't remove few blocks.
Copy and paste
All copied blocks pasted beside original ones. When you paste same blocks few times, each new copy would be shifted to right-down direction.
Other option to make copy is context menu, where is copy and paste commands.
Currently you can't copy blocks between two pages or between browsers.
To create connection press mouse button on block's port and start drag. A white line will appear. Drag line to another block and release mouse button over desired port. Connection is created.
Other way to create connection is
Call block's context menu, click with right mouse button over block (but not over connection or port, they have different menu). Around menu you see ports: inports at the left, and outports at right.
Click on desired port (menu will go away) and point mouse to desired target port of other block. While you move mouse connection is stick to it like you drag it. Click on target port and connection is created.
You can also delete one connection from it's context menu.
3.4 Properties panel
Properties panel allows you edit block's properties, name and read documentation. When no block selected panel looks empty. This is how panel looks like when you select one block:
At first row is block name. Below is block type and documentation. First name in type is block collection (like data, grid, core, widget), second - exactly type name.
When inport have initial value, you can see it in text field, and see little caption beside block:
To set initial value click inport's text field and type text. Text values can be long, so there is big text field to edit:
Other inports use special dialogs to set value. To open it click
[...] button and choose "open editor" in dropdown.
Block representing widget looks a bit different. At first, it has widget link: you can click it and application switches to Gui Editor and selects that widget. That way you can get what a label it is.
Widget's block doesn't have initials, inports here just shows widget's properties, and when you edit inports you change properties. As you can see block hasn't any visible initials:
Here is all shortcuts you have in Logic Editor in one table. For brevity, "⌘" means command button on Mac OS and Ctrl on PC, ⌫ — backspace or delete, ⇧ — shift. "-" means you haven't option to do that from keyboard only.