Customising a Dynamics Marketing Event Portal - Set Up
Content warning: this post contains content of a very code-heavy nature which may scare fellow ‘ABC’ (anything but code) folk out there a bit but please don’t be afraid - you do not need a computer science degree to do this. A little bit of patience and willingness to learn would be handy - the results are totally worth it I promise!
Dynamics Marketing comes with a whole heap of Event Management functionality; it’s got a really neat Integration with Microsoft Teams and comes with a prebuilt portal to handle all event registrations. I’ve blogged about it quite a lot, it ends up in 90% of my demos. I am continuously amazed by how seamless, powerful and user friendly it is. Until it comes to changing anything on the portal beyond text and a single image.
The Event Management Portal is ‘Special’
It is completely different to a ‘regular’ Dynamics 365 or Power Apps portal, where changing the config settings for something simple like the date format - doesn’t actually work. The only way to make changes to the appearance, branding and styling of a Dynamics Event Management Portal is by manually updating the code
The event portal consists of two parts: a Frontend and a REST API backend. Already I’m loosing interest. In theory
You can implement the frontend using any of the available frameworks. The frontend part is a single page application and is fully customizable. [1]
It’s great because its so flexible… if you’re a professional web developer. I am not and I just want to change the colour of a bloody button. I put together these instructions after struggling through the various documentation locations [1], [2] & [3] and getting so lost/confused. Shout out to Bruce Sithole and Jan Vlasak for their help on my treacherous journey so far!
1) Install your weapons
1. Ensure you have some kind of ‘Developer Environment’ - I am using Visual Studio Code, because its the only one I know that exists.
2. Install Node.js version 10.x or higher following the installation wizard
3. Open Command Prompt and run the command node -v to check whether the installation is successful or not - if you get a random number response, you are winning.
4. Navigate to the directory where you have downloaded the source code e.g. cd C:\Users\ameyh\201205-EventWebsite\release
5. Install the Angular CLI required to build and run the Angular application using the command npm install -g @angular/cli
2) Download your ammunition
1. Download the source code for the event website which you are going to customise.
2. Extract the code onto your C drive somewhere
3. Navigate in the folder to 201205-EventWebsite\release\src\environments
4. Copy the environment.d365.ts
5. Re-name it to environment.ts
3) Configure your computer for portal domination
1. Open Visual Studio Code
2. Select ‘Open Folder…’
3. Navigate to the source code C:\Users\ameyh\201205-EventWebsite
4. ‘Select Folder’
7. In the environment.ts configuration file - change the apiEndpoint variable to point to the Website Bindings value (make sure you add a trailing slash at the end of the URL.!)
8. Make sure that the useRestStack variable is set to false - save all your changes.
9 Back in the Command Prompt - navigate to the directory where you have downloaded the source code
cd C:\Users\ameyh\201205-EventWebsite\release (make sure you are in the same directory where the package.json file is located)
10. Run the command npm install to fetch all the necessary packages required to run the website.
You are now officially ‘ready’ to start making the portal changes. My next few posts will cover my ongoing learning journey with handy examples on what you can change and exactly how, starting with the date format!
One day I hope this isn’t so painful and contradictory to the ‘Low Code No Code’ mantra of Microsoft - but on the bright side I learnt something new, overcame one of my demons and got to share the knowledge to others stuck in this same situation (it cant be just me surely!?). If you are stuck on this journey too, and this doesn’t help just drop me a message or contact below.
If you want a clue to what next it starts with Deployment but I definitely didn’t get past that hurdle on my own so Kudos if you do!
[1] Event management web application overview (Dynamics 365 Marketing Developer Guide) | Microsoft Docs