Content Apps

Add Content Apps to your types (coming up in v 3.1). You can use these to display other information related to them. For example you could display the payments done with a voucher. Of course this data has to come from a UI-O-Matic.

Adding a Content App

To add your content app you need to create a class that inherits from IUiomaticContentAppFactory.

public class VoucherHistoryContentApp : IUiomaticContentAppFactory
public ContentApp GetContentAppFor(Type type)
if (type != typeof(Voucher)) return null;
var voucherHistoryApp = new ContentApp
Alias = "voucherHistory",
Name = "Voucher History",
Icon = "icon-calculator",
View = "/App_Plugins/ContentApps/voucherHistory.html",
Weight = 0
return voucherHistoryApp;

This voucherHistoryApp ContentApp is a Umbraco Content App. The configuration of the app is the same than other Umbraco apps.

The GetContentAppFor method will get the type being loaded in UI-O-Matic. You can use this type to check if your app needs to load.

To add the voucherHistoryApp app to the collection of apps you need to use a Composer :

public class ContentAppsComposer : IUserComposer
public void Compose(Composition composition)

Creating your content app view

On the previous step you configured your content app to display a view on /App_Plugins/ContentApps/voucherHistory.html .

For this view to work you will need to use a controller.

<div ng-controller="voucherHistoryController">
<!--Your view here-->


You can get the id of your current item from

function ($scope, editorState) {
var id =;
//your logic here