Why Use

Features

Sys-Dev

 Use Cases

Companies

Documentation

Contact Us

Downloads

PDF of current page

Customizing "Layouts" of Edit Forms, Dashboards, the System Entities Screen and other part of the user-interface

Most elements of the user interface (UI) can be customized by the system administrator.
The following section explains how to do this.

The Layout Customization System

Edit Form Layout Menu  

 

Opening the Customization Windows

  1. Right-click on a general area of an Edit-Form, dashboard or entity-screen, away from other controls which have their own menu-ists. The menu shown in the image above will appear, click on the "Customize and arrange fields" option.
    A customization window will open, as shown details of using this are described below. You can click and drag on items in the "Layout Tree View" to move them around. You can drag items from this list into the blank area on the right-hand-side to hide them from general view. You can also click and drag on items in the Edit-form, dashboard or entity-screen to physically move them around. As items are dragged they will disappear from view and be replaced by outlines showing their new location.
  2. Remember once you have finished redesigning any part of your App you must click on "Save This Look" to ensure that your changes are saved.

 

Edit Form Layout Editor  

The Customization Window

Once open, this will allow you to move and design all the controls on your user-interface.

  1. These are the visible controls, which will actually be seen by your users.
  2. These commands allow you to add extra controls such as titles, create groups and add separators and splitters.
  3. These are "Available" controls, which are hidden from view for the user. They may be fields in the database which are not needed in the current App.
  4. You can click and drag between the "Visible" and "Available" lists.

Changing Layout design by dragging items  

Changing a design visually, by dragging elements

As well as moving items in the "Customization Window", once you are in design mode, the designer can drag items around the form to positions they are happy with.

It design mode, click on items you wish to move with the mouse (control+click to select multiple items) and then drag the items to the location you want to move them.

You can also drag items into the "Available" list to remove them from the user's view.

 

Customizing Layouts: Changing a name  

Customizing Layouts: changing a name  

Renaming Items

The Captions shown to the user on a layout can be seen listed in the "Layout Tree View".

To change these:

  1. Find the item you want to change, select it in the Customization Window, and clik "F2" or right click and select "Rename" from the menu.
  2. Press enter, and the Layout will immediately show the new value.

Once you have finished editing, don't forget to click on the "Save Layout Settings" action, to permanently save the new layout of the screen.

The fact that your system's visual interface is so easy to customize makes extension and development much easier. Fields can be grouped and laid out in ways which users understand, after discussion with them to ensure the fields hold the data that is needed. Larger field can be oriented to expand in size as the edit-form expands, providing more space for text. Dividers call "splitters" can be added that the user can move onscreen to enlarge and contract screen-areas. 

All these features can be added to your system and saved live by the Administrator without any programatic work by a developer.

If a field is not needed it can easily be hidden from view. More complex edit-forms can have fields grouped together, or added as tabs within an edit-window to make understanding of the data easier for users.

Note that once part of the user interface has been customized, details of the customized design are saved in the system-tables of Orixa and shared by all users of your system. The designs are saved in "Name/Value pairs" separated by "=" with headings enclosed in square brackets. This is traditional windows "ini" formatting.
For BusinessObject Edit-forms, the customized "Ini" data is saved to the BusinessObject "Settings" field. 
For All Resources which are displayed for the user the Resources table's ObjectProperties field is used.
For other parts of the App the values will be stored in the SystemDB.ConfigurationSettings data-table. 
If system-wide changes are needed (for example after changing a field-name which may result in settings not loading correct) SQL code can be written to update the settings data.

Edit Form Layout Editor   

Customizing Items

  1.  Right-clicking on any item while the Customization window is open accesses the customization menu, with multiple options for editing the look and feel of the data-fields.
  2. There are many options here, they are all fairly intuative to understand. The best way to understand what they do is to try to use them.

    For example the "Vertical Alignment" Option changes how any control is sized.

The best way to figure out what most of these commands do is to try playing with them.

 

Edit Form Layout Editor    
  1. The menu in the Customization window which allows addition of extra visual elements such as separators, labels, splitters etc.

    These allow Admin Users to alter the way their user interface is laid out to make it easier for users to understand.

 

Dragging and renaming items on the Form

Visual indication of editing process

  1. Orixa works hard to be as intutative as possible. While editing items in the customization window, those items will be shown darkened, so you can see what you are changing.

    Edit the label in the customization window to change the label people see on screen.

Controls can be added to groups

Example of a layout with a "Tabbed View"  

 

Groups in the User Interface

  1. Group of controls can be laid out "Horizontal", "Vertical" or "Tabbed". Groups can have "Titles" so you can give a visual indication of the purpose of a set of controls with a title.
  2. In "Tabbed" view the name of each control in the group will appear as a heading to a tabbed view, as per the lower image.