Web Dynpro Interactive Forms Data Transfer and Scripting

Transcription

1 Web Dynpro Interactive Forms Data Transfer and Scripting Applies to: Webdynpro Java Development, Adobe Interactive forms, SAP NetWeaver 2004s. For more information, visit the User Interface Technology homepage. Download the source code from here Summary In this tutorial you can learn how the data transfer between Webdynpro form and Adobe Interactive form and scripting in adobe interactive form. Author: Naga Raju Meesala Company: Robert Bosch Engineering and Business Solutions Ltd. Created on: 01 September 2008 Author Bio Naga Raju Meesala works as a SAP EP consultant in BOSCH Group. His main responsibilities are the Development of Webdynpro for Java components and integration with the SAP NetWeaver Portal and Portal customization 2008 SAP AG 1

2 Table of Contents Introduction...3 Development of Webdynpro Application...5 Developing CalcView...6 Implementing the Code...8 Creating Calculator Adobe Form...11 Deploy...17 Related Content...17 Disclaimer and Liability Notice SAP AG 2

3 Introduction This application explains you about the data transfer between interactive form and Webdynpro UI Elements and focusing on scripting in Interactive forms. Concepts: Adobe Integration in Webdynpro Scripting in adobe forms Data transfer to interactive forms Adobe form Report generation It s a sample application used to prepare the salary form. The Webdynpro form contains some data fields. Once the user clicks on calculate button, it opens adobe form and passes the value from respective input field to adobe form that contains a calculator, which receives the value. You can do all operations in the adobe form calculator. Pressing submit button will generate the salary report. Some of the calculation made through calculator for calculating salary components. Developing a calculator in Webdynpro is not a great deal, to avoid server round trips I had planned to develop the calculator using java script in adobe form (to demonstrate scripting in adobe form). For that we need to transfer data between Webdynpro form and calculator and vice versa. When user presses the submit button, data is sent to the respective input field of the Webdynpro form. The calculator seems like this 2008 SAP AG 3

4 And the Report Generated by the form looks like this SAP AG 4

5 Development of Webdynpro Application Let s start developing the Webdynpro application. The Webdynpro project structure look like this Webdynpro Project: AdobeCalculator Webdynpro Application: Calc Webdynpro component: Calc Window: Calc View: CalcView 2008 SAP AG 5

6 Developing CalcView Creating Context: Open the CalcView and create the context look like this Define Actions: Create below actions in Action tab 1. FormSubmit() 2. OpenCalculator (String id), create a parameter id of type String. SubmitCalculator(); 2008 SAP AG 6

7 Developing View: Insert a group apply template select context node EmpForm Insert two Interactive Form UI Elements. Insert 6 Buttons as shown in the group container named (CalculateBasic, CalculateHRA, CalculateLTA, CalculateAllowance, CalculateBenefits, and CalculateAnnumSalary) Assign Action OpenCalculator to all 6 buttons. Create one more button named submit and assign action submitform. Arrange the UI Elements as shown in below image Layout of RootUIElementContainer is Grid layout and colcount=2. Set CalculatorForm UI Element Properties datasource= CalculatorValue pdfsource= pdfobject visible= CalculatorVisible height=500 width=500 and assign Action submit= submitcalculator Set ReportInteractiveForm UI Element Properties datasource= EmpForm pdfsource= pdfobject SAP AG 7

