Hi Team,
I need to replicate managers' mood functionality.of the opportunity page in my custom section. kindly let me know in the step by step process.
hoping for a positive reply.
regards .
manikanta
Like
Hi Manikanta,
Here i was using this emojis in contact section you can just rename all and paste this code .
Here code,
define("ContactPageV2", ["css!OpportunityCommonCSS"],
function() {
return {
entitySchemaName: "Contact",
attributes: {
"UsrMood": {
lookupListConfig: {
orders: [{columnPath: "Position"}]
}
},
mixins: {
},
},
modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
methods: {
getLookupQuery: function(filter, columnName) {
var esq = this.callParent(arguments);
if (columnName === "UsrMood") {
esq.addMacrosColumn(Terrasoft.QueryMacrosType.PRIMARY_IMAGE_COLUMN, "primaryImageValue");
}
return esq;
},
isLabelMetricsContainerVisible: function() {
return this.get("DaysAtStageVisible");
}, /** * @private * @deprecated */
isMetricsContainerVisible: function() {
return this.getIsFeatureEnabled("OpportunityMetrics");
}, },
dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
diff: /**SCHEMA_DIFF*/[
{
"operation": "insert",
"parentName": "ProfileContainer",
"propertyName": "items",
"name": "MetricsContainer",
"values": {
"layout": {"column": 1, "row": 0,"rowSpan": 1, "colSpan": 24},
"itemType": Terrasoft.ViewItemType.CONTAINER,
"classes": {"wrapClassName": ["ts-metrics-container"]},
"items": [],
"visible": {"bindTo": "isMetricsContainerVisible"}
}
},
{
"operation": "merge",
"name": "PhotoTimeZoneContainer",
"values": {
"layout": {
"colSpan": 24,
"rowSpan": 1,
"column": 0,
"row": 1
}
}
},
{
"operation": "insert",
"parentName": "MetricsContainer",
"propertyName": "items",
"name": "MoodContainer",
"values": {
"items": [],
"itemType": this.Terrasoft.ViewItemType.CONTAINER,
"classes": {"wrapClassName": ["ts-metric-item", "ts-mood-container"]}
}
},
{
"operation": "insert",
"parentName": "MoodContainer",
"propertyName": "items",
"name": "OpportunityMood",
"values": {
"generator": "ImageListGenerator.generateImageList",
"bindTo": "UsrMood",
"id": "MoodImageList",
"schemaName": "OpportunityMood",
"schemaColumn": "Image",
"caption": "LOL",
"controlConfig": {
"wrapClasses": ["opportunity-mood-image-list image-list"],
"modalBoxClasses": ["opportunity-mood-image-list"]
},
"markerValue": "OpportunityMood",
"tips": []
},
"alias": {
"name": "UsrMood",
"excludeProperties": ["layout"],
"excludeOperations": ["remove", "move"]
}
},
{
"operation": "insert",
"parentName": "OpportunityMood",
"propertyName": "tips",
"name": "UsrMood",
"values": {
"content": "LOL"
}
},
{
"operation": "insert",
"parentName": "MoodContainer",
"propertyName": "items",
"name": "MoodCaption",
"values": {
"itemType": Terrasoft.ViewItemType.LABEL,
"caption": "LOL",
"classes": {"labelClass": ["ts-metric-item-caption"]}
}
}]/**SCHEMA_DIFF*/
};
});
Regards,
Praveenkumar
manikanta,
Hi Manikanta,
In order to complete this task, i suggest you to create your own lookup. If you use the out of the box lookup, this means that any change in this lookup from your side will affect opportunity page. Also, if you think about any changes in this lookup in future releases of bpm - it will then affect emojis on your custom page.
This lookup should contain column with type image link.
In order to add an image to a lookup in UI, you need to create a custom edit page for lookup, described in this article (https://community.bpmonline.com/articles/adding-lookup-edit-page).
After page and section are added, code below will help you to add an image control:
define("GlbMoodLookupEditPageV2", ["ImageCustomGeneratorV2", "css!GlbMoodLookupEditPageV2CSS",
"ConfigurationFileApi" ],
function() {
return {
entitySchemaName: "GlbMood",
details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
attributes: {},
methods: {
onImageChange: function(photo) {
if (!photo) {
this.set(this.primaryImageColumnName, null);
return;
}
this.Terrasoft.ImageApi.upload({
file: photo,
onComplete: this.onPhotoUploaded,
onError: this.Terrasoft.emptyFn,
scope: this
});
},
/**
* Handles photo upload event.
* Sets image to view model.
* @param {Guid} imageId Image identifier.
*/
onPhotoUploaded: function(imageId) {
var imageData = {
value: imageId,
displayValue: "Image"
};
this.set(this.primaryImageColumnName, imageData);
}
},
rules: {},
diff: /**SCHEMA_DIFF*/[
{
"operation": "merge",
"name": "Name",
"parentName": "GeneralInfoControlGroup",
"propertyName": "items",
"values": {
"layout": {
"colSpan": 12,
"column": 0,
"row": 0
}
}
},
{
"operation": "insert",
"name": "MoodImage",
"parentName": "GeneralInfoControlGroup",
"propertyName": "items",
"values": {
"id": "moodImage",
"itemType": Terrasoft.ViewItemType.BUTTON,
"selectors": {
"wrapEl": "#moodImage"
},
"className": "Terrasoft.ImageEdit",
"getSrcMethod": "getImageConfig",
"onPhotoChange": "onImageChange",
"tag": "MoodImage",
"layout": {
"colSpan": 12,
"column": 3,
"row": 3
},
"generator": "ImageCustomGeneratorV2.generateCustomImageControl",
"classes": {
"wrapClass": ["mood-image", "cursor-pointer"]
}
}
}]/**SCHEMA_DIFF*/
};
});
And CSS:
.mood-image {
max-width: 100px;
max-height: 100px;
margin-left: 40%
}
.cursor-pointer {
cursor: pointer;
}
Hope it helps!
Regards,
Dmytro