Page History

...

What is a content app?

Include Page

	DOCS56:_What is a content appDOCS56:
	_What is a content app

See the content app page to know more about content apps.

...

Choose this option if you are new to Magnolia. Download the module JAR and follow the standard module installation instructions. You get the complete content app and can learn how it works.

...

When the app is created, do not forget to export the configuration.

Module contents

...

App configuration

The app is configured in YAML in products.yaml . Equivalent JCR configuration examples are provided below.

App descriptor

Include Page

	DOCS56:_What is an app descriptorDOCS56:
	_What is an app descriptor

...

Localtab Group

Localtab

active	true
title	YAML file

Code Block

language	yaml
title	/app-tutorial/apps/products.yaml

appClass: info.magnolia.ui.contentapp.ContentApp
class: info.magnolia.ui.contentapp.ContentAppDescriptor
subApps:
  browser:
    subAppClass: info.magnolia.ui.contentapp.browser.BrowserSubApp
    class: info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor
    contentConnector:
      includeProperties: false
      workspace: products
      rootPath: /
      defaultOrder: jcrName
      nodeTypes:
        - name: mgnl:product
          icon: icon-items
        - name: mgnl:folder
          icon: icon-folder

Localtab

title	JCR node

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

Node name

Value

Mgnl n

subApps

Mgnl n

browser

Mgnl n

contentConnector

Mgnl n

nodeTypes

Mgnl n

product

Mgnl p

icon

icon-items

Mgnl p

name

mgnl:product

Mgnl n

folders

Mgnl p

icon

icon-folder

Mgnl p

name

mgnl:folder

Mgnl p

defaultOrder

jcrName

Mgnl p

includeProperties

false

Mgnl p

rootPath

/

Mgnl p

workspace

products

Workbench

Include Page

	DOCS56:_What is a workbenchDOCS56:
	_What is a workbench

In this app, the workbench displays two node types: mgnl:folder and mgnl:product.

...

Actions allow you to add, edit and delete folders and products. Each action adheres to an action definition.

Localtab Group

Localtab

active	true
title	YAML file

Code Block

language	yaml
title	/app-tutorial/apps/products.yaml

appClass: info.magnolia.ui.contentapp.ContentApp
class: info.magnolia.ui.contentapp.ContentAppDescriptor
subApps:
  browser:
    subAppClass: info.magnolia.ui.contentapp.browser.BrowserSubApp
    class: info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor
  # contentConnector definition
  # workbench definition
    actions:
      addProduct:
        subAppId: detail
        icon: icon-add-item
        nodeType: mgnl:product
        appName: products
        class: info.magnolia.ui.contentapp.detail.action.CreateItemActionDefinition
        availability:
          root: true
          nodeTypes:
            - mgnl:folder
      addFolder:
        icon: icon-add-folder
        class: info.magnolia.ui.framework.action.AddFolderActionDefinition
        availability:
          root: true
      editFolder:
        icon: icon-edit
        dialogName: ui-framework:folder
        class: info.magnolia.ui.framework.action.OpenEditDialogActionDefinition
      deleteFolder:
        icon: icon-delete
        class: info.magnolia.ui.framework.action.DeleteItemActionDefinition
      editProduct:
        subAppId: detail
        icon: icon-edit
        appName: products
        class: info.magnolia.ui.contentapp.detail.action.EditItemActionDefinition
        availability:
          nodeTypes:
            - mgnl:product
      deleteProduct:
        icon: icon-delete
        class: info.magnolia.ui.framework.action.DeleteItemActionDefinition

Localtab

title	JCR node

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

Node name

Value

Mgnl n

browser

Mgnl n

actions

Mgnl n

addProduct

Mgnl n

availability

Mgnl n

nodeTypes

Mgnl p

folder

mgnl:folder

Mgnl p

root

true

Mgnl p

appName

products

Mgnl p

class

info.magnolia.ui.contentapp.detail.action.CreateItemActionDefinition

Mgnl p

icon

icon-add-item

Mgnl p

nodeType

mgnl:product

Mgnl p

subAppId

detail

Mgnl n

addFolder

Mgnl n

availability

Mgnl p

root

true

Mgnl p

class

info.magnolia.ui.framework.action.AddFolderActionDefinition

Mgnl p

icon

icon-add-folder

Mgnl n

editFolder

Mgnl p

class

info.magnolia.ui.framework.action.OpenEditDialogActionDefinition

Mgnl p

dialogName

ui-framework:folder

Mgnl p

icon

icon-edit

Mgnl n

deleteFolder

Mgnl p

class

info.magnolia.ui.framework.action.DeleteItemActionDefinition

Mgnl p

icon

icon-delete

Mgnl n

editProduct

Mgnl n

availability

Mgnl n

nodeTypes

Mgnl p

product

mgnl:product

Mgnl p

appName

products

Mgnl p

class

info.magnolia.ui.contentapp.detail.action.EditItemActionDefinition

Mgnl p

icon

icon-edit

Mgnl p

