Le Giang
Jan 25, 2018
  3766
(11 votes)

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

Comments

Eric
Eric Jan 25, 2018 09:29 AM

Nice work, will try this at once actually :)

Jan 25, 2018 12:11 PM

Awesome / Much needed and awesome again!

This should be included in the CORE product ASAP

valdis
valdis Jan 25, 2018 07:57 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
Son Do Jan 26, 2018 01:57 AM

Very simple and useful (y) 

Great work @Giang

Le Giang
Le Giang Jan 26, 2018 02:30 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
Eric Jan 26, 2018 10:15 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
Arild Henrichsen Jan 26, 2018 02:45 PM

Nice touch! Love these little improvements. 

Alex Do
Alex Do Jan 26, 2018 03:30 PM

Nice, thanks for sharing regarding content type filter.

Antti Alasvuo
Antti Alasvuo Jan 27, 2018 08:47 AM

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

Le Giang
Le Giang Feb 1, 2018 04:47 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
Tai Phan Feb 2, 2018 04:36 AM

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

John Ligtenberg
John Ligtenberg Sep 9, 2022 04:17 PM

Where can this addon be found?

Please login to comment.
Latest blogs
Caching & Rendering of metadata from the DAM

For the EPiServer.Cms.WelcomeIntegration.UI 1.2.0 release, we have facilitated the ability to cache and render metadata from assets within the DAM....

Matthew Slim | Jun 2, 2023

Conversion Rate Optimization: Maximizing ROI through Data-Driven Decisions

In today's digital landscape, businesses are constantly looking for ways to improve their online presence and drive more conversions. One effective...

JessWade | Jun 1, 2023

Enhance Your Writing with Suggestions

Are you tired of staring at a blank screen, struggling to find the right words? The Epicweb.Optimizely.AIAssistant Addon is here to revolutionize...

Luc Gosso (MVP) | May 31, 2023 | Syndicated blog

Content Graph - Letting GraphQL do all the hard work for you

Background As we have seen before, setting up Content Graph on the CMS side is pretty easy. However, when it comes to the “head” part of the setup,...

Kunal Shetye | May 26, 2023 | Syndicated blog