FieldGroup

A Field Group is an ADITO model used for combining EntityFields, along with an additional configuration for editing.

In the ADITO xRM project, you can find an example in Person_entity: A FieldGroup makes the full name of a person being displayed in the CardViewTemplate of the PreviewView - in one single line, below the image.

When the edit button ("pencil") in the upper right corner is clicked, all related EntityFields are editable separately:

note

Do not mistake the edit buttons: There is a further edit button on the lower left side of the CardViewTemplate. This button opens the EditView, while, in our case, we need the other edit button, which is to in the upper right corner of the CardViewTemplate (see screenshot above). This second edit button only refers to the EntityFields shown in the CardViewTemplate.

Configuration:

Open Person_entity in the Navigator window. Right-click on folder "Fields" and choose "New Field Group" from the context menu. In the following dialog, give it the name "FULL_NAME_fieldGroup".

In ViewTemplate "Header" of PersonPreview_view, select the new Field Group in property titleField.

The central property of a FieldGroup is its valueProcess, in which you can combine any available EntityFields. The code for the above example is simply relating to the EntityField contenttitle:

Person_entity.FULL_NAME_fieldGroup.valueProcess.js

import { result, vars } from "@aditosoftware/jdito-types";

result.string(vars.get("$field.contenttitle"));

The actual concatenation of the full name is done in the valueProcessof the EntityField contenttitle:

Person_entity.contenttitle.valueProcess.js

import { result, vars  } from "@aditosoftware/jdito-types";
import { Contact, ContactTitleRenderer } from "Contact_lib";

if(vars.get("$this.value") == null)
{
    var contact = new Contact();
    contact.salutation = vars.get("$field.SALUTATION");
    contact.title = vars.get("$field.TITLE");
    contact.firstname = vars.get("$field.FIRSTNAME");
    contact.middlename = vars.get("$field.MIDDLENAME");
    contact.lastname = vars.get("$field.LASTNAME");
    contact.organisationName = vars.get("$field.ORGANISATION_NAME");

    var renderer = new ContactTitleRenderer(contact, null);
    result.string(renderer.asString());
}

(You can do this concatenation, of course, also directly in the valueProcess of the FieldGroup.)

Making the related EntityFields (FIRSTNAME, LASTNAME, etc.) editable separately, in the PreviewView, is simple: In the Navigator window, drag and drop these EntityFields on the FieldGroup, then they appear subordinated to the FieldGroup. Order them as required, via drag and drop:

The EntityFields will then be editable in this order, as soon as the client user clicks the edit button ("pencil") to the right.

If you click on the subordinated EntityFields in the Field Group, you see that no properties are shown. This is o.k., because the only purpose of these EntityField references is to determine, that, and in which order, the EntityFields can be edited in the client.

In the xRM project you can find various further examples of an implementation of a Field Group, e.g., in Contract_entity, where the EntityFields CONTRACTTYPE (its displayValue) and CONTRACTCODE are concatenated to the FieldGroup CONTRACTCODE_DISPLAY_fieldGroup.

Contract_entity.CONTRACTCODE_DISPLAY_fieldGroup.valueProcess.js

import { result, translate, vars  } from "@aditosoftware/jdito-types";

var contractType = vars.getString("$field.CONTRACTTYPE.displayValue");
var contractCode = vars.get("$field.CONTRACTCODE");

result.string((contractType || translate.text("Contract_Contract")) + " " + contractCode);