subAppId

detail

Mgnl n

deleteProduct

Mgnl p

class

info.magnolia.ui.framework.action.DeleteItemActionDefinition

Mgnl p

icon

icon-delete

Action bar

Include Page

	DOCS56:_What is an action barDOCS56:
	_What is an action bar

Localtab Group

Localtab

active	true
title	YAML file

Code Block

language	yaml
title	/app-tutorial/apps/products.yaml

appClass: info.magnolia.ui.contentapp.ContentApp
class: info.magnolia.ui.contentapp.ContentAppDescriptor
subApps:
  browser:
    subAppClass: info.magnolia.ui.contentapp.browser.BrowserSubApp
    class: info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor
  # contentConnector definition
  # workbench definition
  # actions definition
    actionbar:
      defaultAction: editProduct
      sections:
        - name: root
          groups:
            - name: addActions
              items:
                - name: addProduct
                - name: addFolder
          availability:
            nodes: false
            root: true
        - name: folder
          groups:
            - name: addActions
              items:
                - name: addProduct
                - name: addFolder
            - name: editActions
              items:
                - name: editFolder
                - name: deleteFolder
          availability:
            nodeTypes:
              - mgnl:folder
        - name: product
          groups:
            - name: editActions
              items:
                - name: editProduct
                - name: deleteProduct
          availability:
            nodeTypes:
              - mgnl:product

Localtab

title	JCR node

Advanced Tables - Table Plus

enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

Node name

Value

Mgnl n

browser

Mgnl n

actionbar

Mgnl n

sections

Mgnl n

root

Mgnl n

groups

Mgnl n

addActions

Mgnl n

items

Mgnl n

addProduct

Mgnl n

addFolder

Mgnl n

availability

Mgnl p

nodes

false

Mgnl p

root

true

Mgnl n

folder

Mgnl n

groups

Mgnl n

addActions

Mgnl n

items

Mgnl n

addProduct

Mgnl n

addFolder

Mgnl n

editActions

Mgnl n

items

Mgnl n

editFolder

Mgnl n

deleteFolder

Mgnl n

availability

Mgnl n

nodeTypes

Mgnl p

folder

mgnl:folder

Mgnl n

product

Mgnl n

groups

Mgnl n

editActions

Mgnl n

items

Mgnl n

editProduct

Mgnl n

deleteProduct

Mgnl n

availability

Mgnl n

nodeTypes

Mgnl p

product

mgnl:product

Mgnl p

defaultAction

editProduct

...

Image provider

Include Page

	DOCS56:_What is an image providerDOCS56:
	_What is an image provider

...

Note
We highly recommend using the same `rootPath` in both the detail and browser sub-apps, to benefit from our standard set of actions provided out of the box.

Editor

Include Page

	DOCS56:_What is an editorDOCS56:
	_What is an editor

Node types

...

Copy the configuration nodes of an existing content app into a new app. You can copy one of Magnolia's native apps such as Contacts.
Export the copied configuration nodes into XML.
Open the XML in a text editor. Search and replace the item names. For example, if your app manages apples instead of oranges, replace apple with orange .
Import the XML back to Magnolia.
Register a new workspace in the module descriptor and create a new node type.

...

This method works well if one of Magnolia's native apps does almost what you need. You don't need to change much. Extend the native app to get all its functionality and add something special. For example, configure a special Pages app that displays only one website branch. If editors mostly work in that branch the app saves them from having to navigate there.

Extend an existing app to inherit configuration. For example, see how the JCR Browser app extends the Configuration app by inheriting its subapps.
Define exceptions in your own app.

...

Add activate and deactivate actions so that you can publish products to the public instance. Copy the actions from the Contacts app.
Add the activate and deactivate actions in the action bar. You can copy these also from the Contacts app.
Add a subscription to the products workspace so that public instances receive the content.

...

See how the Contacts app handles this and replicate the actions in your app. See also how the info.magnolia.ui.api.availability.IsNotDeletedRule action availability rule is used in the activate action to make sure that the activatable item is not marked for deletion.

...

You may want to display product images on the website or in a shop. Add a URI2RepositoryMapping for the products workspace. The mapping tells Magnolia to serve content from the products workspace when the request URL contains the /products prefix.

...

Go to Configuration > /server/URI2RepositoryMapping/mappings.

Map the /products URI prefix to the products workspace.

Advanced Tables - Table Plus

multiple	false
enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

Node name

Value

Mgnl f

server

Mgnl n

URI2RepositoryMapping

Mgnl n

mappings

Mgnl n

products

Mgnl p

URIPrefix

/products

Mgnl p

handlePrefix

Mgnl p

repository

products

Activate the products node and its properties to the public instance.
Optional: Grant the anonymous role permission to read the products workspace. This allows visitors to view the images on the public instance.

...

Page tree

Versions Compared

Old Version 1

New Version 2

Key

What is a content app?

Module contents

App configuration

App descriptor

Workbench

Action bar

Image provider

Editor

Node types