Skip to main content

Layouts

A layout is a property of a View. It determines the way multiple ViewTemplates (or referenced Views) are presented together in a View, e.g., whether they are horizontally or vertically ordered, selectable via a button, etc. The ADITO standard installation includes a set of predefined layouts, which fit for most use cases.

In order to assure a consistent and ergonomic design, layouts cannot be created or customized by the user. In special cases, if none of the predefined layouts fits, a customized layout can be ordered from ADITO.

To set a layout, open a View in the "Projects" windows or Navigator window, click on it and edit property "layout" in the "Properties" window. Here, you can select a layout from a list of layouts, in a combo box. Depending on what layout you select, different layout-specific properties are shown below the "layout" property.

In the following chapters, the function and configuration of selected layouts is explained.

NoneLayout​

The NoneLayout is the simplest layout. It shows all ViewTemplates assigned to the View in a vertical arrangement. The order of the ViewTemplates is the same as shown in the Navigator window.

This layout is often used, whenever only one single ViewTemplate or one single View is to be displayed.

Example: KeywordAttributeEdit_view (Context "KeywordAttribute"). Visible in the client, whenever you create or edit a keyword attribute (Administration > Keyword Attribute).

DrawerLayout​

The DrawerLayout is almost as simple as the NoneLayout, with the following differences:

  • A horizontal bar is shown on top. Optionally, this bar can include a caption (property "layoutCaption").
  • Via a button at the right end of the bar (icon "^") the user can hide all Views and ViewTemplates assigned to the View having the DrawerLayout.
  • Property "fixedDrawer": If checked, the above "hide" function is disabled. Then, the horizontal header bar and its optional caption is the only difference to the NoneLayout.

Example: AppointmentFilter_view (Context "Person", assigned to PersonTaskAppointment_view, which in turn is assigned to PersonMain_view). Visible in the client under Contact Management > Contact: Select any person and press the "open" button, to open the MainView. Here, click on tab "Tasks": In the lower part of this tab, you can see a table, above which there is a horizontal bar, including the caption "Linked Appointments". Via a button at the right end of the bar (icon "^") you can hide the table.

BoxLayout​

The BoxLayout is also a quite basic layout, but it has some more properties than the NoneLayout:

  • direction: Select, whether the ViewTemplates are to be shown in vertical or in horizontal order.
  • maxDirectionElements: Specify the maximum of ViewTemplates to be shown in the order specified in property "direction". If, e.g., direction is VERTICAL, and maxDirectionElements is 3, then the first 3 ViewTemplates are shown one under the other, while the 4th ViewTemplate is shown on top again, to the right of the first ViewTemplate.
  • autoHeight: Check, if the layout should determine its height automatically. The automatic layout height is calculated from the height of its components.

Example: OrganisationEdit_view (Context "Organisation"). Visible in the client under Contact Management > Company, whenever you create or edit a company dataset. You see that, as configured, the Views showing address data, communication data, and attribute data, are shown in vertical order.

tip

For every layout, you can change the order of the ViewTemplates simply by dragging and dropping them in the Navigator window up or down.

GroupLayout​

The GroupLayout enables you to change the visualization between multiple assigned Views or ViewTemplates via a button shown in the upper right corner. If you click on this button, a list of all Views is shown, which are assigned to the View having the GroupLayout. As soon as you have selected a View, this View is shown, and all other Views are hidden.

Example: ActivityFilter_view (Context "Organisation", assigned to OrganisationMain_view). Visible in the client under Contact Management > Company: Select any company and press the "open" button, to open the MainView. Here, click on tab "Activities" to show all activities of the person. Via the button on the right, you can change the visualization of the activities: You can switch between 3 ViewTemplates: Timeline View, Table View, and Treetable View.

tip

To customize the naming of a list item shown via the View selection button, you can set an arbitrary text in the "title" property of the respective ViewTemplate. Unless you set the "title" property, a (non-configurable) default name is shown.

HeaderFooterLayout​

The HeaderFooterLayout divides the View into 3 parts:

  • header area: Upper part, which can consist of a View or a ViewTemplate.
  • footer area: Lower part, which can consist of a View or a ViewTemplate.
  • middle area: All other Views or ViewTemplates assigned to the View having the HeaderFooterLayout.

