Dynamics Community Forum Thread Details

Event Portal Custom Fields Creating own API

Hello All,

I am using a custom event field on the event portal, added the field in the Selected fields of Website Entity Configuration.

And i can refer it as this.event.customFields.msevtmgt_expectedoutcome in the event.component.html

I am bit confused how to refer this custom field in the event.component.ts

For example console.log(this.event.customFields.msevtmgt_expectedoutcome);

I tried to follow steps mentioned in https://pkoval.com/2019/04/07/extending-dynamics-marketing-event-management-portals/

1) Created a Web Page, Page Template and Web Template with liquid script as mentioned

2) Added ExpectedOutcome.ts class in the \src\app\models

export interface Outcome {
   expectedoutcome: string;
}

3) getExpectedOutcome(readableEventId: string): Observable<string>; Added in the EventService.ts class

4) Implemented the same function in EventD365Service, EventRestService.

public getExpectedOutcome(readableEventId: string): Observable<string> {
        return this.http.get(
            `${environment.apiEndpoint}${EventD365Service.eventsEndpoint}/expectedoutcome/?readableEventId=${readableEventId}`
        );
    }
}

5) Added below line in event.component.ts

this.outcome = await this.eventService.getExpectedOutcome(this.readableEventId).toPromise();

My requirement is 
I want my own WebAPI to return me event ID based on custom field event language and event category.

My questions are :

Q1) What should be type of 'T' the function getExpectedOutcome(readableEventId: string): Observable<T>;??

Q2) This function should be implemented in both the event.rest.service.ts and event.d365.service.ts??

Q3) Is there any other way to create own Web API?

NOTE: I am running the Event Portal on my local host after customization is this the reason i am not getting the value of the Web API

I am bit confused. Can any one help me.

Kind Regards

Abhilash

Hi Abhilash,

Q1) What should be type of 'T' the function getExpectedOutcome(readableEventId: string): Observable<T>;??

A1) T stands for the data type the method will return.

TypeScript: Handbook - Generics (typescriptlang.org)

Q2) This function should be implemented in both the event.rest.service.ts and event.d365.service.ts??

A2) The event website can be hosted in 2 ways : Either hosted in Portals or Self hosted. Please read the full documentation to understand how the website works :

Self-hosted custom event website (Dynamics 365 Marketing Developer Guide) | Microsoft Docs

Dynamics 365 Portal hosted custom event website (Dynamics 365 Marketing Developer Guide) | Microsoft Docs

The two classes are used for separate purposes depending on how the website is configured in the environment.ts file. If it's configured as a self hosted website, it will use the event.rest.service.ts . This approach will use the Events Public API. If the website is portals hosted it will use the event.d365.service.ts. This will use Portal API. Since you are using Portals, you will need to implement the service logic in event.d365.service.ts. As the two classes extend the same interface, the method will need to be declared in the event.rest.service.ts as well.

Q3) Is there any other way to create own Web API?

Implementing your own Web API is quite a challenging task and I would not recommend doing it unless you have very good understanding of how the whole system works. You would need to get familiar with website code and how the angular framework works in general, you would also need to have a good understanding on how to build your liquid template and simulate your API to work as expected. This might even require some changes in the portal structure + some plugin development. As you can see this is quite a lengthy process. My suggestion is to work with the OOB functionality and customize the OOB response ( docs.microsoft.com/.../customize-events-api-response ) , then model your custom logic around the custom responses. This will allow you to send any custom field to your website code and use them later on.

To help better understand the angular code please visit Angular - Getting Started with Angular: Your First App .

Quick Links