# Content Apps

[Umbraco Content Apps](https://docs.umbraco.com/umbraco-cms/extending/content-apps) can be configured to appear alongside forms in the Umbraco Forms backoffice section.

They will appear after the default "Design" and "Settings" apps when editing a form in the backoffice:

![Umbraco Forms Content App](/files/E5G7bgJegjLLr3fl9s5S)

A content app such as the following would display only in the forms section:

```csharp
    public class TestFormsContentApp : IContentAppFactory
    {
        public ContentApp GetContentAppFor(object source, IEnumerable<IReadOnlyUserGroup> userGroups)
        {
            // Only show app on forms
            if (source is FormDesign)
            {
                return new ContentApp
                {
                    Alias = "testFormsContentApp",
                    Name = "Test App",
                    Icon = "icon-calculator",
                    View = "/App_Plugins/TestFormsContentApp/testformscontentapp.html",
                    Weight = 0,
                };
            }

            return null;
        }
    }
```

Within the `/App_Plugins/TestFormsContentApp/` folder we need the client-side files, for which an example is shown below:

`package.manifest`:

```json
{
    "contentApps": [
    {
        "name": "Test Forms Content App",
        "alias": "TestFormsContentApp",
        "weight": 0,
        "icon": "icon-calculator",
        "view": "~/App_Plugins/TestFormsContentApp/testformscontentapp.html",
        "show": [
            "+content/*",
            "+media/*",
            "+member/*",
            "+forms/*"
        ]
    }
    ],
    "javascript": [
        "~/App_Plugins/TestFormsContentApp/testformscontentapp.controller.js"
    ]
}
```

`testformscontentapp.html`:

```html
<div ng-controller="My.TestFormsContentApp as vm">
    <umb-box>
        <umb-box-header title="Forms Content App"></umb-box-header>
        <umb-box-content>
            <p>Current form: <b>{{vm.formName}}</b></p>
        </umb-box-content>
    </umb-box>
</div>
```

`testformscontentapp.controller.js`:

```js
angular.module("umbraco")
    .controller("My.TestFormsContentApp", function ($routeParams, formResource) {
        var vm = this;
        formResource.getWithWorkflowsByGuid($routeParams.id)
            .then(function (response) {
                vm.formName = response.data.name;
            });
    });
```

Finally, it needs to be registered via a composer:

```csharp
    public class TestSiteComposer : IComposer
    {
        public void Compose(IUmbracoBuilder builder)
        {
            builder.ContentApps().Append<TestFormsContentApp>();
       }
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-forms/13.latest/developer/contentapps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.