In many cases, the HeaderFooterLayout is used for the PreviewView.

To configure this layout, proceed as follows:

  1. Create and select the View that should get the HeaderFooterLayout.
  2. Select "HeaderFooterLayout" from the combo box of property "layout".
  3. Open the View in the Navigator window.
  4. Create all ViewTemplates to be displayed in the View (context menu: "New ViewTemplate...").
  5. Assign all other Views to be displayed in the View (context menu: "Add reference to existing View...").
  6. Select the View having the HeaderFooterLayout and edit its properties:
    • Property "header": Select the View or ViewTemplate that is to be shown in the header area.
    • Property "footer": Select the View or ViewTemplate that is to be shown in the footer area.
  7. Open the View having the HeaderFooterLayout in the Navigator window.
  8. Configure the order in which the Views and ViewTemplates are to be displayed: Move all Views and ViewTemplates up or down, until they are in the required order, simply by dragging and dropping them. This is only necessary for the Views and ViewTemplates to be shown in the middle area. (The ViewTemplates assigned as "Header" or "Footer" have fixed positions.)

Example:
OrganisationPreview_view (Context "Organisation"). Visible in the client under Contact Management > Company: Click on any company and watch its data displayed in the preview on the right.

GridLayout​

The GridLayout enables you to place ViewTemplates (or View references, respectively) in a grid. The placement of the ViewTemplates is determined by their order as given in the Designer's Navigator window. They get filled into the grid line by line, from top to bottom.

The grid is defined by the number of its columns (property columnCount) and its rows (property rowCount). Optionally, property rowHeight can be set. In most cases, only columnCount needs to be set, while rowCount and rowHeight are left in default state. Then, the number of rows is calculated automatically, and rowHeight is automatically optimized.

important

In some ADITO versions, property rowHeight will not appear until you have changed the value of property columnCount at least once. Furthermore, the automatic calculation of the properties rowCount and rowHeight might fail. In these cases, set columnCount and rowCount (and, if required, rowHeight) explicitely.

Properties​

  • columnCount Determines how many columns the grid should have.
    note

    This value is only used for desktop devices. Mobile devices will always only use 1 column.

  • rowCount Determines the number of rows which should be displayed in the grid. If left in default state (recommended), this property gets adapted automatically when you add/remove ViewTemplates to/from the View.
    note

    If you explicitly set this property, you should also consider to set property rowHeight (see below).

  • rowHeight The height of one row in pixels.
    note

    This property should only be used in combination with an explicitly set rowCount.

MasterDetailLayout​

The MasterDetailLayout enables you to specify one View as "master", on which one or more other Views ("details") depend.

In most cases, an Entity's MainView has a "MasterDetailLayout",

  • with the PreviewView of the same Entity being the "master" (left side) and
  • various Views of the same or of other Entities - often in table form - being the "details" (right side).

For example, if you open the xRM Context "Company" (in the client, in menu group "Contact Management"), you select a company dataset and then press the "Open" button. This will open the Context's MainView, which has a MasterDetailLayout: On the left, you see the "master", which is the PreviewView of the company. On the right, you see the "details", which are several Views, sorted in tabs, e.g., Activities, contacts, or attributes. These "detail" Views belong to other Contexts (e.g., Activity, Person, or AttributeRelation) and their data depends on the dataset shown in the "master" - e.g., not all contacts are shown, but only the contacts related to the company shown in the "master".

Thus, in most cases, a View having a "MasterDetailLayout" has no own ViewTemplates, but is used as a kind of frame connecting the PreviewView (including one dataset) with one or more dependent Views (each showing one or multiple datasets).

Configuration​

At first (after creating Context, Entity, and at least the PreviewView as well as all required Consumers), in the "Projects" window, we create a View (usually this will be the MainView) and set its property layout to MasterDetailLayout. Consequently, a property named master will appear below. This will be in the next step.

Now we define both the "master" View and all "detail" Views:

