Content Apps
A guide configuring content apps in Umbraco
What are Content Apps
Content Apps are companions to the editing experience when working with content or media in the Umbraco backoffice.
With Content Apps, editors can switch from editing 'Content' to accessing contextual information related to the item they are editing.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2945122355-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmmtM2UdX1OOMSi0CksPv%252Fuploads%252Fgit-blob-ffae7300253f647b3dbcc7ec29b5ad5f9ca48918%252Fcontent-app-1.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=8a1b7318&sv=1)
Default Content Apps
'Info' - The 'Info' Content App is a default Content App for all items, 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. This would then display to editors the current 'page views' for the content item they are editing.
Controlling Appearance/Position
You can associate an icon and control the position of your custom Content App. The position, for example between 'Content' and 'Info', is set 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 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:
Umbraco backoffice uses the Helveticons icon pack by default.
Creating the View and the Controller
Add 2 additional files to the /App_Plugins/WordCounter/
folder:
wordcounter.html
wordcounter.controller.js
These 2 files will be our main files for the app, with the .html
file handling the view and the .js
file handling the functionality.
In the .js
file we declare our AngularJS controller and inject Umbraco's editorState and userService:
And in the .html
file:
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.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2945122355-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmmtM2UdX1OOMSi0CksPv%252Fuploads%252Fgit-blob-b3b479c6c3c14c8f4a12609d3ac4fef268dd0c3c%252Fcontent-app-2.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=b29bbbf8&sv=1)
Limiting according to type
You can set your Content App to only show for specific types by adding a 'show' directive in the package.manifest
file.
This can be done for both Content/Media Types, for Member types and for Content Types (Document Types) in the Settings section.
Here is an example where all types are taken intro consideration when limiting access to a Content App:
When the 'show' directive is omitted then the app will be shown for all types.
Also, when you want to exclude any type, make sure to include all the rest of that type, using "+content/*"
, "+media/*"
or "+member/*"
.
In this case the WordCounter app is only usable within the Content section so you have to exclude from all other types.
Limiting according to User Role
In a similar way, you can limit your Content App according to user roles (groups). For example:
When a role restriction is given in the manifest, it overrides any other restrictions based on type.
C#: Creating a Content App
This is an example of how to create a Content App with C# and perform your own custom logic to show a Content App. Create a WordCounter.cs
file with the following implementation:
You will still need to add all of the files you added above. However, because your C# code is adding the Content App, the package.manifest
file can be simplified like this:
You can also have a coloured icon for your Content App by specifying the icon in the format icon-[name of icon] color-[name of color]
. For eg, an indigo colored icon can be specified for your Content App by specifying the icon as "icon-calculator color-indigo"
in your Content App C# class or package.manifest .
Notification badges
There are times when you want to draw the attention of editors to your content badge, so they know they need to take some action. That is where notification badges come in to play.
When you set a badge, a circle with a chosen background and a number in it will be added to the content app icon.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2945122355-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmmtM2UdX1OOMSi0CksPv%252Fuploads%252Fgit-blob-80d3b00631eda999b014a0728f1768539348271d%252Fcontent-app-badge.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=da1fc373&sv=1)
You can enable a badge by using this code in the angular controller of your content app.
Further customization can be done by setting a notification badge from an IContentAppFactory
. This is achieved by setting the badge property on the ContentApp model.
Possible values for the ContentAppBadge
Type are Default, Alert and Warning.
Last updated