Content Apps

What are Content Apps?

Content Apps are companions to the editing experience when working with content in the Umbraco backoffice.

Content Apps are a new concept in v8. Editors can switch from editing 'Content' to accessing contextual information related to the item they are editing.

Default Content Apps

'Info' - The 'Info' Content App is a default Content App for all items, replacing the 'Info' tab in Umbraco V7 for displaying Links, History and Status of the current content item.

Custom Content Apps

As an integrated part of Umbraco it is possible for you as a developer to create and provide your editors with helpful Content Apps.

For example, you could create a Google Analytics integration within a Content App that displays to editors, the current 'page views' for the content item they are editing.

Controlling Appearance/Position

You can associate an icon with your custom Content App, control the position (between 'Content' and 'Info') where your custom Content App should appear via a 'weighting' number

Permissions

Content Apps can be configured to appear dependent on Section, Content Type and User Group Permissions.

Read-Only?

Content Apps are designed to be companions to the Content Item. They should enhance the editor's experience by enabling quick access to contextual information for the particular content item they are editing. Content Apps are not intended to be used for the editing content.

Creating a Custom Content App

This guide explains how to set up a custom Content App in the following steps:

Adding a Content App that counts how many words are added for each property type

Limiting the Content App to appear for only specific content types

Limiting which user groups can see the Content App

A basic understanding of how to use AngularJS with Umbraco is required. If you have created a property value editor before, this will all feel very familiar.

Setting up the Plugin

The first thing we do is create a new folder inside /App_Plugins folder. We will call it WordCounter

Next we need to create a manifest file to describe what this Content App does. This manifest will tell Umbraco about our new Content App and allows us to inject any needed files into the application.

Create a new file in the /App_Plugins/WordCounter/ folder and name it package.manifest. In this new file, copy the code snippet below and save it. This code describes the Content App. To help you understand the JSON, read the inline comments for details on each bit:

Checking it works

After the above edits are done, restart your application. Go to any content node and you should now see an app called Word Counter. Clicking on the icon should say "Amount of words for each property" and confirm the details of the current item and user. You can now adapt your Content App to retrieve external data using the standard Umbraco and AngularJS approach.

Limiting according to Content Type

You can set your Content App to only show for specific content types by updating your package.manifest file and adding a 'show' directive to the Content App definition. For example:

Our.umbraco.com is the community mothership for Umbraco, the open source asp.net cms. With a friendly forum for all your questions, a comprehensive documentation and a ton of packages from the community.
This site is running
Umbraco version 7.13.1