3464653 offline interactive pdf form using email

7/31/2019 3464653 Offline Interactive PDF Form Using EMail

1/18

Tutorial

Unit: Interactive Forms Integration into Web Dynpro for

JavaTopic: Offline interactive form based on sending and

receiving emails

At the conclusion of this exercise, you will be able to:

Send emails with an attached interactive form

Read received emails with an attached interactive form

Use the Java Mail API

Integrate an interactive form within a Web Dynpro application

Think of a company where employees need to fill out forms offline.

Offline in this case means that the employees make their form entries on

their local host without a server connection (e.g. at home, at a customer

site, while traveling, etc.).

This tutorial explains how to develop an offline interactive form scenario

based on sending and receiving emails. In this case, an employee receives

an email containing an empty or prefilled form, makes entries offline,

and, after filling out the form, sends an email with the attached form back

to a mail server. The server can identify the email with the attached form,

extract the data and pass it to a backend system. You can use the Adobeintegration within Web Dynpro for this purpose. This exercise will show

you which steps are necessary to develop such a scenario based on a

travel request form.

Page 1 / 18


2/18

1OverviewThe following screenshot shows the user interface of the Web Dynpro application you will

develop in this exercise. Using the upper view, you can send an email with an attached travel

request form to the address you enter. In the lower view, you can display all unread messages

in your inbox containing an attached travel request form after clicking theRefresh button.

2PrerequisitesTo be able to use PDF forms in Web Dynpro applications, the following prerequisites apply:

2-1 The SAP NetWeaver Developer Studio (Support Package Stack 11) including AdobeLiveCycle Designer (forms design tool) is installed on your computer. Use the SAP

NetWeaver 04 installation CDs/DVDs if it is not yet installed.

