This concept is based on a working prototype. You can download and try the prototype by following these instructions.

Introduction

Make the Configuration App easier to use by making suggestions when the user is editing the tree and by flagging potential mistakes.

Try It

  1. Download the latest tomcat bundle with autosuggest from Nexus

  2. Try out the features by following these instructions

  3. You can also find additional resources here:

Features

Make suggestions for in-place editing

Suggestions for adding nodes or properties

  • Suggest node and property names when creating new nodes and properties

Suggestions for referencing a dialog

  • Suggest dialog references when entering values for the dialog property of a template configuration

Suggestions for boolean property values

  • Suggest true and false when entering the value of a boolean property

Suggestions for class property value

  • Suggest possible class names when entering value of class property for nodes

Suggestions for extends property value

  • Suggest paths to other nodes when entering value of extends in special circumstances, such as when extending a template, app, or dialog

Suggestions for enum property value

  • Suggest values of enum when entering value of property that is an enum

Suggestions for property type

  • Suggest the type of a property when entering the type

Suggestions for icon names

  • Suggest the names of icons available in the system when entering value of icon property

Suggestion box behavior details

See Autosuggest Development Specification and Test Plan.

Add multiple suggested nodes and properties using a dialog

  • Add an action to the action bar which brings up a light dialog containing all the nodes and properties that can be added under the currently selected node
  • The light dialog should have a display similar to the Move Dialog, with the styling matching the styling of the tree
    • However, we only show the parent node or folder and the existing/potential sub-nodes and sub-properties underneath, indented (we only show one level)
    • There are no expansion triangles
  • After adding, JCR type should be automatically set if only one is suggested, otherwise set as String

Reuse the autosuggest tree in any content app

  • The autosuggest tree is reusable in any content app

  • All the user has to do is implement the AutoSuggester interface which takes the cell of the tree and calculates a list of suggestions

  • Then by telling the content app to use the AutoSuggestTree and the user's own AutoSuggester, the user automatically has a tree that displays the suggestions in a pop-up and marks potential errors

  • Detailed instructions:

    • Set the tree definition class in the workbench of the content app (ex. /modules/ui-admincentral/apps/configuration/subApps/browser/workbench/contentViews/tree@class) to info.magnolia.ui.workbench.autosuggest.AutoSuggestTreePresenterDefinition

    • Create a suggester class that calculates suggestions given the cell in the tree by implementing info.magnolia.ui.api.AutoSuggester

    • Tell the autosuggest tree to use the custom suggester by setting the autoSuggesterClass property (ex. /modules/ui-admincentral/apps/configuration/subApps/browser/workbench/contentViews/tree@autoSuggesterClass)

Questions

  • (question) Icon for action to add nodes to the tree with auto-suggest?

Future Improvements

Highlight mandatory and recommended node and property suggestions (Andreas)

  • Sometimes there are many potential nodes and properties to create. In specific instances, we can highlight the ones that are mandatory or common when making suggestions to the user.

Make suggestions based on similar node structures

  • Similar to the way Excel for example suggests values for a cell in a column based on what has been entered in other cells of the same column, we can suggest values based on values entered for the property in similar node structures.

Automatically set the type of a property when setting its name (Federico)

  • For example, set the type of the property to to boolean in the tree if its corresponding bean member is of type boolean

Use tree in dialog for adding multiple suggested nodes and properties

  • Use a tree rather than a list which would allow creating suggested nodes and properties in subtrees as well

Display help text about nodes and properties that can be added

  • Help text explaining what a node or property represents can be fetched online from JavaDoc and displayed alongside the suggestion

Autosuggest in dialog box fields

  • For example, the edit property dialog is a natural place to have fields with auto-suggest that suggest the same as the tree; this would also make it easier to work on a tablet where in-place tree editing is not available
  • No labels

3 Comments

  1. Federico Grilli

    First of all, congrats - really cool stuff! I quickly tested the autosuggest feature on latest Chrome and Mac OS X 10.8.5. Here's my report

    ERRORS

    •  when you hit keydown to display available options for a node or property already populated, the current value disappears from the suggestion list
      • e.g. /modules/standard-templating-kit/templates/pages/stkForum@visible The visible option disappears from the list
    • /modules/dam/config/contentDisposition/contentType is reported as an error but it shouldn't

    REMARKS

    • config error highlighting could be mistaken for a browser autocorrect alert.

    IMPROVEMENTS

    • would be cool to have a global report somewhere of all current config errors and a link to each of them which would open the config tree view at exact spot needing attention
    • would be nice if when you select an option for the name cell the autosuggest would also automatically complete/guess if possible the value and type cells. 
      • E.g. if you create a new property at /modules/google-sitemap/apps/siteMaps one of the options is enabled. Since this is a boolean, it'd be cool to have a drop down in the value cell with true and false options and the type cell already populated with Boolean value. 

    1. Cheng Hu

      Thanks very much for your feedback. I added many of these points into the concept.

      ERRORS
      • when you hit keydown to display available options for a node or property already populated, the current value disappears from the suggestion list
        • Yes, this is a bug in the prototype. I added it in the "Suggestion box behavior details" section to be fixed.
      • /modules/dam/config/contentDisposition/contentType is reported as an error but it shouldn't
        • Currently suggestions are based on Content2Bean, and there is indeed no contentType node in the bean class info.magnolia.voting.voters.VoterSet or its subclasses for the node. Is there some other way to tell that contentType is a legitimate subnode (question)

      REMARKS

      • config error highlighting could be mistaken for a browser autocorrect alert
        • I agree. I've noted in the questions section and ask UX about it. 

      IMPROVEMENTS

      • would be cool to have a global report somewhere of all current config errors and a link to each of them which would open the config tree view at exact spot needing attention
        • That's one of the additions we would love to make. It is currently noted in the "Future improvements" section. I thought an alternative (which would require less major UI redesign) might be to have an action that expands the tree automatically to show all flagged errors.
      • would be nice if when you select an option for the name cell the autosuggest would also automatically complete/guess if possible the value and type cells
        • I like this idea as well. I added it in the "Future Improvements" section.

      1. Federico Grilli

        Currently suggestions are based on Content2Bean, and there is indeed no contentType node in the bean class info.magnolia.voting.voters.VoterSet or its subclasses for the node. Is there some other way to tell that contentType is a legitimate submode ?

        I guess that if a node has a class property it can be safely assumed that any name for that node is valid.