SAP Portal 7.3 Part III - Create a Hello World iView

Pre-requisite: Read Part II

We will be creating a portal application using the proprietary SAP portal framework and then deploy and test the iview.

Create a Project

Follow below steps to create the application.

1. Open NWDS
2. Switch to Web Development perspective (From top menu, select Window --> Open Perspective --> Other and then select web)
3. From top menu select File --> New --> Other
4. From the wizard select Portal Application --> Create a Portal Application Project)
5. Type a name for the application. I choose HelloWorld
6. Click finish

This will create a HelloWorld project in the workspace. Drill down the project to see the project structure. The most important file is the portalapp.xml this can be found in the dist-->PORTAL-INF folder. This files holds the definition of the components your will be developing. Take a look at the structure of the file.

Now let us develop a portal component that displays hello world as iView content. There are three components available to do the same, we will be using the JSPDynPage component for this example. You can also try the sample with other components (the steps will be same). JSPDynPage component uses a JSP page to display the iView content.

Create a Portal Component

Follow the below steps to create an iView

1. Right click on the HelloWorld project from Project Explorer view
2. From context menu, select New --> Other
3. From the wizard select Portal Application --> Create a new portal application object
4. Click next
5. Select HelloWorld as your project
6. Click Next
7. From the following wizard, Select Portal Component --> JSPDynPage
8. Click Next
9. Type name as HelloSample
10. Type JSPDynPage Package name as com.sample
11. Type JSP filename as hello.jsp
12. Click finish to create the component

The above step will create the hello.jsp file under dist--> PORTAL-INF-->pagelet-->hello.jsp and a controller HelloSample.java file under src.core--> com.sample package. Take a look the java file and JSP file. Note that the portalapp.xml now contains the definition of your portal component. Open your JSP and type the text "Hello World" below the hbj:form tag and save it. You are ready to test your sample now.

Deploy to the Server

Follow the below steps to deploy the application to the server.

1. Right click on the HelloWorl project and Seelct Export
2. From the wizard, select SAP NetWeaver Portal--> EAR file
3. Click Next
4. Select the project as HelloWorld
5. Click Next
6. Click Finish to export the EAR file in your project.
7. You can see the HelloWorld.ear now created in your project
8. Now switch to deployment perspective (Window --> Open Perspective --> Other and Select "Deployment" from the options) Note: You should have already configured the server as mentioned in Part II
9. From the repository explorer, select your server.
10. From the right side, under deployment list, click on import button
11. Select Workspace radio button
12. Click next
13. Select HelloWorld.ear (Note that exporting the ear as mentioned in step above is important. You will not see the ear file otherwise)
14. Click Finish 
15. This will add the project in the deployment list.
16. Now from the deployment list, click on the "start" button which can be found below the import button.
17. This will start the deployment and you will get an alert once it is completed.
18. Now from the repository explorer, you can drill down your server and in the bottom you can see your HelloWorld.ear project.

Test your application

Now let us see how this iView look like in SAP EP. Follow the below steps to test it.

1. Logon to your SAP EP from the browser as administrator. (default URL: http://:50000/irj/portal)
2. If you successfully loged in, you wil be seeing "Content Administration --> Portal Content Management". The left side menu will be showing the Portal Content Directory and the right side will be displaying the Portal Content Studio.
3. If you are not seeing the above, then from the top menu select the above option. If you are not seeing this option, make sure that you have access to these pages.
4. Now from the the left side menu, Drill down Portal Applications (You can Find it in Portal Content section)
5. Scroll down and you can see the HelloWorld application in the list.
6. Drill down the HelloWorld application
7. You can see the HelloSample component in the list.
8. Right click on the component and select "Preview" from the options. 
9. This will open up a new window and you can see hello world.

The above steps will make sure that the component is working as expected. we are yet to create an iView. Follow the below steps to create an iView from this component. Without creating an iView, you can't add this to portal pages.

Create an iView

1. Right click on the HelloSample object
2. Select Copy from the context menu
3. Now Scroll up and Drill down Portal Content folder
4. Right Click on Portal Content folder
5. Select New --> Folder from context menu
6. This will open up the new folder wizard in right hand size. Type "example" as your folder name
7. Click finish (this will create the folder under Portal Content)
8. Click "close" button to close the wizard.
9. Now from the leftside, right click on the "example" you have created under Portal Content
10. From the context menu, select "Paste as PCD Object"
11. This will open up the iView creation wizard in the right side.
12. Click next to continue
13. Click finish to create the iview
14. You will now see the iView created under example folder.
15. Right click on the HelloSample iView and preview. This will display hello world in a new window.
16. This iView is now ready to be added in a page.

Now, you have successfully created a portal component and an iView out of it. You can create as many iViews you wanted from the component.

Let us see how we can create a page and add the iView to it. Wait for Part IV

njoy

Sajith