Monday, April 13, 2015

Liferay AUI Char Counter

Liferay AUI Char Counter is one of java script utility or module from AUI Java script.
Some time we may need to count characters and we need to make alert some message when user enters more characters.

Generally we use this character count for SMS message or some other limited text input required then we can use AUI Character Count.

Required AUI module is aui-char-counter and it’s already available in Liferay portal so we simply load whenever we needed. We use AUI use java script function to load the modules.

Sample Code Snippet


<aui:input name="textMessage" id="textMessage" label="Text Message" type="textarea"></aui:input>
<span style=" float: left;">Characters Left&nbsp;</span><p id="<portlet:namespace/>textCounter"></p>
<aui:script>
AUI().use('aui-char-counter', function(A) {
new A.CharCounter({
counter : '#<portlet:namespace/>textCounter',
input : '#<portlet:namespace/>textMessage',
maxLength : 140,
on : {
maxLength : function(event) {
alert('The max length limit was reached');
}
}
});
});
</aui:script>


Portlet Screen


Download Liferay AUI Char Counter Portlet


Complete Code Example

Portlet view page


<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet"%>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme"%>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<style>
.aui .control-group {
margin-bottom: 0px;
}
</style>
<portlet:defineObjects />
<liferay-theme:defineObjects />
<portlet:actionURL var="sendActionURL" windowState="normal" name="getInputData">
</portlet:actionURL>
<h2>Liferay AUI Char Counter Example</h2>
<aui:form action="<%=sendActionURL%>" method="post" name="smsForm">
<aui:input name="textMessage" id="textMessage" label="Text Message" type="textarea">
<aui:validator name="required" />
</aui:input>
<span style=" float: left;">Characters Left&nbsp;</span><p id="<portlet:namespace/>textCounter"></p>
<aui:button type="submit" value="Submit"></aui:button>
</aui:form>
<aui:script>
AUI().use('aui-char-counter', function(A) {
new A.CharCounter({
counter : '#<portlet:namespace/>textCounter',
input : '#<portlet:namespace/>textMessage',
maxLength : 140,
on : {
maxLength : function(event) {
alert('The max length limit was reached');
}
}
});
});
</aui:script>


Reference Links



Popular Posts

Recent Posts

Recent Posts Widget