May 2020 ~ Ms. Dynamics CRM

Tuesday, 12 May 2020

Tutorial: Customize and Extend the Dynamics 365 Event Management Marketing Portal Part 3: Manipulate UI and Show/Hide Events

Hi everyone,

In my previous post: http://missdynamicscrm.blogspot.com/2020/05/customize-and-extend-dynamics-marketing-event-portal-part-2-deal-with-standard-fields.html

we have learned how to customize and modify the Portal Source Code and inject some logic inside, this enables you to extend the basic functionality into you or your customer’s unique requirements.

We have also learned about the “Allow Anonymous Registration” field and its impact in the standard Portal.

** you can refer to my previous blog: http://missdynamicscrm.blogspot.com/2020/05/Dynamics-365-Understand-theimpact-of-AllowAnonymousRegistration-field.html

This field allows you to control whether everyone without signing in can or cannot register your event.

However, some customers may have requirements to just filter out and hide the “Private Events” instead of asking users to sign in since we already had a standard flag. With this, public users will not even able to see and aware that there are such events.

Now, let’s start our development.

Back to your code again.

We have learned how the Portal source code structure is and which part has to modify.

All available events are basically showing all upcoming event which has been published with LIVE status in your Dynamics Marketing, this never excludes anything regardless on which login you are using without further customization.

Just to share with you, the function that is being called is actuallty this function:

Then if we go deep again, we found this function (inside event.d365.service.ts) that is calling API ../published

I have checked, at least for now that I am aware of, there is no way to modify the /published API from UI.

So, you can just use old style method that is backend customization through programming by utilizing a field.

In this example and actually for your real project, you can just use “Allow Anonymous Registration” or “Event Type” or “Format” field.

Let’s code!

When we understand correctly, actually the event list is managed by a variable that is located in the home.component.html, that is “allEvents”

It means the part of the code that we need to change is only this part:

We have learned how to use ngIf previously in my previous post:

http://missdynamicscrm.blogspot.com/2020/05/customize-and-extend-dynamics-marketing-event-portal-part-2-deal-with-standard-fields.html

It is all about angular.js and type script but if you are already familiar with javascript or C# or Java, and ASP.NET with MVC concept, this will not be difficult for you to learn. P.S. I mentioned before, I have no experience in Angular and typescript before too.

The key is this highlighted part:

*ngFor="let event of allEvents"

This part is to loop every event of allEvents object

Now, just change your code to:

{{ event.eventName }}</a>

</h5>

<h6 *ngIf="event.building" class="card-subtitle mb-2 text-dark">at {{ event.building.name }} </h6>

<span>Allow Anonymous Registration: </span>

<!--

<span *ngIf="event.allowAnonymousRegistrations; else showFalse" class="card-subtitle mb-2 text-dark">{{ event.allowAnonymousRegistrations }} </span>

<ng-template #showFalse>

<span>false</span>

</ng-template>

-- change to-->

<span> {{ getAllowAnonymousRegistrationLabel(event) }}</span>

</div>

</div>

Let’s see the result!

*Before

*After:

Now you as public user can only view 2 event which are NOT a Private event.

**Of course you can use other fields or other logic to adjust to your requirements.

In my previous post, we have learned how to modify the code and add some logic that can be done through viewer (HTML) or its typescript code.

The same case here, I have tried the same method and it works.

So, instead of manipulating the UI with adding another DIV and put in ngif in the inner DIV, I can use code to control.

I revert back the UI code to its original state and commented my changes.

Now, go to the .ts file, this is the key:

As you know that allEvents is a collection or array of list of event, so you can definitely filter out the available events by filtering allEvents based on “Allow Anonymous Registration” field.

So, I have added new line below the this.allEvents = events; and comment it first

Result before changes:

You can still see 3 events, now uncomment the filter.

private loadPublishedEvents() {

this.isLoading = true;

this.eventService.getPublishedEvents().subscribe(

events => {

this.allEvents = events;

this.allEvents = events.filter(evt => evt.allowAnonymousRegistrations);

this.isLoading = false;

(error: LocalizableError) => this.handleErrorResponse(error)

);

}

This is the result

After finished the steps, you managed to learn how to filter, show, and hide the events based on logic you implemented.

Hope this can help you to understand how to control your Portal, not only Events but other things, what to display and what to hide, and manage the messages or UI that public will see.

You can either modify the UI/viewer or the code.

Thank you!

Tutorial: Customize and Extend the Dynamics 365 Event Management Marketing Portal Part 2: Work with Standard Event Fields

Hi everyone,

In my previous posts:

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

http://missdynamicscrm.blogspot.com/2020/05/CustomizeDeployDynamics365MarketingEventManagementOtherPortal.html

we have learned how to customize, test locally, and deploy to your actual and LIVE environment.

We also learned how to declare and use variable then display it into your portal

http://missdynamicscrm.blogspot.com/2020/05/customize-and-extend-dynamics-marketing-event-portal-part-1-add-variable.html

Those links are the Dynamics Marketing Portal Customization and Extension Series.

Now, let’s continue our learning to deal with real field/attribute.

From your portal, you can see the Available Event List as shown below:

Now, it is only showing Event Name, Building Name, and Dates

What if you want to add new information, for example some fields from the form

In this example, we can use the standard available fields first, most important is you are able to get and display it.

Let’s just get the “Allow anonymous registrations” Boolean first

To understand what this field usage, you can refer to my previous blog: http://missdynamicscrm.blogspot.com/2020/05/Dynamics-365-Understand-theimpact-of-AllowAnonymousRegistration-field.html

Go back to your code and then you add following code (span) in the home.component.html

{{ event.eventName }}</a>

</h5>

<h6 *ngIf="event.building" class="card-subtitle mb-2 text-dark">at {{ event.building.name }} </h6>

<span>Allow Anonymous Registration: </span><span *ngIf="event.allowAnonymousRegistrations" class="card-subtitle mb-2 text-dark">{{ event.allowAnonymousRegistrations }} </span>

</div>

</div>

And here is the result:

Now, you can see that the code is actually showing the value “true” but the Private Event “Allow Anonymous Registration” field value is actually NOT True, but it does not show as False, so how to show the either true or false?

You need to understand how it works in Angular.js in HTML, that is using *ngif syntax

<span>Allow Anonymous Registration: </span>

<span *ngIf="event.allowAnonymousRegistrations; else showFalse" class="card-subtitle mb-2 text-dark">{{ event.allowAnonymousRegistrations }} </span>

<ng-template #showFalse>

<span>false</span>

</ng-template>

Result:

Next, is to learn how to use .ts script instead of HTML. You can still use HTML method, however for complex scenario, I feel as developer, I love to do it using code behind approach.

Instead of showing “so-boolean value”, true or false, we want to show YES or NO

So, let’s add function that will handle the logic in your .ts script.

Where is it? As you are updating home HTML, then you should also update the ts that is the correspondence of home HTML, that is home.component.ts