Freedom UI: Communication option custom template (phone) not showing 3-dot menu for delete
Hello ,
I have a requirement where I need to separate the phone number with country code (using crt.PhoneInput).
For this, I changed the Display format in the Communication option types lookup to custome_phone.
Then, in my package’s Contacts_FormPage, I added this code:
{
"operation": "merge",
"name": "ContactCommunicationOptions",
"values": {
"items": "$ContactCommunicationOptionsItems",
"masterRecordColumnName": "Contact",
"masterRecordColumnValue": "$Id",
"templates": {
"custome_phone": {
"type": "crt.PhoneInput",
"phoneAsLink": true,
"displayAsPhone": true,
"displayPhoneMask": true
}
}
}
}
Now the phone number displays correctly, but the 3-dot menu (⋮) with Delete is not showing beside the phone option.
I noticed in the Customer360 base page the communication options already include this logic, but in my package override it’s missing.
👉 My question:
How can I configure the ContactCommunicationOptions component in Freedom UI so that the default action menu (⋮) is also available for my custom phone template (like it works for Email)?
Any suggestions or code examples would be very helpful.
Thank you!
Like
Hi,
Instead of re-inserting a new PhoneInput, you should merge into the existing ContactCommunicationOptions and only override what you need (e.g. the mask). That way the standard menu remains intact.
For example:
{ "operation": "merge", "name": "ContactCommunicationOptions", "path": ["templates", "phone"], "values": { "displayPhoneMask": true } }
This approach keeps the standard menu (with Delete, etc.) while still applying your customization.
Jakub Wieczorek,
For me your example didn't work at all (no mask appeared), so was supposed to insert PhoneInput and configure OOTB-alike actions in tools. Also had to add localizable strings for captions on Contacts_FormPage
Update: It appeared that ` breaks Frredom UI desinger, so I left only one icon for actual/nonactual action as dind't find the way to calculate it dynamically without `
{ "operation": "merge", "name": "ContactCommunicationOptions", "values": { "templates": { "phone": { "type": "crt.PhoneInput", "displayPhoneMask": true, "tools": [ { "type": 'crt.Button', "icon": 'actions-button-icon', "iconPosition": 'only-icon', "color": 'default', "size": 'none', "clickMode": 'menu', "displayType": 'text', "classes": ['actions-btn'], "menuItems": [ { "type": "crt.MenuItem", "caption": "$Resources.Strings.MakeAsPrimaryCaption", "clicked": { "request": "crt.MakeCommunicationOptionPrimaryRequest", "params": { "recordId": '$ContactCommunicationOptionsItems.ContactCommunicationOptionsDS_Id', "collectionAttributeName": 'ContactCommunicationOptionsItems' } }, "icon": "flag-button-icon", "visible": "$ContactCommunicationOptionsItems.ContactCommunicationOptionsDS_Primary | crt.NorCondition : $ContactCommunicationOptionsItems.ContactCommunicationOptionsDS_NonActual" }, { "type": "crt.MenuItem", "caption": "$ContactCommunicationOptionsItems.ContactCommunicationOptionsDS_NonActual | crt.BooleanToStringValue : $Resources.Strings.MakeAsActualCaption : $Resources.Strings.MakeAsNonActualCaption", "clicked": { "request": "crt.ChangeCommunicationInvalidStateRequest", "params": { "recordId": '$ContactCommunicationOptionsItems.ContactCommunicationOptionsDS_Id', "collectionAttributeName": 'ContactCommunicationOptionsItems' } }, "icon": "valid-circle", // "icon": `$ContactCommunicationOptionsItems.ContactCommunicationOptionsDS_NonActual | crt.BooleanToStringValue : 'valid-circle' : 'invalid-circle'`, }, { "type": "crt.MenuItem", "caption": '$Resources.Strings.DeleteCaption', "clicked": { "request": "crt.RemoveCommunicationOptionRequest", "params": { "recordId": '$ContactCommunicationOptionsItems.ContactCommunicationOptionsDS_Id', "collectionAttributeName": 'ContactCommunicationOptionsItems' } }, "icon": "delete-button-icon", } ] } ] } }, } }