Issue displaying current user's name and profile photo on Home Page (Freedom UI)
Hi everyone,
I'm working on a Home Page in Creatio Studio using Freedom UI, where I want to display the currently logged-in user's name and profile picture. However, instead of the actual user's info, the system is consistently loading details (name and photo) of Marcus Morgan, which seems like a default or cached contact.
The other strange part is that none of the console logs are getting displayed which should mean that the Init is not firing either.
Is there a simpler way to achieve this task?
define("i8Page_d1nf084", ["@creatio-devkit/common"], function(DevKit) {
return {
viewConfigDiff: [
{
"operation": "insert",
"name": "ImageInput_ui1245i",
"values": {
"layoutConfig": {
"column": 9,
"row": 1,
"colSpan": 2,
"rowSpan": 2
},
"type": "crt.ImageInput",
"labelPosition": "auto",
"value": "$ContactDS_Photo_dc68cha",
"size": "large",
"borderRadius": "medium",
"positioning": "cover",
"visible": true,
"readonly": false,
"tooltip": ""
},
"parentName": "Main",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "Input_snebs28",
"values": {
"layoutConfig": {
"column": 9,
"row": 3,
"colSpan": 2,
"rowSpan": 1
},
"type": "crt.Input",
"multiline": false,
"label": "$Resources.Strings.ContactDS_Name_fyp4sby",
"labelPosition": "auto",
"control": "$ContactDS_Name_fyp4sby"
},
"parentName": "Main",
"propertyName": "items",
"index": 1
}
],
viewModelConfigDiff: [
{
"operation": "merge",
"path": ["attributes"],
"values": {
"ContactDS_Photo_dc68cha": {
"modelConfig": {
"path": "ContactDS.Photo"
}
},
"ContactDS_Name_fyp4sby": {
"modelConfig": {
"path": "ContactDS.Name"
}
}
}
}
],
modelConfigDiff: [
{
"operation": "merge",
"path": [],
"values": {
"dataSources": {
"ContactDS": {
"type": "crt.EntityDataSource",
"scope": "page",
"config": {
"entitySchemaName": "Contact"
}
}
},
"primaryDataSourceName": "ContactDS"
}
}
],
handlers: [
{
"lifecycles": ["init"],
"handler": async function(context) {
const { requestUserInfo, Filters, ComparisonType } = DevKit;
console.log("Initializing homepage");
const userInfo = await requestUserInfo();
console.log("User Info:", userInfo);
const contactId = userInfo.contactId;
console.log("Contact ID:", contactId);
const filter = new Filters.FilterGroup();
filter.addItem(
new Filters.ColumnFilter(ComparisonType.Equal, "Id", contactId)
);
console.log("Applying filter:", filter);
const result = await context.readData("ContactDS", {
filter: filter,
isClearGridData: true
});
console.log("Read result:", result);
if (result && result.success && result.records && result.records.length > 0) {
console.log("Setting property value with:", result.records[0]);
await context.setPropertyValue("ContactDS", result.records[0]);
} else {
console.warn("No matching contact found or read failed.");
}
}
}
],
converters: {},
validators: {}
};
});
Like
Hello, Ajay!
You can implement this using the following approach:
1) Add current user information (name and photo) using Label and Gallery components in the Edit Page.
2) In the Gallery settings:
Set Object to Contact.
Set Image to Photo.
Set up a filter: Id = "any Id" (This will be updated in the code to the current user's Id).
Then click Save and go to Source code.
3) To display the current user's name correctly:
In the "viewConfigDiff" section, find "Label_a31jogv" and update the "caption" as shown below:
{
"operation": "insert",
"name": "Label_a31jogv",
"values": {
"layoutConfig": {
"column": 5,
"row": 3,
"colSpan": 3,
"rowSpan": 1
},
"type": "crt.Label",
"caption": "$Label_a31jogv | usr.CurrentUserContact",
"labelType": "headline-1-small",
"labelThickness": "normal",
"labelEllipsis": false,
"labelColor": "auto",
"labelBackgroundColor": "transparent",
"labelTextAlign": "center",
"visible": true
},
"parentName": "Main",
"propertyName": "items",
"index": 1
}
Also, add the following converter to the "converters" section:
converters: {
"usr.CurrentUserContact": async function(value) {
const sysValuesService = new sdk.SysValuesService();
const sysValues = await sysValuesService.loadSysValues();
return sysValues.userContact.displayValue;
}
}
4) To display the current user's photo correctly:
In the "viewModelConfigDiff" section, find "Gallery_if8gcqo_PredefinedFilter" and copy and clear its content so it becomes:
"Gallery_if8gcqo_PredefinedFilter": {}
Then in the "handlers" section, insert the following handler and replace the contents of "request.$context.Gallery_if8gcqo_PredefinedFilter" with what you cut earlier:
handlers: [
{
request: "crt.HandleViewModelInitRequest",
handler: async (request, next) => {
const sysValuesService = new sdk.SysValuesService();
const sysValues = await sysValuesService.loadSysValues();
request.$context.Gallery_if8gcqo_PredefinedFilter = {
"items": {
"0aab9043-28ba-4fce-b3b0-27b70caddf07": {
"filterType": 1,
"comparisonType": 3,
"isEnabled": true,
"trimDateTimeParameterToDate": false,
"leftExpression": {
"expressionType": 0,
"columnPath": "Id"
},
"isAggregative": false,
"dataValueType": 0,
"rightExpression": {
"expressionType": 2,
"parameter": {
"dataValueType": 0,
"value": sysValues.userContact.value
}
}
}
},
"logicalOperation": 0,
"isEnabled": true,
"filterType": 6,
"rootSchemaName": "Contact"
};
return next?.handle(request);
}
}
]
Make sure to replace the "value" with "sysValues.userContact.value", as shown above.
As a result, you will see the current user's name and profile photo displayed properly on the Home Page.
Hello, Ajay!
You can implement this using the following approach:
1) Add current user information (name and photo) using Label and Gallery components in the Edit Page.
2) In the Gallery settings:
Set Object to Contact.
Set Image to Photo.
Set up a filter: Id = "any Id" (This will be updated in the code to the current user's Id).
Then click Save and go to Source code.
3) To display the current user's name correctly:
In the "viewConfigDiff" section, find "Label_a31jogv" and update the "caption" as shown below:
{
"operation": "insert",
"name": "Label_a31jogv",
"values": {
"layoutConfig": {
"column": 5,
"row": 3,
"colSpan": 3,
"rowSpan": 1
},
"type": "crt.Label",
"caption": "$Label_a31jogv | usr.CurrentUserContact",
"labelType": "headline-1-small",
"labelThickness": "normal",
"labelEllipsis": false,
"labelColor": "auto",
"labelBackgroundColor": "transparent",
"labelTextAlign": "center",
"visible": true
},
"parentName": "Main",
"propertyName": "items",
"index": 1
}
Also, add the following converter to the "converters" section:
converters: {
"usr.CurrentUserContact": async function(value) {
const sysValuesService = new sdk.SysValuesService();
const sysValues = await sysValuesService.loadSysValues();
return sysValues.userContact.displayValue;
}
}
4) To display the current user's photo correctly:
In the "viewModelConfigDiff" section, find "Gallery_if8gcqo_PredefinedFilter" and copy and clear its content so it becomes:
"Gallery_if8gcqo_PredefinedFilter": {}
Then in the "handlers" section, insert the following handler and replace the contents of "request.$context.Gallery_if8gcqo_PredefinedFilter" with what you cut earlier:
handlers: [
{
request: "crt.HandleViewModelInitRequest",
handler: async (request, next) => {
const sysValuesService = new sdk.SysValuesService();
const sysValues = await sysValuesService.loadSysValues();
request.$context.Gallery_if8gcqo_PredefinedFilter = {
"items": {
"0aab9043-28ba-4fce-b3b0-27b70caddf07": {
"filterType": 1,
"comparisonType": 3,
"isEnabled": true,
"trimDateTimeParameterToDate": false,
"leftExpression": {
"expressionType": 0,
"columnPath": "Id"
},
"isAggregative": false,
"dataValueType": 0,
"rightExpression": {
"expressionType": 2,
"parameter": {
"dataValueType": 0,
"value": sysValues.userContact.value
}
}
}
},
"logicalOperation": 0,
"isEnabled": true,
"filterType": 6,
"rootSchemaName": "Contact"
};
return next?.handle(request);
}
}
]
Make sure to replace the "value" with "sysValues.userContact.value", as shown above.
As a result, you will see the current user's name and profile photo displayed properly on the Home Page.
Daiana Gavrylenko,
Thanks Daiana. I guess I should be able to use the same approach to render this to a Label and an Image (instead of the Gallery) right?