Customizing the event portal

(0) Share

Report

Posted on by nikoleta

457

Hello,

We are trying to customize the event portal and have a few questions regarding the process.

1. Dynamics Marketing with PowerApps event portal. I need to download and customize the latest version of the Sample Event Portal that "matches the version of the event management solution". The Marketing application is the latest version. It is 1.35.10059.1039 in the administration settings. The sample portals have a different versioning, the latest being 1.20 (Feb release). Which one is the matching version between the portal and the marketing app?

2. I am assuming that for this setup we, need to follow the "Self-hosted custom event website" (https://docs.microsoft.com/en-us/dynamics365/marketing/developer/self-hosted). Is that correct?

3. The readMe says that Agular version 6.1.2 is used but the local version is 7.3.9. Which version is correct? The "ng build --prod" command produces an error : "Configuration 'production' could not be found in project 'ClientApp'."

4. When I try to browse the site from localhost I am getting an error: "There was an issue when communicating with the server.". I configured using the self-hosted instructions and added the localhost:4200 to the web appliations. There is a bunch of errors in browser starting with: "localhost:4200/.../1036.json 404 (Not Found)"

"Access to XMLHttpRequest at .... from origin 'http://localhost:4200' has been blocked by CORS policy:"

Anyone having those issues?

I have the same question (0)

All responses (8)

Answers (1)

Suggested answer

CRMJetty 3,512 on at

Like (0)

Report

RE: Customizing the event portal

Hello nikoleta,

refer this article

https://docs.microsoft.com/en-us/dynamics365/marketing/developer/event-management-web-application

I hope it helps,

Thanks.

Please mark as verified if the answer is helpful. Welcome to join hot discussions in Dynamics 365

Was this reply helpful? Yes No
Suggested answer

Philipp Focust 147 on at

Like (0)

Report
RE: Customizing the event portal

Hi All,

Just in case anyone is still struggeling with the CORS issue, I'll provide a step by step guidance to make the Events Portal work from localhost:

- Create a new web application on the Dynamics 365 Marketing instance (refer to: docs.microsoft.com/.../register-web-application-events-api) with origin https://localhost:4200

- Go to your Angular project and open the environment.ts file

-> Change the apiEndpoint to the endpoint from your webapplication, e.g. 123456.svc.dynamics.com/.../

-> useRestStack: true

-> emApplicationtoken: The token from your registered web application

With these settings the requests are generated correctly, however you'll face the CORS issue. To circumvent this issue you must include a proxy in your Angular project:

- Under the src\ directory create a file called: proxy.conf.json and use the endoint from your web application for the target option:

{ "/EvtMgmt/api/v2.0/*": { "target": "https://123456.svc.dynamics.com", "secure": false, "logLevel": "debug" } }

- Navigate to the angular.json file in the root of your application and search for the following code (serve...) and add the proxyConfig line within the options object, just below the browserTarget key:

"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "ClientApp:build", "proxyConfig": "src/proxy.conf.json" }, "configurations": { "self-hosted": { "browserTarget": "ClientApp:build:self-hosted" }, "portals-hosted": { "browserTarget": "ClientApp:build:portals-hosted" } } }

If you served your project with SSL enabled, type

ng serve --ssl

This will generate a SSL certificate and you're ready to go.

Best regards,

Philipp

Was this reply helpful? Yes No
Jetj25 534 on at

Like (0)

Report
RE: Customizing the event portal

HI

I have done the steps in the document to host a portal locally

I het the error

Cannot GET /
when i try to open the local host http://localhost:4200/

Was this reply helpful? Yes No
Verified answer

cloflyMao 25,208 on at

Like (0)

Report

RE: Customizing the event portal

Hi nikoleta,

It's glad that your problem has been solved.

As you said, trailing slash and restart of portal are all required for final work.

* Shouldn't the apiEndpoint point to the EvtMgmt/api/v2.0/ given that the approach that I am using is deprecated?

In my opinion, "deprecated" here would be not proper, because "EvtMgmt/api/v2.0/" is used for self-hosted way,

however, as doc of portal hosted has stated: apiEndpoint variable should point to Portal URL.

The model in portal hosted doc indicated that Event on Portal is driven by Dynamics 365 plugins instead of new Event Management Public API.

* Should there be separate environment.ts for localhost and for deployment to the portal?

Actually in new downloaded sample website files, environment.ts is an empty file,

while contents in environment.d365.ts and environment.selfhosted.ts are almost same,

the difference is just that default values have been formatted for different deployment purpose.

So if we can host a test website at local with environment.ts, then we can also keep it for deployment, no separate file is needed.

In deed, environment.ts just make website works at local machine to let us make customization, when everything customization is done,

the script DeployToDynamics365Instance.ps1 for deployment will only update modified files to corrensponding files in Portal, environment.ts won't be uploaded.

* Is there a missing CORS setting in addition to the one that I did for the home pages?

I havn't event portal to test for you, but you can try to add http://localhost:4200 to site setting with this part:

https://docs.microsoft.com/en-us/dynamics365/marketing/developer/portal-hosted#configuring-cross-origin-resource-sharing-cors

(not sure localhost would be also passed by adding a CORS rule)

You could also take my anwser in this thread as reference to see whether it could help:

https://community.dynamics.com/365/marketing/f/dynamics-365-for-marketing-forum/376526/http-failure-response-for-event-portal-w-custom-domain

Finally, please feel free to raise any question, I'll try my best to give any thought.

Regards,

Clofly

Was this reply helpful? Yes No
nikoleta 457 on at

Like (0)

Report

RE: Customizing the event portal

Hi Clofly,

Finally the localhost setup worked with the following settings:

apiEndpoint: 'xyz.microsoftcrmportals.com/'

useRestStack: false

emApplicationtoken: ''

I had to change the localizationEndpoint to '/'. Otherwise the translations didn't work.

Restarted portal after CSFR & CORS setting.

The environment.ts file contains the following statement:

* If you're using the deprecated Event Management Portal API then you need to enter the URL of your Portals.

* If you're using the new Event Management Public API then you need to enter the value from the `Endpoint` field that you

* get after registering your web application. Additionally you need to append 'EvtMgmt/api/v2.0/'.

Shouldn't the apiEndpoint point to the EvtMgmt/api/v2.0/ given that the approach that I am using is deprecated?

Should there be separate environment.ts for localhost and for deployment to the portal?

Using the localhost, the home page, the event and the registration pages load. However, when I try to submit a registration, there is the following message in browser:

"Http failure response for xyz.microsoftcrmportals.com/.../ 0 Unknown Error"

The logs show:

"Access to XMLHttpRequest at 'xyz.microsoftcrmportals.com...' from origin 'http://localhost:4200' has been blocked by CORS policy..."

Is there a missing CORS setting in addition to the one that I did for the home pages?

Sorry for the multitude of questions...

and thanks for your help.

nikoleta

Was this reply helpful? Yes No
cloflyMao 25,208 on at

Like (0)

Report
RE: Customizing the event portal

Hi nikoleta,

1. Your understand is correct, web application is only required when we do self-host.

2. Is your apiEndpoint property
https://xyz.microsoftcrmportals.com/
?

As the doc said, it should points to your portal URL.(Besides trailing slash, also add https as full URL format)

3. "useRestStack" = false and empty "emApplicationtoken" is right because it's portal-hosted customization.

4. In bypass CSRF setting, have you restarted your Portal to make settings are applied?

Regards,

Clofly

Was this reply helpful? Yes No
nikoleta 457 on at

Like (0)

Report

RE: Customizing the event portal

Hi,

Thanks for the quick reply.

I changed followed the D365 Portal hosted deployment as you indicated.

I copied environment.d365.ts as environment.ts but am still having issues with the localhost.

If I understand correctly, there should be no web applications under "Event management" Settings. Correct?

Instead, the "apiEndpoint" should point to the website binding and would looks something like xyz.microsoftcrmportals.com/

I left "useRestStack" = false and empty "emApplicationtoken".

However, the environment.ts file mentions using "deprecated Event Management Portal API" with those settings.

Best,

Was this reply helpful? Yes No
cloflyMao 25,208 on at

Like (1)

Report

RE: Customizing the event portal

Hi nikoleta,

1. 1.20 is the version of sample websites, most of functions and modules are stable because it just calls event api from front-end.

But due to every environments have been updated with 2019 wave 2 release, so the recommended version should not be earlier than 1.18.

If your marketing application is the latest version, then just develop with 1.20 is ok.

2. If your event hosts on Portal, then you should follow this part:

https://docs.microsoft.com/en-us/dynamics365/marketing/developer/portal-hosted

Self-hosted is for external website situation.

3. To configure environment with portal-hosted way,

please follow this part:

https://docs.microsoft.com/en-us/dynamics365/marketing/developer/portal-hosted#environment-configuration

The error indicates that it can't find proper environment configuration,

please duplicate the environment.d365.ts configuration file located in the \src\environments folder and name it as environment.ts.

Your local Angular version is greater than sample website built version, but it doesn't matter, Angular will do automatically adaptation.

4. The bypass error should be http://localhost:4200,

and in portal-hosted way, you need an extra step:

https://docs.microsoft.com/en-us/dynamics365/marketing/developer/portal-hosted#local-development

Regards,

Clofly

Was this reply helpful? Yes No