8 Implementing the Code visible= submitformvisible height=500 width=500. Open the Implementation of CalcView Declare two global variables others String calcstr=null; IWDMessageManager message=null; Implement the wddoinit () public void wddoinit() { //@@begin wddoinit () wdcontext.currentcalculatorvalueelement().setvalue(0); message=wdcomponentapi.getmessagemanager(); wdcontext.currentcontextelement().setcalculatorvisible(wdvisibility.none); wdcontext.currentcontextelement().setsubmitformvisible(wdvisibility.none); //@@end Implementation wddomodifyview() to get the id of the button pressed to open the calculator //@@begin wddomodifyview if(firsttime){ IWDButton butcalculatebasic=(iwdbutton)view.getelement("calculatebasic"); ; butcalculatebasic.mappingofonaction().addparameter("id",butcalculatebasic.getid()) IWDButton butcalculatehra=(iwdbutton)view.getelement("calculatehra"); butcalculatehra.mappingofonaction().addparameter("id",butcalculatehra.getid()); IWDButton butcalculatelta=(iwdbutton)view.getelement("calculatelta"); butcalculatelta.mappingofonaction().addparameter("id",butcalculatelta.getid()); IWDButton butcalculateallowance=(iwdbutton)view.getelement("calculateallowance"); butcalculateallowance.mappingofonaction().addparameter("id",butcalculateallowance. getid()); IWDButton butcalculatebenefits=(iwdbutton)view.getelement("calculatebenefits"); 2008 SAP AG 8

9 butcalculatebenefits.mappingofonaction().addparameter("id",butcalculatebenefits.ge tid()); IWDButton butcalculateannumsalary=(iwdbutton)view.getelement("calculateannumsalary"); butcalculateannumsalary.mappingofonaction().addparameter("id",butcalculateannumsal ary.getid()); Implement the onactionsubmitcalcultor() This method assigns adobe form returned value to the respective UI Element. onactionsubmitcalculator(serverevent) float f=wdcontext.currentcalculatorvalueelement().getvalue(); if(calcstr.equals("hra")) wdcontext.currentempformelement().sethra(f); else if(calcstr.equals("lta")) wdcontext.currentempformelement().setlta(f); else if(calcstr.equals("spl")) wdcontext.currentempformelement().setsplallowance(f); else if(calcstr.equals("otb")) wdcontext.currentempformelement().setotherbenefits(f); else if(calcstr.equals("spa")) wdcontext.currentempformelement().setsalaryperannum(f); else if(calcstr.equals("bas")) wdcontext.currentempformelement().setbasic(f); wdcontext.currentcontextelement().setcalculatorvisible(wdvisibility.none); Implement onactionsubmitform onactionformsubmit(serverevent) wdcontext.currentcontextelement().setsubmitformvisible(wdvisibility.visible); Implement OnActionOpenCalculator This method passes respective Input field data to Adobe calculator Form onactionopencalculator(serverevent) wdcontext.currentcontextelement().setcalculatorvisible(wdvisibility.visible); if(id.equals("calculatehra")){ calcstr="hra"; wdcontext.currentcalculatorvalueelement().setvalue(wdcontext.currentempformelement ().gethra()); else if(id.equals("calculatelta")){ calcstr="lta"; wdcontext.currentcalculatorvalueelement().setvalue(wdcontext.currentempformelement(). getlta()); else if(id.equals("calculateallowance")){ calcstr="spl"; 2008 SAP AG 9

10 wdcontext.currentcalculatorvalueelement().setvalue(wdcontext.currentempformelement(). getsplallowance()); else if(id.equals("calculatebenefits")){ calcstr="otb"; wdcontext.currentcalculatorvalueelement().setvalue(wdcontext.currentempformelement(). getotherbenefits()); else if(id.equals("calculateannumsalary")){ calcstr="spa"; wdcontext.currentcalculatorvalueelement().setvalue(wdcontext.currentempformelement(). getsalaryperannum()); else if(id.equals("calculatebasic")){ calcstr="bas"; wdcontext.currentcalculatorvalueelement().setvalue(wdcontext.currentempformelement(). getbasic()); 2008 SAP AG 10

11 Creating Calculator Adobe Form Lets edit the Calculator Form, Right click on the UI Element CalculatorForm and select edit, opens the Designer to edit the adobe form. Open the Data view, Drag the Value to Body Page. Select the Object tab of NumericField, remove the caption, navigate to Value tab select the type Calcultaed- Read Only. Apply the Solid Border to Numeric Field. Looks like this: Select the Palette library, select tab standard, and drag Button to Body page. Select the button, and now rename it in hierarchy palette. Repeat this step 17 times 2008 SAP AG 11

12 Arrange the Buttons look like this Select the library palette, and select tab Webdynpro activex drag the submit button to body page. Its should look like this. So designing of adobe calculator is completed. Let s go into scripting in adobe form. You can add scripts to adobe objects, adobe life cycle designer supports java script and form calc. Here we are using java script SAP AG 12

13 First we will create script object where we will create some java script functions, we can access these functions in Buttons we created. For this,right click on the Subform and select Insert Script Object. Now, rename it to scriptcalculate. Select the method scriptcalculate and write the script in script editor, we can expand the script editor and paste the below code. l //########## GLOBAL VARIALE DECLARATION ######### //varg1 variable is used to store the previous value var varg1=0; //oper keeps the current operation var oper=null; //isappendnum decides whether the number is operand or appending number var isappendnum=true; //########## FUNCTIONS ######### //appendnum function used to append the number to current number function appendnum(oval){ if(isappendnum){ NumericField1.rawValue=parseFloat(NumericField1.rawValue+oVal); else{ NumericField1.rawValue=oVal; isappendnum=true; 2008 SAP AG 13

14 function calcoperation(optype){ varg1=numericfield1.rawvalue; oper=optype; isappendnum=false; function evalnum(){ if(oper=="add"){ NumericField1.rawValue=NumericField1.rawValue+vArg1; if(oper=="sub"){ NumericField1.rawValue=vArg1-NumericField1.rawValue; if(oper=="mul"){ NumericField1.rawValue=NumericField1.rawValue*vArg1; if(oper=="div"){ NumericField1.rawValue=vArg1/NumericField1.rawValue; if(oper=="mod"){ NumericField1.rawValue=vArg1%NumericField1.rawValue; Now we will create scripts for buttons to highlight the Buttons we will write the scripts for mouseenter and mouseexit. Select the button, select mouseenter from script drop down and place the script in script editor MouseEnter ==this.border.corner.color.value="0,0,255"; MouseExit ==this.border.corner.color.value="0,0,0"; 2008 SAP AG 14

15 Repeat the above procedure to all buttons in the form. Now we will write action click scripting for all buttons except submit button. Select the button and select click scripting event for button, here we call the scriptcalculate script object functions. //for digits bzero==click ==scriptcalculate.appendnum("0"); bone==click ==scriptcalculate.appendnum("1"); btwo==click ==scriptcalculate.appendnum("2"); bthree==click ==scriptcalculate.appendnum("3"); bfour==click ==scriptcalculate.appendnum("4"); bfive==click ==scriptcalculate.appendnum("5"); bsix==click ==scriptcalculate.appendnum("6"); bseven==click ==scriptcalculate.appendnum("7"); beight==click ==scriptcalculate.appendnum("8"); bnine==click ==scriptcalculate.appendnum("9"); //for operators bplus==click ==scriptcalculate.calcoperation("add"); bminus==click ==scriptcalculate.calcoperation("sub"); bdivide==click ==scriptcalculate.calcoperation("div"); bmultiply==click ==scriptcalculate.calcoperation("mul"); bmod==click ==scriptcalculate.calcoperation("mod"); bequals==click ==scriptcalculate.evalnum(); bcancel==click ==NumericField1.rawValue=0;(cancel button label as C ) SAP AG 15

16 Now the Adobe form for calculator is completed, we can check it also with PDF preview tab. close the life cycle designer. Let s Start to Develop adobe form report. Right click on Webdynpro UI Element ReportInteractiveForm and select edit, opens the adobe designer again. Drag and drop the EmpForm attributes to the body page. Select the fields in body page and select the object palette change the appearance to none. Arrange the UI Elements lines and static texts to beautify the form show below SAP AG 16

17 Deploy Then Deploy and Run the Application Related Content Please include at least three references to SDN documents or web pages. Creating Interactive Forms in Webdynpro for Java Online Interactive Forms Useful Documentation for developing Interactive forms For more information, visit the User Interface Technology homepage SAP AG 17

18 Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document SAP AG 18