Implement Character Countdown and Enforce maximum length on textfield xtype CQ5

In this post we will see how to enforce maximum length on the textfield xtype and stop user to enter the text afterwards and implement character countdown which shows how many characters are left as the user type in.

• As we know that CQ5 ships with extjs 3.4.The textfield xtype does have maxLength property which prevents user to submit the longer text than the maximum length defined.But it does so by the validation and doesn't actually stop user to input extra text.
• As there is no support for character countdown in extjs 3.4 in CQ5. We will see how we can leverage the listeners and inlinetextfield xtype to implement character countdown in Dialog.

Our Final output would look like this :

Part 1: Implement Maximum length

Step 1: Create a cq:widget node with name heading with following properties

• name(string) : ./heading
• fieldLabel(string): Heading
• xtype(string): textfield
• enableKeyEvents(string): true    {this property will be used in next part to implement character counter}

Step 2: Create a nt:unstructured node under the node created in step 1 with name listeners with following property

• render(string):

  function(th) {
      th.getEl().dom.maxLength = 50;
  }

NOTE: Above code will set the maximum limit as 50 and afterwards the user would not be able to type in the textfield

Nodes output:

Part 2: Implement Character countdown
To implement character countdown we will use an additional node of xtype inlinetextfield

Step 1: create a cq:widget node with name headingcount with following properties:

• name:(string): ./cc
• defaultValue(string) : Maximum 50 Characters allowed
• xtype(string) : inlinetextfield
• disabled(string) : true

Step 2: Create a nt:unstructured node under the node created in step 1 with name listeners with following property

• loadcontent(string):

function(field) {
    var sub = field.findParentByType("dialog").getField("./heading").getValue().length;
    var newCount = (40 - sub);
    field.setValue(newCount + " " + "characters left");
}

• render(string):

function(field) {
    field.getEl().dom.style.textAlign = "right";
}

Step 3: Add the following properties on the listener node created under step 2 of part 1

• keyup(string):

function(field) {
    var sub = field.findParentByType("dialog").getField("./heading").getValue().length;
    var cc = field.findParentByType("dialog").getField("./cc");
    var newCount = (50 - sub);
    cc.setValue(newCount + " " + "characters left");
}

• keypress(string):

function(field) {
    var sub = field.findParentByType("dialog").getField("./heading").getValue().length;
    var cc = field.findParentByType("dialog").getField("./cc");
    var newCount = (50 - sub);
    cc.setValue(newCount + " " + "characters left");
}

• keydown(string):
  

function(field) {
    var sub = field.findParentByType("dialog").getField("./heading").getValue().length;
    var cc = field.findParentByType("dialog").getField("./cc");
    var newCount = (50 - sub);
    cc.setValue(newCount + " " + "characters left");
}

Nodes output:

Output:

Add limit to the number of elements in Multifield in Dialog

At many times clients come up with the requirement of having limits on the number of items which can be added to the multifield.Since the Extjs library doesn't provide support for applying the limit to the multifield.We will implement the functionality with the help of listeners

Objective:

To create a basic multifield of item type textfield and apply limit to the number of items which can be added to it.We will achieve the requirement by removing the Add item button once the number of items reaches the specified limit.This seems to be an appropriate way to provide the functionality rather giving any message or notification.

Prerequisite:

User should know how to create basic cq components.

Steps:

Step 1:
Let's create a basic multifield xtype node by creating a node of type and node name as list with following properties

• name (string): ./list
• xtype (string): multifield

Step 2:
create a fieldConfig node under the node created in step 1 with node name fieldConfig and type nt:unstructured with the following properties

• xtype (string): textfield
• limit (long): 3 

Above property will be used to configure the max number of items

Step 3:
create a listener node under the node created in step 1 with node name listeners and type nt:unstructured with the following properties

• removeditem (string): 

         function(list) {

      var length = list.items.length;

        if (length <= list.fieldConfig.limit) {

          list.items.items[length - 1].show();

        }

    }

• beforeadd (string): 

    function(list, component, index) {

      var length = list.items.length;

      var addButton = list.items.items[length - 1];

      if (length == list.fieldConfig.limit) {

        addButton.hide();

      }

    }

After completing the above steps the nodes will look like this.






Note: The limit can be configured by just changing the limit in the fieldConfig node

Output.

Lets open the dialog and add items by clicking on Add item button


The Add item button appears with two items as we have not reached to the limit.


The Add item button disappears as the limit has reached


Stay tuned, we will update the post with the functionality for applying minimum limit.
Feel free to provide any suggestions.