Sunday 6 December 2015

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.
final node





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.

10 comments:

  1. Hi Rajat, can you help us out achieving the same for multi-composite field? Thanks in advance

    ReplyDelete
  2. Hi Krupa, thanks for reading the post,
    You can install project given in at this link to achieve the min and max validation for Multifield in your project
    "https://github.com/nateyolles/aem-touch-ui-validation"
    It has few more validations which you may find usefull

    ReplyDelete
  3. Hi Rajat, is there a way to read the values entered in the textfields under multifield?

    ReplyDelete
    Replies
    1. when do you want to read it? When the dialog is opened?
      Do you want to perform any operation based on the value of the textfield.

      Delete
  4. how to do the same in touch ui

    ReplyDelete
  5. Please follow this https://github.com/nateyolles/aem-touch-ui-validation

    ReplyDelete
  6. Hi,

    if you write the blog for minimum limit please share the link else if you have code for minimum limit please share.

    ReplyDelete
  7. yummyspins merit casino casino【Malaysia】
    yummyspins deccasino merit casino【WG98.vip】⚡,yummypins merit casino,【WG98.vip】⚡,zombie casino,play bingo,jackpot slots 바카라 online,casino 메리트카지노총판 free slots online,hollywood

    ReplyDelete