Status: Draft

The UiDesigner Perspective panel

The UiDesigner Perspective is the perspective where you design User Interfaces, like Input forms or Custom pages.

When the UiDesigner Perspective Tab is selected, the Studio UiDesigner Perspective panel is displayed:

UI Designer Perspective panel

This panel is composed of:

The Resources tree displays the list of the Popups included in the project.

It allows you to:

UI Designer Perspective panel

Manage the Popups included in the project

Add a new Popup

To create a new Popup, right-click on the 'POPUPS' root node of the Resource tree and select the 'Add a new Popup …' menu item in the contextuel menu.
This displays a dialog where you have to :

  • Enter the 'Name' of the Popup. This Name must be unique within the Popups of the project.
  • Choose the right template, depending of your needs


Edit a Popup

To edit a Popup, right-click on the Popup node in the Resource tree and select the 'Edit' menu item in the contextuel menu.
A new Popup editor is then opened in the 'Popup editor zone'.

If the Popup editor is yet opened, the Popup properties are displayed in the 'Properties Tool window'.


Delete a Popup

To delete a Popup, right-click on the Popup node in the Resource tree and select the 'Delete' menu item in the contextuel menu.
A confirmation message is displayed before deleting the Popup.


Manage the list of files used by the Popup

Each Popup subtree displays the list of files used by the Popup:

  • Popup.html : The HTML page
  • Settings.js: The javascript file containing the design of the page
  • 'Popup.js' and 'Popup.css': Allows to customize the page behaviour and the style sheet (see Advanced techniques)

This list automatically includes project all the files present in the page subdirectory, in the local folder of your project.

Add a new file

To add a new javascript or css file:

  • right-click on the Popup node in the Resource tree and select the 'Add a new file …' menu item in the contextual menu
  • enter the name and the type in the displayed popup, and validate
  • the new file is created in the page subdirectory
  • it is added to the Resources tree, which allows to edit it in the UIDesigner
  • it is automatically included in the popup.html file

You can also manually add any existing file (image, …) the following way:

  • copy the file in tha page subdirectory
  • refresh the Resources tree using the context menu item 'Refresh file list'
  • the added file appears in the Resources tree, allowing you to edit it in the UIDesigner
  • Note that, in this case, the added file is not included in popup.html file.
    If needed, manually update the popup.html file.


Edit a file

To edit a file:

  • right-click on the file node in the Resource tree
  • select the 'Edit' menu item in the contextual menu
  • the owning popup is then opened, if needed, in the Popup editor zone
  • the file is opened in edition in its Editor zone


Delete a file

To delete a file, you have to delete it manually in the Windows Explorer.

If needed, you have to manually update the popup.html file to remove any 'include' clause.


Manage the list of Items of a Popup

The Popup subtree also contains a 'Items' node, containing a hierarchycal view of the Popup items.

Add a new Item

You cannot add a new Item using the Resources tree.
You have to do it in the Designer view.


Edit an Item

To edit an Item, right-click on the Item node in the Resource tree and select the 'Edit' menu item in the contextuel menu.
The Item properties are then displayed in the Properties window, where you can edit them.


Move an Item in the hierarchy

Some Items are 'container Items', which accept other Items as children.
This allows to build an Items hierarchy (seeSet the position of an Item ).

You can move an Item inside the Items hierarchy by using drag&drop in the 'Resources' tree.


Delete an Item

To delete an Item, right-click on the Item node in the Resource tree and select the 'Delete' menu item in the contextuel menu.
A confirmation message is displayed before deleting the Popup.

Take care, if you delete a container item having children, these children are deleted too.


The Popup Editor zone allows you to design Popups.
It can contain one or more Popup editors, each editor allowing to design one Popup.

You can switch between them using the Document selector (see Editor perspective).

Each Popup editor instance is composed of the following components :


The Popup editor zone

The Designer view

