From c35ae89eddfe1c408d73d228f7059d59427b141b Mon Sep 17 00:00:00 2001 From: Nguyen Doan Thanh <145089181+dtng95@users.noreply.github.com> Date: Tue, 30 Sep 2025 15:44:32 +0700 Subject: [PATCH 1/4] Update external-profile-data.md - Update document for external profile data for engage V16 --- .../profiling/external-profile-data.md | 90 ++++++++++++++----- 1 file changed, 70 insertions(+), 20 deletions(-) diff --git a/16/umbraco-engage/developers/profiling/external-profile-data.md b/16/umbraco-engage/developers/profiling/external-profile-data.md index 718e709759d..ff404be45b7 100644 --- a/16/umbraco-engage/developers/profiling/external-profile-data.md +++ b/16/umbraco-engage/developers/profiling/external-profile-data.md @@ -22,29 +22,79 @@ When this component is registered a new tab will be rendered in the Profiles sec ### Register custom components -To render this External Profile Tab with a custom component, you have to create your component and register it with Umbraco Engage. The following code will show how to do both. Add the below code in a JavaScript file in the `App_Plugins` folder and load it using a `package.manifest` file. If you have your own custom module, you can use this: +To render this External Profile Tab with a custom component, you have to create your component and register it with Umbraco Engage. The following code will show how to do both. Add the below code in a Typescript file: -```javascript -// angular.module("myCustomModule", ["Engage"]); -// angular.module("umbraco").requires.push("myCustomModule"); -// angular.module("myCustomModule").run([ ... ]) +```typescript // Create a component. We create a component named "myCustomExternalProfileDataComponent" here: -angular.module("umbraco").component("myCustomExternalProfileDataComponent", { - bindings: { visitorId: "<" }, - template: "

My custom external profile data component! visitorId = {{$ctrl.visitorId}}

", - controller: [function () { - this.$onInit = function () { - // Your logic here - } - }] -}); -// Register your custom external profile data component. -// Please note you have to use kebab-case for your component name here -// just like how you would use it in an AngularJS template (i.e. myCustomComponent -> my-custom-component) -angular.module("umbraco").run(["umsCustomComponents", function (customComponents) { - customComponents.profiles.externalProfileData = "my-custom-external-profile-data-component"; -}]); +const element = "myCustomExternalProfileDataComponent"; +@customElement(element) +export class CustomExternalDataElement + extends UmbLitElement + implements UmbWorkspaceViewElement +{ + @state() + private _components?: Array; + + constructor() { + super(); + + this.observe( + umbExtensionsRegistry.byType(ENGAGE_EXTERNAL_DATA_EXTENSION_TYPE), + async (data) => { + if (!data) return; + this._components = await Promise.all( + data + .sort((a, b) => (b.weight ?? 0) - (a.weight ?? 0)) + .map((d) => createExtensionElement(d)) + ); + } + ); + } + + render() { + return html` + ${this._components?.map( + (component) => html` ${component} ` + )} + `; + } +} + +export default CustomExternalDataElement; + +declare global { + interface HTMLElementTagNameMap { + [element]: CustomExternalDataElement; + } +} +``` + +Then, load your component using a `manifest.ts` file: + +```json +{ + type: "workspaceView", + kind: ENGAGE_PROFILE_DETAIL_WORKSPACE_VIEW_KIND, + alias: "Engage.Profile.Details.ExternalData.WorkspaceView", + name: "Engage Profile Details External Data", + element: () => + import("path-to-your-component"), + meta: { + label: "External Data", + pathname: "path-name", + icon: "your-custom-icon", + }, + conditions: [ + { + alias: UMB_WORKSPACE_CONDITION_ALIAS, + match: ENGAGE_PROFILE_DETAILS_WORKSPACE_ALIAS, + }, + { + alias: ENGAGE_EXTERNAL_DATA_PACKAGE_CONDITION_ALIAS, + }, + ], +} ``` This is all that is required to render your custom component. From 5207f054825d346d8991945d13b3b5c4eda89dec Mon Sep 17 00:00:00 2001 From: Nguyen Doan Thanh <145089181+dtng95@users.noreply.github.com> Date: Fri, 3 Oct 2025 16:52:59 +0700 Subject: [PATCH 2/4] Update external-profile-data.md --- .../profiling/external-profile-data.md | 87 +++++-------------- 1 file changed, 24 insertions(+), 63 deletions(-) diff --git a/16/umbraco-engage/developers/profiling/external-profile-data.md b/16/umbraco-engage/developers/profiling/external-profile-data.md index ff404be45b7..4cc9383766e 100644 --- a/16/umbraco-engage/developers/profiling/external-profile-data.md +++ b/16/umbraco-engage/developers/profiling/external-profile-data.md @@ -25,75 +25,36 @@ When this component is registered a new tab will be rendered in the Profiles sec To render this External Profile Tab with a custom component, you have to create your component and register it with Umbraco Engage. The following code will show how to do both. Add the below code in a Typescript file: ```typescript -// Create a component. We create a component named "myCustomExternalProfileDataComponent" here: - -const element = "myCustomExternalProfileDataComponent"; -@customElement(element) -export class CustomExternalDataElement - extends UmbLitElement - implements UmbWorkspaceViewElement -{ - @state() - private _components?: Array; - - constructor() { - super(); - - this.observe( - umbExtensionsRegistry.byType(ENGAGE_EXTERNAL_DATA_EXTENSION_TYPE), - async (data) => { - if (!data) return; - this._components = await Promise.all( - data - .sort((a, b) => (b.weight ?? 0) - (a.weight ?? 0)) - .map((d) => createExtensionElement(d)) - ); - } - ); - } - - render() { - return html` - ${this._components?.map( - (component) => html` ${component} ` - )} - `; - } -} - -export default CustomExternalDataElement; - -declare global { - interface HTMLElementTagNameMap { - [element]: CustomExternalDataElement; - } +export class EngageProfileInsightElement extends UmbLitElement { + #profileId = 0; + + constructor() { + super(); + this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, context => { + this.observe(context?.unique, unique => { + this.#profileId = +unique; + }); + }); + } + render() { + return html` +

