📔
ui-o-matic documentation
  • UI-O-Matic Docs
  • Usage
  • Default Field Editor Views
  • Custom Field Editor Views
  • Listview
  • List Field Views
  • List View Actions
  • Dashboard
  • Property Editors
  • Event Model
  • Config Settings
  • Addons
  • Advanced
  • KnowIssues
  • FurtherReading
  • Content Apps
  • SPA and Front.API
Powered by GitBook
On this page
  • Adding a Content App
  • Creating your content app view

Was this helpful?

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.

    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;
        }
    }

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.

  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.

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

Controller:

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

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

        //your logic here
    });
PreviousFurtherReadingNextSPA and Front.API

Last updated 14 days ago

Was this helpful?

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

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

Umbraco Content App
Composer