# Content Apps

You can add Content Apps to your types. You can use these to display other information related to them. For example you could display the payments done with a voucher. Of course these data has to come from a custom database.

## Adding a Content App

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

```csharp
    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](https://our.umbraco.com/documentation/extending/Content-Apps/). 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](https://our.umbraco.com/documentation/implementation/composing/) :

```csharp
  public class ContentAppsComposer : IUserComposer
  {
        public void Compose(Composition composition)
        {
            composition.UiomaticContentApps().Append<VoucherHistoryContentApp>();
        }
  }
```

## 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.

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

Controller:

You can get the id of your item from `editorState.id`

```js
    angular.module("umbraco").controller("voucherHistoryController",
        function ($scope, editorState) {        
            var id = editorState.id;

        //your logic here
    });
```