Tuesday, 12 May 2020

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


Hi everyone,

In my previous posts: 
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

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


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


<div *ngIf="allEvents" class="container mt-5" id="all-events">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4" attr.data-href="/event?id={{ event.readableEventId }}" *ngFor="let event of allEvents">
                <div class="card mx-auto mb-4" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">
                             <a [routerLink]="['/event']" [queryParams]="{id: event.readableEventId}" title="{{ event.eventName }}" [attr.aria-label]="getAreaLabel(event)">
                                {{ 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 class="card-footer text-dark" >
                       {{ getDateString(event) }}
                    </div>
                </div>
            </div>
        </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


Then do not forget to call it from your HTML
*I commented the previous code, instead I change it with simple line:

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

Since it has been handle by the .ts file.


Result:

Hope it helps!

*For custom field, we can discuss in the next post


Thank you so much.
Best regards,

Aileen



9 comments:

  1. Packers And Movers Bangalore Local Household Shifting Service, Get Free Best Price Quotes Local Packers and Movers in Bangalore List, Compare Charges, Save Money
    And Time @ Packers And Movers Bangalore

    ReplyDelete
  2. Excellent Blog! I would like to thank for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. I wanted to thank you for this websites! Thanks for sharing. Great websites! Local Packers And Movers Bangalore

    ReplyDelete
  3. Thanks for sharing this informative content , Great work
    Leanpitch provides online training in Enterprise agile coaching during this lockdown period everyone can use it wisely.
    Enterprise agile coaching

    ReplyDelete
  4. I really liked your Information. Keep up the good work. Dynamics 365 Marketing

    ReplyDelete
  5. EventTitans is the hybrid event management software where Event Interactions made Ever Powerful and Highly Flexible.Satisfy all of your event management needs with EventTitans, the comprehensive and innovative hybrid solution.
    virtual event platform
    event management software
    event engagement platform
    event website builder
    online event ticketing
    hybrid event platform
    event registration platforms

    ReplyDelete
  6. It's really Nice Blog!! Thank you for sharing with us..
    DevOps Training
    DevOps Online Training

    ReplyDelete
  7. Awesome information! Such a wonderful reference! Thanks for all the hard work you have obviously put into this!

    ReplyDelete
  8. Thanks for this wonderful post. The information in this article is very helpful. We at Eventdex provide a complete suite of integrated event management software aimed at delivering great user experiences and high ROIs to event planners. It is the only ‘App-First’ cloud-based platform to have automated the entire event lifecycle. This unique offering provides exceptional benefits for the Virtual Meeting App, Speed Networking, event registration software, business matchmaking app, Onsite Event Management Software, lead retrieval app and the overall 360-degree view of the Event Management process. for more info check us out here: http://bit.ly/2V0s6fJ

    ReplyDelete

My Name is..