Adding a TeamUp Form Control to Kentico

Many companies utilize SaaS applications for managing parts of their business. Calendar and scheduling products like TeamUp are great for administrating your corporate events and keeping everyone and everything on schedule. Here at Kentico, we use TeamUp for a number of internal processes, including managing our blog release schedule. In this blog, I will show you how you can create a form control to integrate with TeamUp to sync your events to a specific calendar.

Overview

For this blog, I will be integrating a TeamUp calendar into the Blogging module for Kentico. The idea is that authors will be able to create a new blog article and then have it posted directly to TeamUp using the blog post data. This would save authors a little bit of time when entering a blog, but more importantly, ensure that all of the blogs are entered in the TeamUp calendar. So let’s get to it!

Creating the form control

The first step in the process is to create a custom form control for our integration. The reason I chose this method is to have the process as simple as possible by having it on the Form tab for the blog post. This will allow authors to enter their post and then sync the data to TeamUp. I need to make sure I set the right data types where the form control to be used. In my example, I chose Text and Integer and will show the control for Page types.

New Form Control

The Kentico documentation has a great example of making a custom form control. You can check it out here.

Creating the form control was a pretty simple process when using the Kentico documentation example. After creating, I add a field to the Blog post page type and set the control to my new form control.

Page Type Field

Adding the TeamUp logic

Now that I have my custom control, I need to add my TeamUp logic. This code is going to handle the integration with TeamUp to read and write data. Luckily, TeamUp has a Web API (currently in beta) available and I was able to get access by writing to their support. Through this interface, I will be able to create an event based on the page data directly in my TeamUp Calendar.

Properties

I created a number of properties on my form control to help set my calendar information. These properties are pulled directly from TeamUp and identify my login, my calendar, and other information about my account. When I added the form control to the Blog Post page type, I set these properties for the control.

Form Control Properties

Page Type Field Properites

In my form control, I create a property for each of these values that allow me to get/set them from within the portal UI. One other important piece is the Value property. For this, I will want to store an identifier for the synced event once it has been created in TeamUp. The actual value will come from TeamUp and be their ID for the event within their system.

When the control loads, I want to display any events already associated with my blog post. I do this by calling the TeamUp REST service and querying it for the Blog Post Date. I then loop through all of the events for that day and look for the one that matches my saved event ID. If it matches the value I have saved, I then write out some data about the event and display it. I also hide the Create button but show the Delete button to allow the user to delete the synced event, if needed.

If there is no synced event for my blog post, I show the Create button to allow the user to sync it to TeamUp.

Clicking the Create button calls the CreateEvent mthod. This is the code that will create the event within TeamUp. I pull data from the blog post record and populate the appropriate fields for the TeamUp event. I then call the REST API and pass it the values, along with my Calendar ID and my TeamUpKey property. If all goes well, I should get a success response from the service and then display the newly synced event.

Clicking the Delete button is a bit simpler of a process. In the DeleteEvent method, I only need to pass the EventID and EventVersion values to the REST service. Once deleted, I reset my UI to show the Create Event button again.

Testing the functionality

Now it’s time for the fun stuff, testing! I create a new blog post and view that no event is synced to TeamUp.

No Event Synced

I click Create Event, which will then sync the event to TeamUp using the values from my blog post.

Create Event

Maybe I didn’t have my calendar ID set, and it added to the wrong calendar! Clicking the Delete Event button should remove it from TeamUp.

Delete Event

Wrapping Up

That’s it! With that simple control, I can now sync my events to TeamUp very quickly during the page creation process. Because I have different properties on the control itself, I can easily add this toanother page type and sync those events to a different calendar.

Hopefully, this blog shows you how you can leverage custom form controls to accomplish your project goals. And if you are using TeamUp, it’s a great example of how to integrate the two systems. Good luck!

Hello. I am a Technical Evangelist here at Kentico and will be helping the technical community by providing guidance and best practices for all areas of the product. I might also do some karaoke. We'll see how it the night goes...