Events portal customization

(1) Share

Report

Posted on by kelly1

187

Hello,

We have an events portal (standard one when you install the marketing application), and we would like to customize the home page so that only public events are shown. We have a 2 options field on the event entity which specifies whether the event is public or private. Private events are still accessible on the portal however should not be visible on the home page.

How can we achieve this please?

Thanks.

All responses (9)

Answers (1)

cloflyMao 25,198 on at

Like (0)

Report

RE: Events portal customization

Hi Kelly,

I have answered in that thread, please check it.

Regards,

Clofly
kelly1 187 on at

Like (0)

Report

RE: Events portal customization

Hi Clofly,

Sorry to bother you again. I have a problem with font awesome.

When serving the app locally, the font awesome styles and icons work properly, however when I deploy the changes using the script, the styles and icons do not load on the live portal. Do you have any idea about this?

thanks
cloflyMao 25,198 on at

Like (0)

Report

RE: Events portal customization

Hi kelly,

Ok, sorry for I havn't event portal to test script.

Please share screenshot if you had trouble while making change locally and searching corresponding file in Portal app.

If you had found any anwser helped, please kindly mark as verified, it would be greatly appreciated. :)

Regards,

Clofly
kelly1 187 on at

Like (0)

Report

RE: Events portal customization

Finally managed to deploy via the script and I am going to make changes locally as suggested.

Thanks very much for your help.
cloflyMao 25,198 on at

Like (0)

Report

RE: Events portal customization

Hi kelly,

Have you searched home.component.html among Web page and Web template records?

The Name field would be "home", or Partial URL field would be "/".

Web page:

Web template:

Regards,

Clofly
kelly1 187 on at

Like (0)

Report

RE: Events portal customization

Is there another way to deploy the changes please? when running the script in powershell I am getting the following error:

PackageManagement\Install-Package : No match was found for the specified search criteria and module name
'Microsoft.Xrm.Data.PowerShell'. Try Get-PSRepository to see all available registered module repositories.
At C:\Program Files\WindowsPowerShell\Modules\PowerShellGet\1.0.0.1\PSModule.psm1:1772 char:21
+ ... $null = PackageManagement\Install-Package @PSBoundParameters
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (Microsoft.Power....InstallPackage:InstallPackage) [Install-Package], Ex
ception
+ FullyQualifiedErrorId : NoMatchFoundForCriteria,Microsoft.PowerShell.PackageManagement.Cmdlets.InstallPackage

Import-Module : The specified module 'Microsoft.Xrm.Data.PowerShell' was not loaded because no valid module file was
found in any module directory.
cloflyMao 25,198 on at

Like (0)

Report

RE: Events portal customization

Hi Kelly,

-> I customized it locally because I havn't portal to host event website.

You could check whether it would exists in Web Template records,

or try to search whether there is a Web page record which Partial URL field is \home,(or just Name field equals home)

until you could find keywords in my code.

-> Another method is that you could download event portal sample code and make change locally as what I did,

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

there is a script inside the downloade sample files which will help user to deploy all customization to Portal automatically:

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

Please share screenshot if you had met any trouble, I'll reply you in time. :)

Regards,

Clofly
kelly1 187 on at

Like (0)

Report

RE: Events portal customization

Thank you very much for your detailed reply. Where can I find the home page file: home.component.html please?
Verified answer

cloflyMao 25,198 on at

Like (0)

Report
RE: Events portal customization

Hi kelly,

Currently there is no OOB option in CRM or tool to achieve your requirement,

code is required for event page customization,

but job for code would be simple or a bit more steps,

I'll show a simple way at beginning, then give detailed steps about how to show different events on home page based on custom field.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

By default, Event API could only show all published events, we couldn't filter event records with criteria from back-end in Event portal.

However, due to Event portal is built by Angular, which provides a useful directive: "*ngIf",

thus we could easily do customization to hide specific events based on retrieve fields at front-end.

But another fact is that we need do customization to add our customized field with other OOB existing fields.(Complex way)

Please download the developer introduction, to get known for all available event APIs and available fields from a event record by default.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Easy way:

From default available fields from the introduction, "Event type" would be an OOB field for us to do customization.

1. Add a new custom event type: Private event to Event type option set, Value(100000006) is important for us in Event Portal.

2. I set my last event as Private

3. In Event portal, find the home page file: home.component.html.

replace whole code inside row element with my code below:

{{ event.eventName }}

at {{ event.building.name }}

{{ event.startDate | date:'mediumDate' }} {{ event.startDate | date:'shortTime' }} - {{ event.endDate | date:'shortTime' }} {{ event.startDate | date:'mediumDate' }} - {{ event.endDate | date:'mediumDate' }}

Please pay attention to my code:

*ngIf="event.eventType !== 100000006"

It means that we only show all type events except Private Type event.(From step 1 configuration)

4. Result

now "How to configure DKIM" hasn't been shown.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Complex way:

If you would like to show events based on custom entity, please read further:

I created a 2 options field called Access Bility,

by default its Public(True), I set it to Private(False).

Please notice that I've changed it back to OOB event type.

1. Follow the tutorial for how to show custom fields in Event API result:

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

We add a record for new_accessbility, it should be JSON array format.

2. In Event.ts file, it a model to map all variables to eixsting Event fields,

we add customFields as a new field, its type is Object.

3. Still in home.component.html, do replacement with my code:

{{ event.eventName }} and {{event.customFields.new_accessbility}}

at {{ event.building.name }}

{{ event.startDate | date:'mediumDate' }} {{ event.startDate | date:'shortTime' }} - {{ event.endDate | date:'shortTime' }} {{ event.startDate | date:'mediumDate' }} - {{ event.endDate | date:'mediumDate' }}

Actually we just changed the condition to "event.customFields.new_accessbility === true",

which means only show events that the option has been set to Public.

4. Result:

I also output the field real value in second demo to get a clear view for result,

please remove "and {{event.customFields.new_accessbility}}"

when you copy it into your environment.

-----------------------------------------------------------

Hope those would helps.

Regards,

Clofly