The Designer view displays the Popup in an embedded Internet Explorer window.
It allows you to graphically design your popups.

Its toolbar contains the following items:

  • : refresh the Design view from settings.js javascript file
  • : switch the Design mode on/off
  • : switch the Test mode on/off
  • : open the popup in an external Internet Explorer browser
  • : capture the popup to make it available in the WorkflowDesigner
  • : capture the popup to make it available in the WorkflowDesigner


Design mode

With Design mode active, each Item is displayed bounded in a dotted rectangle, with the 'name' property in the upper-right corner.

In this mode, you can:

  • add new Items
  • select an Item to edit its properties


Add new Items

With Design mode active (), right-click in the page:

  • A contextual menu is displayed with the whole set of available Items (button, edit, table, …).
    Each item is mapped to a Bootstrap component (see Bootstrap 3 w3school Tutorial).
  • Select the desired Item type and validate
  • The new Item is added in the 'Resources' tree, under the 'Items' node.


Edit an Item

With Design mode active (), click on the Item in the Designer view.
The Item properties are then displayed in the Properties window, where you can edit them.


Set the position of an Item

UiDesigner use the Bootstrap-3 framework to manage popups.

This means that you cannot simply set (X,Y) properties to choose the position of an Item.
Instead, you have to create a grid, using 'row' and 'columns' Items.

With Design mode active (), right-click in the page in the Designer view:

  • Expand the 'Insert grid' menu item and choose the grid Item to add (containers, rows, columns, …)
  • The new grid Item is added in the 'Resources' tree [1], under the 'Items' node.

The 'Items' subtree reflects the structure of the grid.
You can change this grid structure by using drag&drop in the 'Resources' tree.

For a full description of designing the grid, see the Programming Guide.

Then, to set an Item position, simply drag&drop it in the right grid cell. Note that you cannot make this in the Design view, you have to do it in the 'Resources' tree.


Delete an Item

You cannot delete an Item using the Designer view.
You have to do it in the Resources tree.


UI Designer Perspective panel

The Editor zone

The Editor zone allows you to edit each text file associated to the Popup : settings.js, popup.html, …

You can open several files at the same time, and switch between them using the Document selector (see Editor perspective).

Each file is opened in an editor providing a lot of features: Syntax highlighting, Unlimited undo/redo, IntelliPrompt, Outlining, Zoom, …
For a complete description of these features, see Code editor of the Editor perspective.

By editing the 'settings.js' file, you can change the design your popups by javascript (see Programming Guide).


The UiDesigner Perspective contains the following Tool Windows:


Properties Tool window

Properties Tool window

The Properties Tool window allows you to change the properties of the Popups and their Items.

Its toolbar contains the following items:

  • : manually refresh the Design view with the new properties value
  • : switch the auto-refresh mode on/off


Edit properties

There are different ways to edit the properties of a Popup or an Item:

  • From the 'Resources' tree, right-click on the right node, and select the 'Edit' contextual menu item
  • From the 'Designer' view, in Design mode, select the Item, or right-click on the right Item and select the 'Edit Item' or 'Edit Popup' contextual menu item

The properties are then displayed in the property grid.


Refresh mode

If auto-refresh mode is on, the Design view is automatically updated each time you validate a property change in the property grid.
If not, you have to manually update the Design view, by using the button.


Manage complex Items

Most properties are simple to edit.

Some Items, like radiobuttons, checkboxes, … have some complex properties editable as array of objects.

For such properties, you can:

  • add a new object in the array by using the '+' button (1)
  • remove an object from the array by using the '-' button (2)

Note that you can also directly edit these properties in the 'settings.js' file (see Programming Guide).


The UiDesigner Perspective Layout is a DockSite made of:

  • Four Tool window zones, on the left, top, right and bottom sides,
  • One Documents zone at the center. This Documents zone can be split in several Documents zones.

As in the Editor Perspective, the Layout can be modified and saved (see Docking management).