Integrating Umbraco with third parties using Models Builder

2016 Oct 08

In my last post I talked about the Umbraco Models Builder Basics where I showed how we can read our sites data using automatically generated strongly typed models, but sometimes we've got to integrate our Umbraco solutions with third parties and mix their data with ours. In this post, I'll explain how we can achieve this using Umbraco Models Builder.

For this example, we're going to integrate with the Eventbrite API. The idea is that we want to show Eventbrite events in the website with its own look & feel and optionally we could have extra information that exists only in the Umbraco solution.

First, we need to create a Document Type called Event with these properties:

Eventbrite Id - Textstring
Extra Info - RTE

In the event view, we want to show: the extra info from the Document Type and the event name and description from Eventbrite. Thanks to Models Builder we already have a model for the data on Umbraco. For the Eventbrite data we need this model:

public class EventInfo
{
    public TextInfo Name { get;set; }
    public TextInfo Description { get; set; }
}

To mix the data, we need to create a view model which is what the view is actually going to use.

public class EventViewModel
{
    public Event UmbEvent { get; set; }
    public EventInfo EventbriteEvent { get; set; }
}

In order to initialise this view model and send it to the view, we need a controller:

public class EventController : RenderMvcController
{

    public async Task<ActionResult> Event(RenderModel model)
    {
        var umbEvent = new Event(model.Content);
        var eventBriteEvent = await eventbrite.GetEventAsync(umbEvent.EventbriteId);

        var vm = new EventViewModel();
        vm.UmbEvent = umbEvent;
        vm.EventbriteEvent = eventBriteEvent;
        return CurrentTemplate(vm);
    }

}

This controller does 4 things:

It creates the umbraco model using the very handy constructor that takes an IPublishedContent object.
It gets the data from Eventbrite.
It creates the event view model.
Finally, it returns the current template with our view model.

The last part is showing the data in the view:

@inherits UmbracoViewPage<UmbracoModelsBuilderThirdParties.ViewModels.EventViewModel>

<h1>@Model.EventbriteEvent.Name.Text</h1>
@Html.Raw(Model.EventbriteEvent.Description.Html)
@Html.Raw(Model.UmbEvent.ExtraInfo)

And that's how you make clean integrations with third parties in Umbraco.

Keep in mind that the code snippets on this post are incomplete as I wanted to show only the parts related to the topic, but as always I've uploaded the code to Github so you can play with it: https://github.com/camaya/umbraco-models-builder-integration although you'll need to create your own Eventbrite API key and put it on the web.config if you want to run it.

Before you go: I don't have a comments system on this blog, but I'd love to hear your thoughts so feel free to reach me on Twitter @_camaya.

Cheers.

Cristhian Amaya

Integrating Umbraco with third parties using Models Builder