Tuesday 29 November 2016

Input type only numbers(html5)

<input name="termsAndConditionsArticleId" value="${programDetailsForm.termsAndConditionsArticleId}" type="text"  pattern="^[0-9]*$" placeholder="Enter Digits only" title="Please enter numeric value only"/>


Increment & Decrements Hidden
<style>
input[type=number] {
    -moz-appearance:textfield;
}
</style>

Wednesday 16 November 2016

Using Liferay Services in VM using ServiceLocator

When developing custom themes, we need to use Liferay services in VM. Its quite easy but tricky. So, putting here a simple example-
Write following in init-custom.vm

#set($organizationLocalService = $serviceLocator.findService("com.liferay.portal.
service.OrganizationLocalServiceUtil" )

Now you can use this service as follows:

#set ($org = $organizationLocalService.getOrganization($myPlace.getClassPK($myPlace.getClassPK()))

   

Getting Youtube Video Thumbnail image

<!--  This is for sample test code  -->

  <script type="text/javascript"> function getScreen( url, size ) {
if(url === null){
return "";
}
size = (size === null) ? "big" : size;
var vid;
var results;

results = url.match("[\\?&]v=([^&#]*)");
vid = ( results === null ) ? url : results[1];
if(size == "small"){
return "http://img.youtube.com/vi/"+vid+"/2.jpg"; }
else {
return "http://img.youtube.com/vi/"+vid+"/0.jpg"; }
}
</script>

 <%
  String url = "http://www.youtube.com/watch?v=E88uMNtPjvw";
 %>
<script type="text/javascript">

var imgUrl_small = getScreen("<%=url%>",'small');

 alert("this is image Url :"+imgUrl_small);

document.write('<img src="' + imgUrl_big + '" />');
document.write('<img src="' + imgUrl_small + '" />');

</script>

I hope its usefully for you..

Vm file image src

Explanation: In this we just have a scenario , that how we can display an image using liferay_portal.vm.In this docroot, under docroot dff folder is there placed any image in image folder.
then open the liferay-portal.vm and put this code


                                          $images_folder                                               

                     <img src="$images_folder/image.png">


here $image_folder means _dff/image
image.png is the image that we have to display.


Friday 4 November 2016

Liferay, Reset Admin password.

If you forget or lose your Liferay Admin user and have access to your Liferay Schema / Database, you can execute the below query to reset your password.

Note: You will have to restart the server for the changes to take place.
 

UPDATE 
  user_ 
SET 
  password_ = '1234',
  passwordEncrypted = '0',
  passwordReset = '1',
  status = 0 
WHERE 
  emailaddress = 'test@liferay.com';
 
password_ is the new password that you are setting. You can use this to log in with the Admin credentials.
emailaddress should be the email Address of the Admin User.

jQuery Datepicker project


I had created a simple jQuery datepicker plugin couple of months back, just wanted to share it.

The plugin converts any input box to a 3 drop down date picker. It gets the name of the input element and attaches a Day, Month and Year respectively. You can access the original field to retrieve the date which will, by default, be in the format yyyy/mm/dd.

So, for example, if your input fields name was dob, then, to retrieve the value for the day, you would use dobDay. For the month it would be dobMonth and year with dobYear. For all event handlers, you will need to use the new name that will be generated.

Find the example JSFiddle link below.
JSFiddle - jQuery Datepicker

Datepicker Source File
Complete Source, (jquery.datepicker.js)

Below is the minified JS file for the datepicker. Copy this to a JavaScript file and include it in the page.
Minified file, (jquery.datepicker.min.js)

Supported Parameters:

startDate: JavaScript Date object to restrict the user to a specific Start date.
endDate: JavaScript Date object to restrict the user to a specific End date.
dateFormat: a function takes (day, month, year) as parameters and that returns a string that will be used to fill the hidden input box.


Usage:
HTML
 

<body>
    <input type="text" name="dob" id="dob" />
</body>

Javascript Code
 

$(function () {
    $('#dob').datepicker();

    // Example: Create 'onChange' handlers.
    $('#dobMonth').on('change', function () {
        alert($(this).val());
    });

    // Example: Display the String value on changin the date.
    $('#dobDay, #dobMonth, #dobYear').on('change', function () {
        alert($('#dob').val());
    });
});

Using the "liferay-ui:input-date" tag


Just a simple example to use the liferay-ui:input-date tag in our forms.

1. Firtly we need to import the required tag.
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

2. If you need to show the default selected date as Today. We need a Calendar object to get these values for our form.
<%
// To set today's date as default for the calendar.
Calendar today = Calendar.getInstance();
%>

3. Now for the actual form. The Liferay UI Date element is created here with the necessary parameters.
<label>
    Date of Birth
    <liferay-ui:input-date name="dobDate" 
        dayValue="<%= today.get(Calendar.DAY_OF_MONTH) %>" dayParam="dobDay"
        monthValue="<%= today.get(Calendar.MONTH) %>" monthParam="dobMonth"
        yearValue="<%= today.get(Calendar.YEAR) %>" yearParam="dobYear" />
</label>
The dayValue, monthValue and yearValue attributes are displayed to the user as soon as the form is loaded.
dayParam, monthParam and yearParam are the attributes representing the data when it is sent to the server side.
I have also set the name attribute which will send the selected date in MM/dd/yyyy format to the server.

4. Now for the server side, to retrieve the data from the user. This is the first way to fetch the data, below I have provided another way to do the same.
// Method 1
// We can fetch the date either by separate Day, Month and Year parameter.
int dobDay = ParamUtil.getInteger(actionRequest, "dobDay");
int dobMonth = ParamUtil.getInteger(actionRequest, "dobMonth");
int dobYear = ParamUtil.getInteger(actionRequest, "dobYear");

Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.DAY_OF_MONTH, dobDay);
calendar.set(Calendar.MONTH, dobMonth);
calendar.set(Calendar.YEAR, dobYear);

System.out.println("Method 1: " + calendar.getTime());
In our Portlet class, the dobDay, dobMonth and dobYear will provide the Day, Month and Year respectively. We can set this to a Calendar object and retrieve the Date object with the calendar.getTime() method.

5. Now for method 2.
// Method 2
// With the input String from the selected date.
try {
    String dobDateString = ParamUtil.getString(actionRequest, "dobDate");
    SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy");
    Date dobDate = sdf.parse(dobDateString);

    System.out.println("Method 2: " + dobDate);
}
catch (ParseException pe) {
    pe.printStackTrace();
}
Here we'll use the name parameter to fetch the same value. Using the SimpleDateFormat to parse the string we can retrieve the Date object.