Konstrukt
Search…
Context Apps
Configuring context apps in Konstrukt, the back office UI builder for Umbraco.
Context Apps in Konstrukt are analogous with Content Apps in Umbraco and they allow you to provide contextual apps that appear in the editor UI of content. From a Konstrukt perspective, defining context apps allows you to expose collections as content app where a collection has a relation to the content in question. An example could be something like blog post comments which are linked to individual blog posts. By exposing these as a content app allows them to be managed in context next to the blog post they are linked to.
Context App

You define a context app by calling one of the AddContextApp methods on a KonstruktWithTreeConfigBuilder instance.

Adds a context app with the given name and default icon.
// Example
withTreeConfig.AddContextApp("Comments", contextAppConfig => {
...
});

Adds a context app to the Umbraco menu with the given name and icon.
// Example
withTreeConfig.AddContextApp("Comments", "icon-chat", contextAppConfig => {
...
});

Adds a context app with the given name and default icon before the context app with the given alias.
// Example
withTreeConfig.AddContextAppBefore("umbContent", "Comments", contextAppConfig => {
...
});

Adds a context app to the Umbraco menu with the given name and icon before the context app with the given alias.
// Example
withTreeConfig.AddContextAppBefore("umbContent", "Comments", "icon-chat", contextAppConfig => {
...
});

Adds a context app with the given name and default icon after the context app with the given alias.
// Example
withTreeConfig.AddContextAppAfter("umbContent", "Comments", contextAppConfig => {
...
});

Adds a context app to the Umbraco menu with the given name and icon after the context app with the given alias.
// Example
withTreeConfig.AddContextAppAfter("umbContent", "Comments", "icon-chat", contextAppConfig => {
...
});

Sets the alias of the context app.
Optional: When adding a new context app, an alias is automatically generated from the supplied name for you, however you can use the SetAlias method to override this should you need a specific alias.
// Example
contextAppConfig.SetAlias("comments");

Sets the context app icon color to the given color. Possible options are black, green, yellow, orange, blue or red.
// Example
contextAppConfig.SetIconColor("blue");

Changing when a context app is displayed is controlled by a delegate method which is passed a KonstruktContextAppVisibilityContext instance which contains a Source property which holds a reference to the source object that content app is being displayed on (ie, an IContent instance) and a UserGroups collection of the current logged in users user groups. You can use any value from those to return a boolean result which sets whether to display the context app or not.
By default, Konstrukt will pre-filter context apps to only display on the tree it is defined in. This will be combined with the SetVisibility config to decide when to display the context app.

Sets the context app visibility delegate.
// Example
contextAppConfig.SetVisibility(appCtx => appCtx.Source is IContent content && content.ContentType.Alias == "blogPost");

Context apps can consist of one or more collections. If a context app contains multiple collections, the collection list views will be displayed in tabs within the context app.

Adds a collection to the current contect app with the given names and description and default icons. An ID property accessor expression is required so that Konstrukt knows which property is the ID property. A foreign key property accessor is also required so that Konstrukt knows which property holds the Umbraco nodes UDI value. See the Collections documentation for more info.
// Example
contextAppConfig.AddCollection<Comment>(p => p.Id, p=> "Comment", "Comments", "A collection of comments", collectionConfig => {
...
});

Adds a collection to the current context app with the given names, description and icons. An ID property accessor expression is required so that Konstrukt knows which property is the ID property. A foreign key property accessor is also required so that Konstrukt knows which property holds the Umbraco nodes UDI value. See the Collections documentation for more info.
// Example
contextAppConfig.AddCollection<Comment>(p => p.Id, "Comment", "Comments", "A collection of comments", "icon-chat", "icon-chat", collectionConfig => {
...
});
Copy link
Edit on GitHub
On this page
Defining a context app
Changing a context app alias
Changing a context app icon color
Changing when a context app should display
Adding a collection to a context app