Avatars

In ADITO, so-called Avatars are small visual components that are auto-generated by the ADITO platform's logic for all EntityFields of contentType IMAGE.

Example: In PersonFilter_view, column PICTURE shows icon-typed images of the persons. However, if EntityField PICTURE of a Person dataset does not hold an image, the first letters of first name and last name are displayed on a square, colored background. (The configuration of this behavior is done in PICTURE's displayValueProcess, see below.)

note

For a better understanding of the following, you need to know that the ADITO platform automatically converts binary images (after being loaded from the database) into base64 strings, before perfoming subsequent logic. Thus, the value of an EntityField of contentType IMAGE is always a string, not a binary object.

The ADITO platform's Avatar auto-generation logic for EntityFields of contentType IMAGE works as follows:

If the EntityField is to be displayed in a ViewTemplate of type "Picture", the value is interpreted as base64 image, which is then shown without additions (no background etc.). The following steps are skipped.
The logic checks if the value includes character ":" (colon). If not, the value is interpreted as base64 image, which is then shown it without additions (no background etc.). The following steps are skipped.
The subsequent steps of the logic depend on the prefix (= the string part preceeding the ":" character):
- prefix "TEXT": 0-2 characters are shown on a colored, square background, according to the following logic:
  - First, the part of the string that follows the ":" character is split into substrings, using " " (space) as delimiter.
  - Empty substrings are sorted out. The remaining substrings are the actual basis for generating Avatar character(s):
  - If there is only one substring, its first 2 characters are used. If the substring contains only 1 character, the Avatar will show only this single character.
  - If there are multiple substrings, the first characters of the first 2 substrings are used. There is one exception: If the first character of a substring is a non-letter character, then this substring is skipped, and instead the first letter of the next substring is used. This logic is helpful when, e.g., a company name like "Energystar - Oil Company" is given; in this example, the letters "EO" would be extracted, not "E-".
  - Example from the xRM project's Context "Person": If there is no image of the person available, the displayValue of EntityField PICTURE starts with "TEXT:", followed by the values of first name, last name, and company name (separated by a "space"). Thus, the auto-generated Avatar characters are usually the first letter of the first name and the first letter of the last name. If, however, a first name is not available (= this substring is empty), then the Avatar's characters will be the first letter of the last name and the first letter of the company name.
  - The color of the Avatar's square background depends on the color-related properties of the respective EntityField (color or colorProcess). If none of these properties is set, the background color is generated on the basis of a hash value of the original string.
    Note: The auto-generation logic is, of course, limited to the colors defined in the "Theme" (see chapters Themes and Color). Thus, the logic cannot ensure that a unique color is assigned to each single dataset.
- prefix "NEON" or prefix "VAADIN": The complete string is interpreted as name of one of the official icons provided by the ADITO platform. You can browse the names of the available icons, e.g., via scanning the combobox of an "icon" property (see chapter Icons for further information).
- prefix "URL": The part of the string that follows the ":" character is interpreted as an URL, pointing to an external image.

Example task: Given be an EntityField MYIMAGEFIELD, which has the contentType IMAGE. Now, if no image can be loaded from the database, the value of MYIMAGEFIELD should be a combination of the first characters of text-typed EntityFields ENTITIYFIELD1 and ENTITIYFIELD2. If ENTITIYFIELD2 is empty or starts with a non-letter character, the first character of ENTITIYFIELD3 should be used instead.

To achieve this, you need to program a logic for setting a textual value for covering the case that a real image is not available. Usually, this is done in MYIMAGEFIELD's valueProcess or displayValueProcess, including a case like this:

XXX_entity.MYIMAGEFIELD.displayValueProcess
if (vars.get("$field.MYIMAGEFIELD"))
    result.string(vars.get("$field.MYIMAGEFIELD"));
else
    result.string("TEXT:"
    + vars.getString("$field.ENTITIYFIELD1") + " "
    + vars.getString("$field.ENTITIYFIELD2") + " "
    + vars.getString("$field.ENTITIYFIELD2"));    

The ADITO platform's logic will then auto-generate an Avatar on the basis of the string as concatenated in the "else" part of the above code fragment.

Further examples:

For testing purposes, you may

create an EntityField (e.g., name="PICTURE", title="Avatar Test", contentType=IMAGE) for a suitable Entity of the xRM Project - e.g., Interest_entity (module communicationsettings),
assign it to a suitable View (e.g., to InterestFilter_view), and
enter the following valueProcess:

Interest_entity.PICTURE.valueProcess
// Avatar with characters "XA" on colored background 
result.string("TEXT:xyz ABC mno");

// Icon showing "plus" symbol
result.string("NEON:PLUS");

// Icon showing "factory" symbol
result.string("VAADIN:FACTORY");

// URL pointing to image of shopping cart
result.string("URL:https://www.adito.de/fileadmin/uploads/icons/menueicons/adito_icon_handel.svg");

// ADITO logo as base64 
result.string("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");

note

If the Avatar logic fails for whatever reason (e.g., the prefix or the base64 is not valid) a circled "exclamation mark" icon is shown instead of the Avatar (or, in some cases, no Avatar at all).