Search

AEM HUB

Category

JCR

Customizing Granite UI Form Field Component

In this article, I will be showing how to customize a Granite UI Field component with an example.

Use case: Customize the Granite UI Textarea field component to display the number of characters the author has entered in the field.

Granite UI already provided a range of components designed to be used in Touch UI dialogs, and in AEM these form field components are available under /libs/granite/ui/components/foundation/form/*

Every Granite UI Form field component inherits /libs/granite/ui/components/foundation/form/field component.

The Granite UI base field component is composed of three files:

field.jsp: handles the generic processing, labelling, description and calls init.jsp and render.jsp

init.jsp:  provides form value that we will need when rendering the field.

render.jsp: this is where the actual rendering of the field is performed and needs to be overridden for our custom field.

ootb-field-comp

By default all the OOTB Granite UI form components uses the sling:resourceSuperType property to inherit from base field component and overrides the render.jsp.

ootb-textarea-comp

To customize the Textarea component and show the number of characters the author has entered and recommended character count.

Step 1 : overlay or override the OOTB Textarea component into /apps/<project>/<any> folder.

custom-textarea

Step 2 : modify the render.jsp file to show the  recommended character count/no. of characters entered using coral UI character count api below the field.

Ref : https://docs.adobe.com/docs/en/aem/6-1/ref/coral-ui/docs/2.17.0-granite-004/character-count.html

Highlighted is the new code added to the overriden Textarea render.jsp file.

custom-render-jsp

Step3: Assign the custom Textarea component to the dialog field nodes.

custom-field-asign

dialog-char-count

When the maxLength property is set on the field node its shows the assigned max length value else it shows zero.

I have assigned maxLength 20 on short description field and on long description field maxLength property is not set.

shortDesc

longDesc

When the maximum Length has reached it displays error by highlighting the field with red border and the count goes to negative. If the MaxLength is not set then the count will be increased from zero to the number of characters entered.

text-error

Hope this will be useful.:)

Thank you!

Madhu Samala

Write/Read Binary data into/from JCR Node.

Write Binary Data : 

We can use Node API classes ValueFactory and Value to store binary data into JCR. ValueFactory can be used to create Binary object from InputStream and Value object from binary object.

[code language=”java”]

String html = "<html><head></head><body>
<h1>Welcome</h1>
</body></html>";
InputStream stream = new ByteArrayInputStream(html.getBytes(StandardCharsets.UTF_8.name()));

ValueFactory factory = session.getValueFactory();
Binary binary = factory.createBinary(stream);
Value value = factory.createValue(binary);
Node node = // create node object;
node.setProperty("jcr:data", value);
node.getSession().save();

[/code]

Read Binary Data:

[code language=”java”]
ValueMap properties = getProperties();
properties.get("jcr:data", InputStream.class);
html2 = IOUtils.toString(properties.get("jcr:data", InputStream.class), "UTF-8");
[/code]

Example :

[code language=”java”]
package com.demoportal.aem.models.component;
import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.nio.charset.StandardCharsets;
import javax.jcr.Binary;
import javax.jcr.Node;
import javax.jcr.Session;
import javax.jcr.Value;
import javax.jcr.ValueFactory;
import org.apache.commons.io.IOUtils;
import org.apache.sling.api.resource.ValueMap;
import com.adobe.cq.sightly.WCMUsePojo;
public class BinaryJcrData extends WCMUsePojo{
String html2;
@Override public void activate() throws Exception {
/* Write binary data into node */
String html = "<html><head></head><body>
<h1>Welcome</h1>
</body></html>";
InputStream stream = new ByteArrayInputStream(html.getBytes(StandardCharsets.UTF_8.name()));
ValueFactory factory = getResourceResolver().adaptTo(Session.class).getValueFactory();
Binary binary = factory.createBinary(stream);
Value value = factory.createValue(binary);
Node node = getResource().adaptTo(Node.class);
node.setProperty("jcr:data", value);
node.getSession().save();

/* Read Binary data from JCR node */
ValueMap properties = getProperties();
properties.get("jcr:data", InputStream.class);
html2 = IOUtils.toString(properties.get("jcr:data", InputStream.class), "UTF-8");
}
public String getHtml2() {
return html2;
}
}
[/code]

Powered by WordPress.com.

Up ↑