In this tutorial, you will learn about content apps and how to create one within Umbraco V8. A content app allows you to create a tab that you can be associated with a document type, or, a media item in order to render custom HTML When you create a custom content app a custom tab will appear next to the icon tab within the Umbraco backend.

Content App Eample

Content apps are useful if you want to add in some custom functionality that is based on a per-item basis. For example, you could create a tab to display where a page is linked to on the site.

There are two main approaches to create a content app within Umbraco. I will focus on the C# implementation within this tutorial, however, there is also an angular.js approach. If you want to use angular instead you can read more about it on the Umbraco documentation here.

To create a content app you will need to create a content app factory. This is done by creating a custom class and implementing it from IContentAppFactory, like this:

The view property specifies where within your application the corresponding HTML and JS files need to live. THe recommend location for content app files is within a dedicated folder within the 'app_plugins' folder. Create a corresponding folder and add all HTML and JS to render the tab as needed. Below demonstrates some basic HTML that will render some text in a tab:

Finally, in order for the content app to load on start-up, a custom user composer needs to be created to associate the content app with Umbraco on boot-up, this can be done like this:

With these three files when you loaded Umbraco and open up the backend and go to any document-type, you should not see a new icon called 'My Content App' next to the 'info' button. If you want additional files to load with the content app then you may need to create a package.manifest file in the plug-ins folder. Within package.manifest you can associate additional files and meta-data, I won't cover that in this tutorial, however, more information on this process can be found here.

Happy Coding!