Liferay Portlet that captures input parameters and calls a Service

[Moritz Roedel, modificado 10 Anos atrás.]

Dear Liferay Community,

I am trying to develop a very simple portlet which does the following:

1. Capture one (or many) input parameters from a field (or multiple fields) in the portlet
2. Upon pressing a button (ie "submit") call an existing Service and pass the parameter(s) on to the Service

Sounds simple enough but I just cannot find any examples on how to do this.
I can do this with HTML no problem, for example:

					<form method="POST" action="SERVICE URL HERE" onSubmit="">

					<table border="0" cellspacing="0" cellpadding="0" align="center">
					<tbody><tr>

						<td colspan="2">
							<table border="0" cellspacing="0" cellpadding="0" width="350">
							<tbody><tr>
								<td class="normaltext" style="padding:6px;">
									<ul style="font-size:11px;list-style-position:outside; list-style-type:square;">
																		</ul>
								</td>
							</tr>
							</tbody></table>
						</td>
					</tr>
					<tr>
						<td class="normaltext" style="padding-left:5px;" align="right">Parameter 1:&nbsp;</td>
						<td class="normaltext" align="left">
							<input type="text" name="Param1" class="textfield" maxlength="10">
							
						</td>
					</tr>
<tr>
						<td class="normaltext" style="padding-left:5px;" align="right">Parameter 2:&nbsp;</td>
						<td class="normaltext" align="left">
							<input type="text" name="Param2" class="textfield" maxlength="10">
							
						</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td align="left" style="padding:5px;">
            <input type="submit" value="submit" alt="submit">
            </td>
					</tr>
					</tbody></table>

			

				</form>

How can do something simple like that within a Liferay portlet?

Many thanks in advance for your feedback it is much appreciated!

[Zsigmond Rab, modificado 10 Anos atrás.]

Hi Moritz,

are you wondering about how to handle requests according to the Portlet Specification? Then the best if you get familiar with the specification itself at first.

In addition, you can find several example plugin for Liferay on GitHub (simple sign in portlet; a sample for using Service Builder)

Regards,
Zsigmond

[Moritz Roedel, modificado 10 Anos atrás.]

I appreciate the answers thus far but could someone maybe post a portlet code example that does what my html code above does?

[Moritz Roedel, modificado 10 Anos atrás.]

Hi again,

I have played around a bit and created the following portlet (.jsp) page based on the "edit.jsp" from the "My-Greeting" tutorial:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>



<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>



&lt;%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %&gt;

&lt;%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %&gt;

&lt;%@ page import="javax.portlet.PortletPreferences" %&gt;

<portlet:defineobjects />

&lt;%

PortletPreferences prefs = renderRequest.getPreferences();
String Temperature = (String)prefs.getValue("Temperature","Temperature");

PortletPreferences prefs2 = renderRequest.getPreferences();
String FromUnit = (String)prefs2.getValue("FromUnit", "FromUnit");

PortletPreferences prefs3 = renderRequest.getPreferences();
String ToUnit = (String)prefs3.getValue("ToUnit","ToUnit");



%&gt;



<portlet:renderurl var="editGreetingURL">

    <portlet:param name="jspPage" value="/edit.jsp" />

</portlet:renderurl>

<aui:form action="http://www.webservicex.net/ConvertTemperature.asmx/ConvertTemp" method="post">

    <aui:input label="Temperature" name="Temperature" type="text" value="<%= Temperature %>" />
	<aui:input label="FromUnit" name="FromUnit" type="text" value="<%= FromUnit %>" />
	<aui:input label="ToUnit" name="ToUnit" type="text" value="<%= ToUnit %>" />
    <aui:button label="submit" type="submit" value="Submit" />

</aui:form>

<portlet:renderurl var="viewGreetingURL">

    <portlet:param name="jspPage" value="/view.jsp" />

</portlet:renderurl>

<p><a href="<%= viewGreetingURL %>">Back</a></p>

