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.
1
    public class VoucherHistoryContentApp : IUiomaticContentAppFactory
2
    {
3
        public ContentApp GetContentAppFor(Type type)
4
        {
5
            if (type != typeof(Voucher)) return null;
6
            
7
            var voucherHistoryApp = new ContentApp
8
            {
9
                Alias = "voucherHistory",
10
                Name = "Voucher History",
11
                Icon = "icon-calculator",
12
                View = "/App_Plugins/ContentApps/voucherHistory.html",
13
                Weight = 0
14
            };
15
​
16
            return voucherHistoryApp;
17
        }
18
    }
Copied!
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 :
1
  public class ContentAppsComposer : IUserComposer
2
  {
3
        public void Compose(Composition composition)
4
        {
5
            composition.UiomaticContentApps().Append<VoucherHistoryContentApp>();
6
        }
7
  }
Copied!
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.
1
    <div ng-controller="voucherHistoryController">
2
          <!--Your view here-->
3
    </div>
Copied!
Controller:
You can get the id of your current item from editorState.id
1
    angular.module("umbraco").controller("voucherHistoryController",
2
        function ($scope, editorState) {        
3
            var id = editorState.id;
4
​
5
        //your logic here
6
    });
Copied!

Custom Sections

EventModel

Last modified 1yr ago

Copy link

Contents

Adding a Content App

Creating your content app view