Custom Validation for Coral UI 3 Multifield using foundation-validation

In this post, we will write a custom validation for Coral UI3 Multifield resource and for the fields used as part of multifield using foundation-validation and making use of granite:data(common attributes)

Multifield Resource Type : granite/ui/components/coral/foundation/form/multifield
Constraint : Limit the number of multifield items that can be authored
Validation name : multi-validate

Steps for adding validation:
  • Create a folder named  "dialogfieldvalidations" within your project(like one stop place for all custom validations) -> create clientlibs folder of type cq:clientLibraryFolder under the folder created.(categories : cq.authoring.dialog/any other name with inclusion of the same via embeds or per your project clientlib structure)
  • Create script.js file and add code related to all custom validations with js.txt file for including the script.js file
Usage:

  • Create a property named "validation" with the value registered with foundation.validation.validator in script.js file (In this case, multi-validate is used)
  • Create"granite:data" node under multifield node and add additional attributes as properties that might be needed for writing validation logic. (In this case, property named "fieldlimit" is added)
    • Note: it need not always be validation property, we can use granite:class or granite:id as selectors( based on what we want/use for identifying particular resource). Just that using validation seems more appropriate.
    • If field within multifield, say textfield needs to be validated, same can be written and by simply using respective selector on field node will help validate.
Code on Github: Validation Script

Screenshots for reference:
Dialog displaying validation message: (when the field items are added greater than the limit specified)


Validation property on multifield node:


fieldlimit property on granite:data node:



Comments

Post a Comment

Popular posts from this blog

Embedding Third party dependency/OSGi bundle in AEM application hosted in AEMasCS

Image
This post illustrate the ways of embedding third party dependency in AEM maven project. Steps are mentioned considering the project structure to be followed for AEMasCS while the same can be followed for classic versions too.  Before we begin, I would like to explain the scenario of including a dependency in our AEM maven project.  When we would like to make use of an API that is not already available in our project, we look for that in maven-central repository and specify the dependency in main pom.xml and desired module's pom.xml file. (Lets say, AWS S3 Java SDK V2 dependency) Upon updating the project in the IDE, we would see our class files (making use of those APIs) are compiled/build successfully without any errors.  Now, in the context of AEM/OSGi environment, when the same package and hence the bundle is deployed to AEM instance, dependencies that we added new might not be resolved/available in the OSGi as a bundle. Something like the below This indicates that the...
Read more

OSGI Factory Configuration implementation

OSGI Factory configuration is used to have many instances of an OSGI config (represented/identified via an identifier) for the single OSGI service/PID. Most often used OOB Factory configurations for example: Logger Factory/writer configuration (for log statements) Service user Mapper service Amendment (for using service resource resolver in projects) Few sample real time use case for the need of OSGI factory config: For multi tenant projects, if we have generic service used across tenants with properties/attributes specific to tenant. For single tenant, generic service targeting all locales with properties/attributes specific to locale. (where generic service -> holds logic in the lines of calling third party service for retrieving/updating information.) Implementation: ( In terms of OSGI R6 annotations ): Create Object Class Definition(OCD) defining desired properties for the OSGI service. - OSGIFactoryConfigOCD.java OSGI Service/Factory service to retrieve ...
Read more

Embed Third party dependency using bnd-maven-plugin

Image
This post explains the use of bnd-maven-plugin to embed third party dependency  Two main instructions of bnd-maven-plugin that serves the purpose are detailed below.  -conditionalpackage  pick packages from respective library and copy them in the bundle. Any dependencies of those copied packages will also be copied if they match the selectors. This means we need to explicitly list all the Java package names of desired dependency as part of this instruction (including its transitive dependencies) More about conditionalpackage instruction from official docs -  https://bnd.bndtools.org/instructions/conditionalpackage.html -includeresource  For including resource inline -includeresource: @artifactId-version.jar!/* For embedding as a jar with an entry in bundle class path -includeresource: artifactId-version.jar;lib:=true For several other possible combinations for including the resource, please check - https://bnd.bndtools.org/instructions/includeresource.html Wi...
Read more