Double-click on the View having the MasterDetailLayout in the "Projects" window. Then, in the Navigator window, right-click on the name of this View and choose "Add reference to existing View...". A dialog with the following lines will appear:

  • EntityField: In this combo box there are one or more options to select:
    • #ENTITY: Choose this option, if you want to add a View of the same Entity (i.e., of the Entity related to the View having the "MasterDetailLayout")
    • (if existing:) All Consumers of the Entity related to the View having the "MasterDetailLayout". Choose a Consumer if you want to add a View of another Entity, i.e., of the Entity having the Provider that is related to the Consumer. In many cases you must first create this Consumer (and possibly also the related Provider), which is explained below.
  • View: All Views related to the selection in the above line "entityField".
  • Assign To...
    • ..."master", when you reference the PreviewView of the same Context (first step)
    • ...leave empty for all other referenced Views (second step)

You can also later edit the property master of the View having the MasterDetailLayout and set it to the View that should act as "master". In a MainView, the master is usually the PreviewView.

All other referenced Views will automatically be treated as "detail" Views.

In the Navigator window, the "detail" View appears on the same level as the "master" View, however, without prefix "[master]" in the name.

In the client, the "master" View usually appears on the left, while the "detail" related Views appear on the right, sorted in tabs.

Establishing a Dependency​

The dependency between the "master" View and a "detail" View is established using the Provider-Consumer mechanism: The Provider provides (delivers) "detail" data selected according to a Parameter specified by the Consumer, which here is the "master" View. (The Provider "exposes" a Parameter, whose value process is set on Consumer side and works as selection criteria of what data is to be provided).

Technically, this works as follows:

  • The Provider side is the Entity (!) of the "detail" View. Here,

    • an (optional) Parameter can be created, whose name usually refers to the selection criteria specified by the "master". If, e.g., the Provider provides data of contact persons working in a specific organisation, the Parameter could be named "OrgId_param". Furthermore, this Parameter must be exposed (property expose = true), i.e. "offered" to the Consumer.

    • a new Provider must be created, whose name usually refers to the provided data. If, e.g., the Provider provides data of contact persons, it could be named "Contacts".

    • if a Parameter is used, the conditionProcess of the RecordContainer of the providing Entity must process the Parameter by including it as data selection criteria. Here is an example how this piece of code usually looks like:

      MyContacts_entity.RecordContainers.db.conditionProcess
      var cond = newWhereIfSet("CONTACT.ORGANISATION_ID", "$param.OrgId_param");
      result.string(cond);

      In short, this code means: If Parameter OrgId_param exists (= is "filled"), then return only CONTACT datasets showing the ORGANISATION_ID handed over in the Parameter. If the Parameter OrgId_param does not exist (= is not "filled"), then no condition is built, so all CONTACT datasets are returned.

  • The Consumer side is the Entity of the "master" View. Here,

    • a Consumer must be created, whose name is often identical with the name of the Provider. If, e.g., the Provider provides data of contact persons, the Consumer could also be named "Contacts". The new Consumer gets a reference to the Provider, by setting its properties entityName and fieldName (i.e., Provider name) accordingly, e.g., "Person_entity" and "Contacts". Consequently, all Parameters exposed by the specified Provider will be visible "under" the Consumer, in grey font color.

      note

      The grey font color means that the Parameter is not yet initialized; to set its parameters (especially, its valueProcess), right-click on the grey fonted parameter and choose "Initialize" from the context menu. (If you want to undo the initialization, right-click on the Parameter again and then choose option "Restore Default Value". This will reset its font color from white to grey again, indicating that it is not initialized.)

    • set the respective Parameter's property valueProcess accordingly. E.g., the valueProcess' code for Parameter "OrgId_param" could look like this:

      XXX_entity.Consumers.XXX.XXXId_param.valueProcess
      result.string(vars.get("$field.ORGANISATIONID"));

      This will change the font color of the Parameter name from grey to white.

  • The dependency configured on the Consumer side is now also visible in the property dependencies of the Provider.

Now that the dependency has been established, all Views of the Consumer side are also available for selection in the dialog "Add reference to existing View..." of the View having the MasterDetailLayout.

DashletConfigs not applicable​

note

Note that DashletConfigs cannot be added to Views having a MasterDetailLayout.