If you are an SAP Portal application developer, you must have come across scenarios where in you want to apply javascript functionalities (for example, client side validation) in your Portal application. Things will be even more interesting if you can make use of some well known javascript libraries like JQuery. My intention behind writing this blog is to give an overview on how to use Javascript and Javascript libraries in SAP Portal applications.
Scenario:
You have been asked to develop an a web application in SAP Portal which has controls like Inputfield, Dropdown and radiobuttons, which need to be validated from client side before server roundtrip
. If validation fails, form should display inline error message (message below the field where in validation is failed)
Technical Requirements:
Basic knowledge of Java/J2EE
Basic Javascript knowledge
Using UI controls in JspDynpage
Jquery library (Can be dowloaded from http://jqueryui.com/)
Steps:
1. Create a Portal Project by selecting New -> Project-> Portal Application. Give Project name as Test_JQuery
2. Create JSPDynpage component with jsp file Test.jsp
3. Include the following in portalapp.xml within <application> tag to make sure the jspdynpage tags are working fine
<application-config>
<property name="SharingReference" value="com.sap.portal.htmlb"/>
<property name="PrivateSharingReference" value="com.sap.portal.htmlb"/>
</application-config>
4. Make HTMLB controls visible to jsp using the following include statement in Test.jsp file
<%@ taglib uri= "tagLib" prefix="hbj" %>5. Copy jquery javascript library (jquery.dataTables.min.js which can be downloaded from jquery site) to the scripts folder within dist folder
6. Declare java variable for accessing resources within the project
<%
String webpath=componentRequest.getWebResourcePath();
%>
7. Include jquery library in Test.jsp file
<script type="text/javascript" src="<%=webpath%>/scripts/jquery-1.6.2.min.js">
</script>
8. Write code to include Dropdown in Test.jsp using HTMLB
<hbj:content id="myContext">
<hbj:page title="PageTitle">
<hbj:form id="myFormId" > Profile:
<hbj:dropdownListBox id="Test_List" tooltip="Test"
nameOfKeyColumn="KeyCol" nameOfValueColumn="KeyVal" jsObjectNeeded = "true"
onSelect = "dynPageMethod" onClientSelect = "validateValues()">
<%
for(int i=0; i<5;i++)
{
String key = ""+i;
String valueToDisplay = "Test"+" - "+i;
%>
<hbj:listBoxItem key="<%=key%>" value="<%=valueToDisplay%>"/>
<% }
</hbj:dropdownListBox>
<br>
<label id = "Info_DD" class = "Info"></label>
</hbj:form >
</hbj:page> </hbj:content>
Here, jsObjectNeeded = "true" makes sure that required scripts for HTMLB dropdwon is generated so that it can be accessed using javascript.
onSelect = "dynPageMethod" invokes dynPageMethod event handler defined in the Dynpage java class for any server side validation/operations onClientSelect = "validateValues()" invokes the javascript method where we can do the validation of dropdown using Javasript and jquery
9. Implementation of validateValues() javascript method:
function validateValues()
{
var funcName = htmlb_formid+"_getHtmlbElementId";
func = window[funcName];
var var1 = eval(func("Test_List"));
var prof_ID = "#"+var1.id;
var prof_Index = var1.getIndex();
if(prof_Index == 0)
{
$("#Info_DD").text("*Please select a value");
$("#Info_DD").show();
htmlbevent.cancelSubmit=true;
}
else
{
$("#Info_DD").hide();
}
}
First four lines gives reference for accessing dropdown from javascript. Based on the selction made by user, message will be displayed in the form by setting the validation message to the label field (with ID Info_DD) using jquery.
>For Input field, validation is done using val() method in place of getIndex() as follows
if($(inp_ID).val() == null || $(inp_ID).val() == "")
{
$("#Info_InpField").text("*Please enter a value");
$("#Info_InpField").show();
htmlbevent.cancelSubmit=true;
}
Here, inp_ID is the ID of input field and Info_InpField is the ID of validation message field for the Input field
>Radio button validation can be done using getChecked() method like this:
if(!var2_RB.getChecked())
{
$("#Info_RB").text("*Please choose one value");
$("#Info_RB").show();
htmlbevent.cancelSubmit=true;
}
In order to make sure the validation labels are cleared when the form is loaded,
$(document).ready(function()
{
$("#Info_DD").hide();
$("#Info_InpField").hide();
$("#Info_RB").hide();
});
Thats all!!!!!!!!. We are done with using simple jquery technique in validating jspDynpage Controls using JQuery.
PS: Here I have used very basic jquery scripts for accessing Portal form controls. Moreover in the realworld scenario, scripts will be written in a seperate .js file and included in the jsp file. Hope this will serve as a headstart to explore more on Jquery with Portal developments. Please let me know your queries/suggestions. Enjoy programmiing. All the best!!!