This is a custom external profile data element

+

Current profile id: ${this.#profileId}

`; + } } +export { EngageProfileInsightElement as element } +customElements.define("profile-insight-demo", EngageProfileInsightElement); ``` -Then, load your component using a `manifest.ts` file: +Then, load your component using a manifest.ts file. The extension type must be engageExternaldataComponent. ```json { - type: "workspaceView", - kind: ENGAGE_PROFILE_DETAIL_WORKSPACE_VIEW_KIND, - alias: "Engage.Profile.Details.ExternalData.WorkspaceView", - name: "Engage Profile Details External Data", - element: () => - import("path-to-your-component"), - meta: { - label: "External Data", - pathname: "path-name", - icon: "your-custom-icon", - }, - conditions: [ - { - alias: UMB_WORKSPACE_CONDITION_ALIAS, - match: ENGAGE_PROFILE_DETAILS_WORKSPACE_ALIAS, - }, - { - alias: ENGAGE_EXTERNAL_DATA_PACKAGE_CONDITION_ALIAS, - }, - ], + "type": "engageExternalDataComponent", + "alias": "EngageDemo.ExternalProfileData", + "name": "External Profile Data Demo", + "weight": 100, + "js": "/path/to/my-javascript.js" } ``` From 8427c6c05bd4cc5a2479adb676c74b402d082591 Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Wed, 8 Oct 2025 11:35:32 +0200 Subject: [PATCH 3/4] Update 16/umbraco-engage/developers/profiling/external-profile-data.md --- 16/umbraco-engage/developers/profiling/external-profile-data.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-engage/developers/profiling/external-profile-data.md b/16/umbraco-engage/developers/profiling/external-profile-data.md index 4cc9383766e..c2ba19e06ee 100644 --- a/16/umbraco-engage/developers/profiling/external-profile-data.md +++ b/16/umbraco-engage/developers/profiling/external-profile-data.md @@ -22,7 +22,7 @@ When this component is registered a new tab will be rendered in the Profiles sec ### Register custom components -To render this External Profile Tab with a custom component, you have to create your component and register it with Umbraco Engage. The following code will show how to do both. Add the below code in a Typescript file: +To render this External Profile Tab with a custom component, create your component and register it with Umbraco Engage. The following code demonstrates both steps. Add the below code in a TypeScript file: ```typescript export class EngageProfileInsightElement extends UmbLitElement { From 3e05655808a073aca8e7f31ca133a4b843e071ef Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Wed, 8 Oct 2025 11:35:39 +0200 Subject: [PATCH 4/4] Update 16/umbraco-engage/developers/profiling/external-profile-data.md --- 16/umbraco-engage/developers/profiling/external-profile-data.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-engage/developers/profiling/external-profile-data.md b/16/umbraco-engage/developers/profiling/external-profile-data.md index c2ba19e06ee..b1c60d0a5c1 100644 --- a/16/umbraco-engage/developers/profiling/external-profile-data.md +++ b/16/umbraco-engage/developers/profiling/external-profile-data.md @@ -46,7 +46,7 @@ export { EngageProfileInsightElement as element } customElements.define("profile-insight-demo", EngageProfileInsightElement); ``` -Then, load your component using a manifest.ts file. The extension type must be engageExternaldataComponent. +Then, load your component using a `manifest.ts` file. The extension type must be `engageExternaldataComponent`. ```json {