Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

Le Giang
Jan 25, 2018
  4581
(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
Remove a segment from the URL in CMS 12

Problem : I have created thousands of pages dynamically using schedule jobs with different templates (e.g. one column, two columns, etc..) and stor...

Sanjay Kumar | Jun 21, 2024

Copying property values part 2

After publishing my last article about copying property values to other language versions, I received constructive feedback on how could I change t...

Grzegorz Wiecheć | Jun 18, 2024 | Syndicated blog

Enhancing online shopping through Optimizely's personalized product recommendations

In this blog, I have summarized my experience of using and learning product recommendation feature of Optimizely Personalization Artificial...

Hetaxi | Jun 18, 2024

New Series: Building a .NET Core headless site on Optimizely Graph and SaaS CMS

Welcome to this new multi-post series where you can follow along as I indulge in yet another crazy experiment: Can we make our beloved Alloy site r...

Allan Thraen | Jun 14, 2024 | Syndicated blog