[MGNLUI-4498] Tune the presentation of the detail subapp form Created: 16/Apr/18  Updated: 25/Jul/18  Resolved: 12/Jul/18

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.0

Type: Story Priority: Neutral
Reporter: Christopher Zimmermann Assignee: Oanh Thai Hoang
Resolution: Fixed Votes: 0
Labels: None
Σ Remaining Estimate: 0d Remaining Estimate: 0d
Σ Time Spent: 12d 6.5h Time Spent: 4.5h
Σ Original Estimate: 5d Original Estimate: Not Specified

Attachments: PNG File decoratedPizzaApp.png     PNG File pizzaAppWithAdvancedConfiguration_item.png     PNG File pizzaAppWithAdvancedConfiguration_root.png     PNG File pizzaAppWithAdvancedConfiguration_subApp.png     PNG File pizzaAppWithMinimumConfiguration_folder.png     PNG File pizzaAppWithMinimumConfiguration_item.png     PNG File pizzaAppWithMinimumConfiguration_root.png    
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLUI-4499 Generate empty Detail subapps from a ... Sub-task Closed Hieu Nguyen Duc  
MGNLUI-4500 Detail subapp's field generation from... Sub-task Closed Ngoc Nguyenthanh  
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Release notes required:
Yes
Documentation update required:
Yes
Date of First Response:
Epic Link: Content types Developer Preview
Sprint: Saigon 149
Story Points: 13

 Description   

User story:

As a Developer, I can tune the presentation of the content type editor independently of the actual data model, so that the editor UI will work the best for my authors

Notes:

("content type editor" is basically the Editor subapp.)

Although we strive for clean separation of data-model and presentation - this should be balanced with ease of development. It could still make sense to configure some presentation aspects in the model. For example the order of the fields - and perhaps location of tabs, etc.

Acceptance criteria:

  • If a developer specifies nothing, the editor UI has a sensible default configuration.
  • Developer can specify which fields go in which tab.
  • Developer can specify which input field to use for a raw type - for example a "select" or a "radio button group". So a way to select which FieldType to use if you want to override the default that the content types system provides.
  • Developer can specify an input type "mask" (email, number, etc) such that html5 entry forms can be used.
  • Developer can choose how many lines an input field has.


 Comments   
Comment by Ngoc Nguyenthanh [ 05/Jun/18 ]

Need to break down into smaller tickets. Provides mockup for the app is great.

Comment by Christopher Zimmermann [ 07/Jun/18 ]

The app is basically just the existing Editor subapp for a normal content-app. - So just a normal form as we know them.

Comment by Christopher Zimmermann [ 12/Jul/18 ]

Can you provide a description or examples of how the acceptance criteria of the story are performed? (could be here as a comment, link to specific documentation, or link to specific code in PR - as long as it is easy to understand.)

Comment by Hieu Nguyen Duc [ 13/Jul/18 ]

Code branches:

+ content-types: https://git.magnolia-cms.com/projects/MODULES/repos/content-types/commits
+ ui: https://git.magnolia-cms.com/projects/PLATFORM/repos/ui/commits?until=refs%2Fheads%2Ffeature%2Fcontent-types&merges=include

Simple app

Given a content type
<light-module>/content-types/contentTypes/pizza.yaml

datasource:
  class: info.magnolia.types.datasource.jcr.JcrDataSourceDefinition
  workspace: cuisine
  namespaces:
    pizza: https://www.magnolia-cms.com/jcr/namespace/pizza/
  nodeTypes:
    - pizza:pepperoni
  autoCreate: true

and this minimum app configuration
<light-module>/content-types/apps/pizzaApp.yaml

!with-type:pizza
name: pizzaApp

A simple app will be generated and have a browser sub app showing mgnl:content by default and simple actions "Add folder", "Rename item", "Publish", "Unpublish", "Import", "Export", "Show versions", etc.

  • !with-type directive references to a content type.
  • name property is not required but recommended because every app should have an identity
    • If name property is absent, content type name will be used as app name

Figures:

Advanced app

Given this content type
<light-module>/content-types/contentTypes/pizza.yaml

datasource:
  class: info.magnolia.types.datasource.jcr.JcrDataSourceDefinition
  workspace: cuisine
  namespaces:
    pizza: https://www.magnolia-cms.com/jcr/namespace/pizza/
  nodeTypes:
    - pizza:pepperoni
  autoCreate: true
model:
  nodeType: pizza:pepperoni
  properties:
    - name: jcrName
      label: jcrName
    - name: recipe
      type: String
    - name: price
      type: Double
    - name: size
      type: Long
    - name: expiryDate
      type: Date

and the simple app configuration
<light-module>/content-types/apps/pizzaApp.yaml

!with-type:pizza
name: pizzaApp

An app will be generated and have browser and detail subapps. The detail subapp has all the fields from model.

Figures:

Decoration and directives

Developer can specify which fields go in which tab, which fieldType and how many lines an input field has.

<light-module>/pizzaAppDecoration/decorations/content-types/apps/pizzaApp.yaml

subApps:
  detail:
    editor:
      form:
        tabs:
          default:
            fields: !override
              - name: jcrName
                type: String
                fieldType: text
          tab2:
            fields:
              - name: price
                type: Double
                fieldType: text
              - name: recipe
                type: String
                fieldType: text
                rows: 2

Figure:

There are many ways to "improve" the generated app.

+ !with-type + !override
+ !inherit + !override
+ Decoration + !override

Comment by Dai Ha [ 16/Jul/18 ]

Verified by generating simple app, complex app and decoration.

Comment by Christopher Zimmermann [ 18/Jul/18 ]

Thanks for the detailed examples and explanation of how it addresses the acceptance criteria, very helpful.

Generated at Mon Feb 12 09:17:12 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.