Tutorial: Customize and Deploy Dynamics 365 Marketing Event Management or Other Portal

Hi everyone,

I would like to share how to customize and deploy portal code to your Dynamics 365 Portal.

Before that, make sure you have read my other post regarding to what the pre-requisites are and how to code & test plus deploy locally.

http://missdynamicscrm.blogspot.com/2020/05/Dynamics-event-marketing-portal-tutorial-how-to-build-deploy-and-test.html

This is to ensure you have done every step, including downloading sample website to customize the source code and you have done the required steps without missing anything.

Next is how do you customize it?

First, you just need to try if you are able to modify small changes and then deploy it to your Dynamics Marketing Portal (or any other portal I guess).

I am using Marketing – Event Management Portal because I am working on some requirements and I have searched in the internet, there is no detailed steps at the moment, so I tried and encountered errors and tried again until I managed to find the answer and want to share it.

Here is the portal before I customize

 

(*Actually I have customized some – the Aileen Test is the additional I added during testing 😊 , but let’s just use this as our original state*)

So, now let’s say you want to add something or change color, you can go back to your code (again, I assume you know already how to access your code – that’s why my above link is useful for starter).

YES!! You don’t need to run Visual Studio App then open the project, you can just using PowerShell

I am using very simple PowerShell:

 

It then will open Visual Studio Code

Now let’s follow the steps to customize it

Let’s see you want to modify the Main Page like what I did for Aileen Test, you need to understand where is it being located in your Portal and the Source Code.

Do you know where is it??

Here is the default Marketing – Event Management Portal

So, the first page is the All Events, I have been searching in any web files and any web/page template, code snippets in the Dynamics 365 instance but I got nothing.

I searched in the internet, I could not find it, and it is actually the way Angular works (P.S. I did not have much experience using Angular except for this one and PCF 😊) is by compiling everything and put it into main.js only.

Okay, since there is no much information, I tried to find it one by one and I tried to find “Available Events” keyword.

Have you found where it is??

Yes, it is behind the code!!

I found it in the home.component.html, which is located under src->app->components->home

However, you will not find it in the Home HTML in your Dynamics 365 instance just like old days of Portal. Not here, not there..

Not even here..

So, let’s just try and I will let you know where it is stored.

 Now, you want to change the color and add some words:

After that, you just want to deploy it!

To deploy it, you need to go to the DeployToDynamics365Instance.ps1 – it is located under Scripts folder

Then you need to change the Connection string or you can use InteractiveMode by uncomment it and comment the next return.

Remember in Powershell script # is comment not // or <!—or --

 Then after that you just need to Run/execute the script

I am using this button to run:

Wait.. and wait

then refresh your portal after you see this:

Refresh and here is what you will see (you may need to wait a while and keep hitting Ctrl+F5)

Before	After

Now you know how to customize it and deploy it LIVE to your Dynamics Portal.

But, are you wondering “Where is my customization stored actually”?

Actually, it is inside the main.es file (Web files)

Hope this helps!

Thank you and stay safe & healthy everyone!