This portlet is supposed to take 3 input parameters: Temperature, FromUnit and ToUnit and then pass them on to a public WebService which converts Temperatures for example from Fahrenheit to Celcius (see http://www.webservicex.net/ConvertTemperature.asmx?WSDL) .

The portlet renders the input fields correctly and when I click the submit button it also tries to execute the Webservice but it doesn't actually pass on the parameters it seems because I get the following error response from the WebService itself:

System.InvalidOperationException: Missing parameter: Temperature.
at System.Web.Services.Protocols.ValueCollectionParameterReader.Read(NameValueCollection collection)
at System.Web.Services.Protocols.HtmlFormParameterReader.Read(HttpRequest request)
at System.Web.Services.Protocols.HttpServerProtocol.ReadParameters()
at System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()

So even though my portlet has the input field Temperature it doesn't seem to actually pass it on and attach it to the action URL in the post ...

Can someone please tell me what I am doing wrong here? What am I missing?

[Moritz Roedel, modificado 10 Anos atrás.]

One more thing, I replaced the "post" with a "get" and the URL string looks like this:


http://www.webservicex.net/ConvertTemperature.asmx/ConvertTemp?_mygreeting_WAR_mygreetingportlet_formDate=1377389917227&_mygreeting_WAR_mygreetingportlet_Temperature=30&_mygreeting_WAR_mygreetingportlet_FromUnit=degreeFahrenheit&_mygreeting_WAR_mygreetingportlet_ToUnit=degreeCelsius


What am I doing wrong here? Clearly it seems to be passing on the wrong parameters...

[Zsigmond Rab, modificado 10 Anos atrás.]

Hi Moritz,

from you description, I guess, you want to send the parameters to a web service. Am I right? If so, then you need to send the parameters on that way how that web service needs. The question is, which type of web service is that? I think, it's not the right format to send parameters with portlet namespaces.

Regards,
Zsigmond

[Moritz Roedel, modificado 10 Anos atrás.]

Hello Zsigmond,

many thanks for your response.
Yes I am trying to send 3 parameters (temperature, fromUnit, toUnit) to publically available web service that converts temperatures (see above) .

It is an .asmx WebService that supports HTTP Post so why does this not work?

what do you mean it isn't the right format?

[Ahmed Hasan, modificado 10 Anos atrás.]

Hi Mortiz,

The simple example i have given in chapter 4 of my book will be apt to make your understanding clear. You can download a copy of the eBook and read through it to understand the portlet concepts well.

Yours truly,
Ahamed Hasan
Author, Liferay Portlet Cookbook

[Moritz Roedel, modificado 10 Anos atrás.]

Dear Ahamed,

I just read chapter 4 of your book, however it still doesn't provide me with the answer I am looking for.
Your example talks about calling a method in a separate .java file (updateBook) ... that's not what I am trying to do.

I have a WebService which I want to pass parameters too. I read somewhere that the problem is that I am using AlloyUI forms which results in the POST automatically adding the portlet namespace to the parameters...

Is what I am trying to do just not possible?

Could someone please show me some sample code of a portlet passing parameters to this external WebService that I mentioned above (ConverTemperature) ?

I am afraid pointing me to other examples that do something completely different won't help me

[Moritz Roedel, modificado 10 Anos atrás.]

Hi again,

This is what I got so far, here is my portlet page:

    
    
        <meta charset="utf-8">
        <title>Demo</title>
    
    
    	
        
        <script src="http://localhost:8080/my-greeting-portlet/jquery.js"></script>
        <script type="text/javascript" src="http://localhost:8080/my-greeting-portlet/js/script.js"></script>
       
    
    
    &lt;%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %&gt;
    
    
    
    &lt;%@ page import="javax.portlet.PortletPreferences" %&gt;
    
    <portlet:defineobjects />
    &lt;%
    
    PortletPreferences prefs = renderRequest.getPreferences();
    String Temperature = (String)prefs.getValue("Temperature","Temperature");
    
    PortletPreferences prefs2 = renderRequest.getPreferences();
    String FromUnit = (String)prefs2.getValue("FromUnit", "FromUnit");
    
    PortletPreferences prefs3 = renderRequest.getPreferences();
    String ToUnit = (String)prefs3.getValue("ToUnit","ToUnit");
    
    
    
    %&gt;
    
    
    
    <portlet:renderurl var="editGreetingURL">
    
        <portlet:param name="jspPage" value="/edit.jsp" />
    
    </portlet:renderurl>
    
    
    <div id="contact_form">  
    <form name="callWebService" id="callWebService" action="">
     <fieldset> 
     	<label for="Temperature" id="Temperature_label">Temperature </label>  
        <input type="text" name="Temperature" id="Temperature" size="30" value="" class="text-input">  
        <label class="error" for="Temperature" id="Temperature_error">This field is required.</label>
        <br>  
        
        <label for="FromUnit" id="FromUnit_label">From unit  </label>  
        <input type="text" name="FromUnit" id="FromUnit" size="30" value="" class="text-input">  
        <label class="error" for="FromUnit" id="FromUnit_error">This field is required.</label>
        <br>  
        
        <label for="ToUnit" id="ToUnit_label">To Unit    </label>  
        <input type="text" name="ToUnit" id="ToUnit" size="30" value="" class="text-input">  
        <label class="error" for="ToUnit" id="ToUnit_error">This field is required.</label>  
          
        <br>  
        <input type="submit" name="submit" class="button" id="submit_btn" value="submit">  
      </fieldset>  
    </form>  
    </div>  
    
    
    
    

And here is the jquery code:

    $(function() {  
      $('.error').hide();  
      $(".button").click(function() {  
        // validate and process form here  
    	var dataString = $("#callWebService").serialize();  
    	// alert (dataString);return false;  
    	$.ajax({  
    	  type: "POST",  
    	  url: "http://www.webservicex.net/ConvertTemperature.asmx/ConvertTemp",  
    	  data: $("#callWebService").serialize(), 
    	  success: function() {  
    	    $('#contact_form').html("<div id="message"></div>");  
    	    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    	    .append("<p>We will be in touch soon.</p>")  
    	    .hide()  
    	    .fadeIn(1500, function() {  
    	      $('#message').append("<img id="checkmark" src="images/check.png">");  
    	    });  
    	  }  
    	});  
    	return false;   
    	  
    	  
    	  
        $('.error').hide();  
          var Temperature = $("#Temperature").val();  
            if (Temperature == "") {  
          $("#Temperature_error").show();  
          $("#Temperature").focus();  
          return false;  
        }  
            var FromUnit = $("input#FromUnit").val();  
            if (FromUnit == "") {  
          $("label#FromUnit_error").show();  
          $("input#FromUnit").focus();  
          return false;  
        }  
            var ToUnit = $("input#ToUnit").val();  
            if (ToUnit == "") {  
          $("label#ToUnit_error").show();  
          $("input#ToUnit").focus();  
          return false;  
        }  
          
      });  
    });  

Everything seems to be working, or at least I do not get errors but it seems that this part of the code is completely ignored:

success: function() {  
    	    $('#contact_form').html("<div id="message"></div>");  
    	    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    	    .append("<p>We will be in touch soon.</p>")  
    	    .hide()  
    	    .fadeIn(1500, function() {  
    	      $('#message').append("<img id="checkmark" src="images/check.png">");  
    	    });  

When I press the "submit" button nothing happens. No redirection to the webservice URL (good) but also the custom message defined above does not show up (bad). The screen remains exactly as it is.

I did uncomment the "alert" in the jquery code and the parameters are definitely picked up correctly it just seems like nothing happens with them?

Is this because the webservice URL returns a response that overwrites my message or something like that?

Again, many thanks for looking at this, it is much appreciated!