2-2 You have access to the SAP J2EE Engine (Release 6.40).(Note that you can download an evaluation version (Sneak Preview SAP Web

Application Server 6.40 Java) from the SDN Download Area at

https://www.sdn.sap.com/sdn/downloadarea.sdn.)

2-3 Adobe Reader 7.0.1 is installed on your computer. If this is not the case, downloadAdobe Reader 7.0.1 from the Adobe homepage (http://www.adobe.com) at

http://www.adobe.com/products/acrobat/readstep2.html).

2-4 The Active Component Framework (ACF) of the Interactive Forms integration isinstalled on your computer.

With SP Stack 11, calling a Web Dynpro application that includes a PDF form for the

first time should automatically install the ACF in the background. If you experience

difficulties that may be related to the frontend installation, please see SAP Note 766191

on the SAP Service Marketplace for manual installation.

2-5 The Adobe document services are configured on the SAP J2EE Engine you are using.To access the Installation and Configuration Guides for Adobe document services, go

Page 2 / 18
https://www.sdn.sap.com/sdn/downloadarea.sdnhttp://www.adobe.com/http://www.adobe.com/products/acrobat/readstep2.htmlhttp://www.adobe.com/products/acrobat/readstep2.htmlhttp://www.adobe.com/https://www.sdn.sap.com/sdn/downloadarea.sdn


3/18

to http://service.sap.com/nw04installation SAP Web ASSAP Web AS 6.40 SR1

and Related DocumentationAdobe Document Services.

2-6 Basic knowledge of developing Web Dynpro applications. For helpful informationabout Web Dynpro, go to

https://www.sdn.sap.com/sdn/developerareas/webdynpro.sdn?node=linkDnode6-2.

3Importing a Project TemplateTo restrict the development of this sample application to the actual content covered, there is a

predefined Web Dynpro project template available in SDN underWeb Dynpro Sample

Applications and Tutorials. Follow the steps listed below to import the predefined Web

Dynpro project:

3-1 Unzip the contents of the ZIP file TutWD_EmailInteractiveForm_Init.zip into the workarea of the SAP NetWeaver Developer Studio or into a local directory.

3-2 Start the SAP NetWeaver Developer Studio.3-3 Import (File Import Existing Project into Workspace) the Web Dynpro project

TutWD_EmailInteractiveForm_Init.

3-4 The Web Dynpro project TutWD_EmailInteractiveForm_Initthen appears in the WebDynpro Explorer for further processing and editing in the context of this tutorial. The

information display triggered by the Web Dynpro project

TutWD_EmailInteractiveForm_Initcan be ignored at this time, since we will extend the

Web Dynpro project during the remainder of this exercise and will thus remove this

information.

Note: Depending on which Java compiler preferences are set, you may see some

warnings in the Taskview after importing the project. If the severity level for problems

of type Unused imports (set in Window Preferences Java Compiler) has thevalue Warning, the compiler will issue a warning for unused import references. Ignorethese warnings!

Page 3 / 18
http://service.sap.com/nw04installationhttp://service.sap.com/~form/sapnet?_SHORTKEY=01100035870000591425&_OBJECT=011000358700000307832005Ehttp://service.sap.com/~form/sapnet?_SHORTKEY=01100035870000591425&_OBJECT=011000358700000307832005Ehttp://service.sap.com/~sapidb/011000358700000307832005E/TemplatesWebAS_640sr1.htm#q2https://www.sdn.sap.com/sdn/developerareas/webdynpro.sdn?node=linkDnode6-2https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/unkown/Web%20Dynpro%20Sample%20Applications%20and%20Tutorials.htm#UIhttps://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/unkown/Web%20Dynpro%20Sample%20Applications%20and%20Tutorials.htm#UIhttps://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/unkown/Web%20Dynpro%20Sample%20Applications%20and%20Tutorials.htm#UIhttps://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/unkown/Web%20Dynpro%20Sample%20Applications%20and%20Tutorials.htm#UIhttps://www.sdn.sap.com/sdn/developerareas/webdynpro.sdn?node=linkDnode6-2http://service.sap.com/~sapidb/011000358700000307832005E/TemplatesWebAS_640sr1.htm#q2http://service.sap.com/~form/sapnet?_SHORTKEY=01100035870000591425&_OBJECT=011000358700000307832005Ehttp://service.sap.com/~form/sapnet?_SHORTKEY=01100035870000591425&_OBJECT=011000358700000307832005Ehttp://service.sap.com/nw04installation


4/18

4Initial Project StructureAfter you have imported the Web Dynpro project template TutWD_EmailInteractiveForm_

Init, the following project structure is displayed in the Web Dynpro Explorer:

Web Dynpro project structure

Web Dynpro project: TutWD_EmailInteractiveForm_Init

Web Dynpro application: EmailInteractiveFormApp

The applicationEmailInteractiveFormApp displays the interface view of the Web

Dynpro componentEmailInteractiveFormComp in the browser window.

Web Dynpro component: EmailInteractiveFormComp

This is the Web Dynpro component that contains our entire application.

View: SendView

In this view, you can enter the recipients email address, and, upon clicking the Send

button, send an email with the attached travel request form to this address.

View: ReceivedView

After clicking theRefreshbutton, this view displays all unread messages with an

attached travel request form.

View: FormView

This view displays the content of the received interactive form.

Window:Window

Initially contains a view set with two view areas represented by the two cells (ViewSet

Definition: GridLayout with one column and two rows). The two views SendView and

ReceivedView are already embedded. TheFormView becomes visible when double-

clicking one of the unread messages. The attached travel request form is then

displayed, and you can return from theFormView to theReceivedView.

Page 4 / 18


5/18


6/18

Design the SendView Layout

We will use the following SendView layout for sending an email.

View layout of the SendView modeled with the View Designer

To design this view, we have to add the UI elements listed below and set their properties. In

order to add these UI elements, choose theLayouttab of the SendView, add the UI elements

in the Outline view, and set their properties as stated below in the corresponding Properties

tab:

UI Element

Type

UI Element

Name

Embedded in ...

(Container

Name)

UI Element

Property

Value

Properties of

Label - text

To:Label To_label Group0

Properties of

Label labelFor

(Set this property

after you entered

the next UIelement)

To

InputField To Group0 Properties of

InputField -

value

Email.To

(Select button

on the right in

Properties

window, then

select To field

from the context

tree.)

Button Button Group0 Properties of

Button - text

(Note: Leave

blank!)

Save the new metadata by choosing the (Save All Metadata) icon from the toolbar.

Page 6 / 18


7/18

Implementation of the logic

Follow these steps to implement the logic that sends the email to the recipients address.

5-1 Open theActions tab of the SendView.5-2 Create a new action called SendForm, and set the text property to Send Email. Use the

default settings for all other properties. ClickFinish.

5-3 Choose theLayouttab of the SendView, and select the button in the Outline view. In thecorrespondingProperties tab, apply the new action for the property onAction.

5-4 Switch to theImplementation tab, and add the following source code at the end of thewdDoInitmethod.

Do not forget to enter your email address in the first and second lines of this code

snippet.

/*

The following lines initialize the context elements; enter your

email address in the setFrom-method

*/

wdContext.currentEmailElement().setFrom( "[email protected]

");

wdContext.currentEmailElement().setTo( "[email protected]

");

wdContext.currentEmailElement().setCc( "");

wdContext.currentEmailElement().setBcc( "");

wdContext.currentEmailElement().setSubject( "Travel Request Form");

wdContext.currentEmailElement().setBody( "You will find therequested Travel Request Form in the attachment of this email.

Please fill out this form and send it back. \n\nYour TravelManagement Team");

Page 7 / 18


8/18

5-5 Add the following coding lines to the onActionSendForm method in order to send anemail with an attached interactive form using the Java Mail API.

Do not forget to enter the mail server host you want to use in the second line of this

code snippet.

Page 8 / 18

Properties props = new Properties();

String host = "your.smtp host";

props.put("mail.smtp.host", host);

Session session = Session.getInstance(props, null);

MimeMessage message = new MimeMessage(session);

Address toAddress = new InternetAddress();

Address fromAddress = new InternetAddress();

Address ccAddress = new InternetAddress();

Address bccAddress = new InternetAddress();

try

{

/* Creates an email object with different parts, one for the

text and another for the attached file */MimeMultipart multipart = new MimeMultipart();

BodyPart messageBodyPart = new MimeBodyPart();

/* the following statements build up the email */

if (! wdContext.currentEmailElement().getFrom().equals(""))

{

fromAddress = new

InternetAddress(wdContext.currentEmailElement().

getFrom());

message.setFrom(fromAddress);

}

if (! wdContext.currentEmailElement().getTo().equals(""))

{

toAddress = newInternetAddress(wdContext.currentEmailElement().

getTo());

message.setRecipient(Message.RecipientType.TO,

toAddress);

}

if (! wdContext.currentEmailElement().getCc().equals(""))

{

ccAddress = new


getCc());

message.setRecipient(Message.RecipientType.CC,

ccAddress);

}if (! wdContext.currentEmailElement().getBcc().equals(""))

{

bccAddress = new


getBcc());

message.setRecipient(Message.RecipientType.BCC,

bccAddress);

}

if (!

wdContext.currentEmailElement().getSubject().equals( "")

)

{

message.setSubject(wdContext.currentEmailElement().getSubject());

}


9/18

if (! wdContext.currentEmailElement().getBody().equals(""))

{

messageBodyPart.setText(wdContext.currentEmailElement()

.getBody());

}

multipart.addBodyPart(messageBodyPart);

/* a new part will be added, in the complete email this will

be the attachment */

messageBodyPart = new MimeBodyPart();

String filename =

"temp\\webdynpro\\web\\local\\TutWD_EmailInteractiveForm

_Init\\Components\\com.sap.tut.wd.emailinteractiveform.EmailIn

teractiveFormComp\\TravelRequest.pdf" ;

DataSource source = new FileDataSource(filename);

messageBodyPart.setDataHandler(new DataHandler(source));

messageBodyPart.setFileName(source.getName());

messageBodyPart.setHeader("Content-Type","application/pdf");

multipart.addBodyPart(messageBodyPart);

message.setContent(multipart);

Transport.send(message);

}

/

* the exceptions part */

catch (AddressException e)

{

wdComponentAPI.getMessageManager().reportWarning(e.

getLocalizedMessage());

e.printStackTrace();

}

catch (SendFailedException e){

wdComponentAPI.getMessageManager().reportWarning(e.

getLocalizedMessage());


}

catch (MessagingException e)

{

wdComponentAPI.getMessageManager().reportWarning(

e.getLocalizedMessage());

e.printStackTrace();}

5-6 Include the Java Mail API.You can do this by choosingProperties in the context menu of the

TutWD_EmailInteractiveForm_Initnode in the Web Dynpro Explorerview.

Then chooseJava Build Path, switch to theLibraries tab, select Add Variable,

chooseECLIPSE_HOME,press theExtendbutton, navigate topluginscom.tssap.ext.libs.j2ee_1.3lib, choose activation.jar, and press OK.Repeat these steps for the library mail.jar, and press OK.

Select OKto close theProperties dialog.

5-7 On theImplementation tab of the SendView, choose SourceOrganize Imports fromthe context menu. This will automatically add all necessary import statements to your

Page 9 / 18


10/18

source code. Select only types in thejavax.mail.* orjavax.activation.* packages for

this process.

5-8 Save the new metadata by choosing the (Save All Metadata) icon from the toolbar.

6Receive Email with Attached Interactive FormCreate ReceivedView Context

6-1 Open theData Modelerof theEmailInteractiveFormComp by double-clicking on theEmailInteractiveFormComp node in the Web Dynpro Explorerview.

Create a data link betweenReceivedView and the Component Controller. To do so, use

the arrow icon on the tool bar on the left side of theDiagram View.

6-2 Drag and drop theEmailnode on the right onto the Contextnode on the left side, checktheEmailnode, and confirm with OK. ChooseFinish.The result should look like the

screenshot below:


Page 10 / 18


11/18

Design ReceivedView layout

We will use the followingReceivedView layout for receiving an email:

View layout of theReceivedView modeled with the View Designer

To design this view, we have to add the UI elements listed below and set their properties. In

order to add these UI elements, double-click on theReceivedView within the Web Dynpro

Explorer, choose theLayouttab of theReceivedView, add the UI elements in the Outline

view, and set their properties as stated below in the corresponding Properties tab:

UI Element

Type

UI Element

Name

Embedded in ...

(Container Name)

UI Element

Property

Value

ToolBarButton RefreshButton ToolBar8 Properties of

Element - text

(Leave

blank!)

Properties of

Element -

dataSource

Email

Properties of

Element - width

100%

Table Table Group3

Properties ofElement -

readOnly

true

Open the context menu of the Table node in the Outline view. Choose Create Binding. Check

the context elementsAttachment, SentDate, From, Subject, and ContentType. PressNext. On

the following screen, you can change the order of the table columns. PressFinish.

Save the new metadata by choosing the (Save All Metadata) icon from the toolbar.

Page 11 / 18


12/18

Implementation of the logic

Follow these steps to implement the logic that retrieves the messages and extracts the

interactive form.

6-4 In the Web Dynpro Explorer, double-click the Component Controller.(TutWD_EmailInteractiveForm_InitWeb DynproWeb Dynpro Components

EmailInteractiveFormCompComponent Controller), and switch to theMethods tab.6-5 Create a new method called readInbox by clickingNew, checkingMethod, pressing

Next, entering readInbox, and pressingFinish.

6-6 Switch to theImplementation tab of theEmailInteractiveFormComp, and add thefollowing source code at the end of the readInbox method.

Do not forget to enter your host (mail server), user name and password in the

corresponding coding lines.

while (!wdContext.nodeEmail().isEmpty())

{

wdContext.nodeEmail().removeElement(wdContext.nodeEmail().getElementAt(0));

}

wdContext.nodeEmail().invalidate();

Message[] message = new Message[1000];

IPublicEmailInteractiveFormComp.IEmailElement newEmailNodeElement;

//Set properties

// enter email server, for example Microsoft Exchange Server, here

String host = "your.mail.server";

// enter email account user name here

String username = "your username";// enter email account password here

String password = "your password";

Properties props = new Properties();

props.put("mail.smtp.host", host);

//Set Session

Session session = Session.getInstance(props, null);

//S

try

et the store

{

Store store = session.getStore("imap4");

store.connect(host,username,password);

//Get folder

Folder folder = store.getFolder("INBOX");folder.open(Folder.READ_ONLY);

//Get Mails

message = folder.getMessages();

//Fill table with mails

for (int i = 0; i < message.length; i++)

{

// h are

if (message[i].isSet(Flags.Flag.SEEN) == false)

look for attachments only in mail whic marked as unread

{

Page 12 / 18


13/18

// only the mails with the right subject a processed

if (message[i].getSubject().equals( "Travel Request Form"))

{

newEmailNodeElement = wdContext.createEmailElement();

newEmailNodeElement.setFrom(message[i].getFrom()[0].toString());

newEmailNodeElement.setSubject(message[i].getSubject());newEmailNodeElement.setSentDate(message[i].getSentDate().toString());

//Check for right Attachment and extract it from the mail body

Object content = message[i].getContent();

if ( content != null && content instanceof Multipart)

{

for (int j = 0 , n = ((Multipart)content).getCount(); j < n; j++)

{

Part part = ((Multipart)content).getBodyPart(j);

St par

if ( disposition != null && (disposition.equals(Part.ATTACHMENT) ||

ring disposition = t.getDisposition();

disposition.equals(Part.INLINE)))

{

if (part.getFileName().equals("TravelRequest.pdf")){

newEmailNodeElement.setAttachment( true);

newEmailNodeElement.setContentType(part.getContentType().toString());

InputStream is = part.getInputStream();

ByteArrayOutputStream bo = new ByteArrayOutputStream();

int ;c

while ((c = is.read()) > -1) bo.write(c);

byte[] pdfSource = bo.toByteArray();

newEm

break;

ailNodeElement.setPdfSource(pdfSource);

}

else

{newEmailNodeElement.setAttachment( false);

}

}

}

}

wdContext.nodeEmail().addElement(newEmailNodeElement);

}

}

}

//Close connection and save changes (e.g. mark touched mails as read)

folder.close(true);

store.close();

}catch (MessagingException e)

{


}

catch (IOException e)

{

e.printStackTrace();}

Page 13 / 18


14/18

6-7 On theImplementation tab of theEmailInteractiveFormComp, choose SourceOrganize Imports from the context menu. This will automatically add all necessary

import statements to your source code. Select only types in thejavax.mail.* or

javax.io.* packages for this process.

6-8 Open theActions tab of theReceivedView.6-9 Create a new action calledRefreshPressed, and setRefresh as text. Use the default

settings for all other options. ClickFinish.

6-10 Apply the new action to the button on theLayouttab. To do so, switch to theLayouttabof theReceivedView, select the button in the Outline view, switch to the corresponding

Properties tab, and set the onAction property of the button toRefreshPressed.

6-11 Switch to theImplementation tab of theReceivedView, and add the following sourcecode at the end of the onActionRefreshPressedmethod.

wdThis.wdGetEmailInteractiveFormCompController().readInbox();


Page 14 / 18


15/18

7Display Received Interactive FormExtend FormView context

The data for the travel request form is already defined in the controller context of theFormView (see Contexttab ofFormView):Go to theWeb Dynpro Explorer,double-click the

node for theFormView (TutWD_EmailInteractiveForm_InitWeb DynproWeb DynproComponentsEmailInteractiveFormCompViewsFormView)and choose theContexttab of theFormView):

To display the interactive form you received, you need to map thePdfSource context element

of the component controller and design theFormView layout.

7-1 Open theDataModelerof theEmailInteractiveFormComp by double-clicking theEmail InteractiveFormComp node in the Web Dynpro Explorerview. Create a data link

betweenFormView and the Component Controller. To do so, use the arrow icon on the

tool bar on the left side of theDiagram View.

7-2 Drag and drop theEmailnode from the right onto the Contextnode on the left side,selectPdfSource, and confirm with OK. ChooseFinish.

Design FormView layout

In this section, you will extend theFormView with an interactive form element and a toolbar

button. The interactive form element is used for displaying the form, and the button is used

for returning to theReceivedView.

7-3 In the Web Dynpro Explorer, double-click the node for theFormView (Web DynproWeb Dynpro Components EmailInteractiveFormComp Views FormView), and

choose theLayouttab.

Page 15 / 18


16/18

7-4 In the Outline view, insert a child of typeInteractiveForm and IdInteractiveForm1 inthe Group1.

7-5 Select theInteractiveForm1 element in the Outline view, switch to the correspondingProperties tab, and change the properties as shown below. Reference the corresponding

dataSource andpdfSource from the context, and set the height, mode, width, hAlign and

vAlign properties as shown below:

The dataSource property is used to specify the data source. The data source

encapsulates the data you can display in the form at runtime. For the dataSource

property, you need to specify the path to the context node providing the data. In this

step, we reference theDataSource context node, which is already defined in the context

structure of the template used (see Contexttab of theFormView):

Page 16 / 18


17/18

For more information related to context structures refer to the following tutorial, which

you can find in the standard SAP library documentation:

Application of Context Programming and Data Binding

The usePdfvalue of the mode property is used for displaying the original PDF

document. The data source and the template for the creation of the PDF document areignored.

ThepdfSource property specifies the path of the context element that contains the PDF

document. You must bind this property to a context attribute of the type binary. In this

tutorial, the context attribute has already been defined in the context structure (see

graphic above). This property allows an application developer to access the binary file

and download it to the local hard disk or read and send the data to a backend.

7-6 Choose theLayouttab of theFormView. In the Outline view, insert a ToolBarItem oftype ToolBarButton into the ToolBar, and call it SubmitButton.

Create and assign actions

To be able to display the form attached to an email after double-clicking an unread message,

and to be able to return to theReceivedView after clicking on the Submitbutton, you need to

create and assign actions.

7-7 Create a new action called SubmitPressedon theActions tab of theFormView, andchoose ToReceivedView as the fire plug. PressFinish.

7-8 Switch to theLayouttab of theFormView, and select the SubmitButton in the Outlineview. In theProperties tab of the SubmitButton, assign this new action to the onAction

property, and set the text property to Submit.

7-9 Open theReceivedView for editing. Create a new action called Selection on theActionstab of theReceivedView, and choose ToFormView as the fire plug. PressFinish.

7-10 Switch to theLayouttab of theReceivedView. In the Outline view, choose Table, andassign this new action to the onLeadSelectproperty.

7-11 Save the new metadata by choosing the (Save All Metadata)icon from the toolbar.

Page 17 / 18
http://help.sap.com/saphelp_nw04/helpdata/en/48/70b1c763a45a4a8bc7f2b7d2c171e6/frameset.htmhttp://help.sap.com/saphelp_nw04/helpdata/en/48/70b1c763a45a4a8bc7f2b7d2c171e6/frameset.htm


18/18

8Building, Deploying and Running the ProjectTo complete the tutorial,Rebuild ProjectandDeployNew Archiveand Run. A browser

window displays the user interface that you know from the overview section. You can send

the travel request form by email to your inbox and edit the form offline.

In order to simplify the test, you can send the filled-out form back to your inbox (in a real

scenario you would send the filled-out form back to a system inbox for further processing). If

the subject of the incoming email is Travel Request Form (due to the coding lines in step 6-

6), the unread message is displayed in the table after clicking the Refresh button on the

ReceivedView. After double-clicking the unread message, the corresponding interactive form

is displayed in theFormView.

Congratulations, you have completed the offline interactive form scenario based on sending

and receiving emails.

Page 18 / 18

3464653 offline interactive pdf form using email

Documents