Views: 1999
Number of votes: 11
Average rating:

Content type filter when creating a new content

By the default, when you create a new content (page or block), the CreateView view will be displayed and allows you to choose content type for the content is being created. If you have a lot of content types, then the selecting action can get difficult a bit.

Image createview_nofilter.png

This blog will show you how to create "filter function" to quickly narrow content types in the CreateContent view when creating content.

  1. Replace the default CreateContent view by our custom one:
    define([
      "dojo/_base/declare",
      "dojo/aspect",
    
      "epi/_Module",  
      "epi/routes",
      "epi/dependency"
    ], function (
      declare,
      aspect,
    
      _Module,  
      routes,
      dependency
    ) {
      return declare([_Module], {          
        initialize: function () {
          this.inherited(arguments);
    
          this._replaceCreateCommand();
        },
    
        _replaceCreateCommand: function () {
          var widgetFactory = dependency.resolve("epi.shell.widget.WidgetFactory");
          aspect.after(widgetFactory, "onWidgetCreated", function (widget, componentDefinition) {
            if (componentDefinition.widgetType === "epi/shell/widget/WidgetSwitcher") {
              aspect.around(widget, "viewComponentChangeRequested", function (originalMethod) {            
                return function () {              
                  if (arguments[0] === "epi-cms/contentediting/CreateContent") {
                    arguments[0] = "epi-contactmanager/contentediting/CreateContent";
                  }
                  originalMethod.apply(this, arguments);
                };
              });
            }
          }, true);
        }
      });
    });
  2. In the custom CreateContent view, add a search box next to the Name text box, and handle its searchBoxChange event.
    define([
      "dojo/_base/declare",
      "dojo/_base/lang",
      "dojo/_base/array",
      "dojo/aspect",
      "dojo/dom-style",
      "dojo/dom-class",
      "epi-cms/contentediting/CreateContent",
      "epi/shell/widget/SearchBox"
    ], function (
      declare,
      lang,
      array,
      aspect,
      domStyle,
     domClass,
      CreateContent,
      SearchBox
    ) {
      return declare([CreateContent], {
         
          postCreate: function () {
              this.inherited(arguments);
              // search box
              this.own(this._searchBox = new SearchBox({}));
              this._searchBox.placeAt(this.namePanel, "last");
              domStyle.set(this._searchBox.domNode, "width", "auto");
              domClass.add(this.namePanel, "epi-gadgetInnerToolbar");
              this.own(
                this._searchBox.on("searchBoxChange", lang.hitch(this, this._onSearchTextChanged)),
                 
                aspect.before(this.contentTypeList, "refresh", lang.hitch(this, function () {
                    // reset the search box and _originalGroups
                     this._searchBox.clearValue();
                     this._originalGroups = null;
                })),
     
                aspect.after(this.contentTypeList, "setVisibility", lang.hitch(this, function (display) {
                     if (!display) {
                         domStyle.set(this._searchBox.domNode, "display", "none");
                     }                 
                 }), true)
              );
          },
          _onSearchTextChanged: function (queryText) {
              this._originalGroups = this._originalGroups || lang.clone(this.contentTypeList.get("groups"));
              var groupKeys = Object.keys(this._originalGroups);
               
              array.forEach(groupKeys, function (key) {
                  var contentTypes = this._originalGroups[key].get("contentTypes");
                  contentTypes = array.filter(contentTypes, function (item) {
                      return item.name.toLowerCase().indexOf(queryText.toLowerCase()) != -1;
                  });
                  if (!contentTypes.length) {                 
                      domStyle.set(this.contentTypeList.groups[key].domNode, "display", "none");
                  }
                  else {
                      domStyle.set(this.contentTypeList.groups[key].domNode, "display", "");
                      this.contentTypeList.groups[key].set("contentTypes", contentTypes);
                  }             
              }, this);
          }
      });
    });


  3. Enjoy the filtering!

Image createcontent_filtered.png

[Pasting files is not allowed]

Jan 25, 2018

eric.pettersson
(By eric.pettersson, 1/25/2018 10:29:47 AM)

Nice work, will try this at once actually :)

mark.everard
(By mark.everard, 1/25/2018 1:11:09 PM)

Awesome / Much needed and awesome again!

This should be included in the CORE product ASAP

valdis
(By valdis, 1/25/2018 8:57:47 PM)

cool, but as usual I have to troll something :) would be nice to align with search input field used in core product. for instance looking at page search field on the left - icon inside the field is positioned on the left side of the field. would look more consistent across product and add-ons. and will be less to do when epi will merge into core product your addon code :))

Son Do
(By Son Do, 1/26/2018 2:57:03 AM)

Very simple and useful (y) 

Great work @Giang

Le Giang
(By Le Giang, 1/26/2018 3:30:07 AM)

NOTE: This is considered as a hacky-way to extend internal API. I will create an add-on for this featue or you can wait until CMS supports this feature smile.

@Valdis: Good catch! You can add some CSS classes to achive consistent for the search box.

eric.pettersson
(By eric.pettersson, 1/26/2018 11:15:46 AM)

+1 for addon or add it to core product ASAP :) Did trye it yesterday and it did work as great as it looked! 

Arild Henrichsen
(By Arild Henrichsen, 1/26/2018 3:45:04 PM)

Nice touch! Love these little improvements. 

Alex Do
(By Alex Do, 1/26/2018 4:30:00 PM)

Nice, thanks for sharing regarding content type filter.

Antti Alasvuo
(By Antti Alasvuo, 1/27/2018 9:47:49 AM)

Nice,+1 to add it to the core product.

Le Giang
(By Le Giang, 2/1/2018 5:47:45 AM)

I have updated the code to fix the search box's appearance according to @Valdis comments! Now it looks more consistent and features a clear text icon button.

Tai Phan
(By Tai Phan, 2/2/2018 5:36:54 AM)

So useful with project that many content type, Thanks Le Giang

Please login to comment.