Currently Being Moderated

Additional information

In the previous blogs (CHIPs, PageBuilder and the Side Panel - Part 1 and CHIPs, PageBuilder and the Side Panel - Part 2) I explained how to create a CHIP from a web dynpro component and how to create a side panel in a web dynpro application.
In this blog (part 3) I am going to explain how to create a CHIP mashup application with the Page Builder.
We are also going to create a generic IFrame CHIP to search with BING. Then we are going to implement our created IFrame CHIP in the Page Builder and wire it to the carrier CHIP created in blog CHIPs, PageBuilder and the Side Panel - Part 1.

The Page Builder example below is created in minisap (NSP). In the images you will see RVSAP in the url. This is not my website, but it is my twitter name.

 

Additional information links

 

Prerequisites

 

What are we going to create?

We are going to create a CHIP mashup application where you can provide an airline ID. The application will give you the airline ID details in our carrier CHIP created in blog CHIPs, PageBuilder and the Side Panel - Part 1 and then it will automatically search with BING for the airline.

 

Step 1: Create Configurations

The Page Builder is a web dynpro component named: "WDR_CHIP_PAGE"
The web dynpro component has a web dynpro application with the same name.

To create a new application with the Page Builder we have to create an application configuration for the web dynpro application "WDR_CHIP_PAGE".


 


An Internet browser is started where we can create the configuration.
I have called my application configuration: "ZZ_RV_CARRIER_SEARCH_AC"
Click on the button "Create"

 


After we have saved the application configuration we can create a component configuration.
I have called my component configuration: "ZZ_RV_CARRIER_SEARCH_CC"

Click on the button "Go to Component Configuration"


Click on the button "Create"

 

 


Well done! We have created all configurations.
We can now close the Internet browser with the configuration settings.

 

Step 2: Open the Page Builder in Administrator Mode

The application configuration we have created can be found under the application node: "Applic. Configurations"


Double click on the application configuration and test it in "Administration Mode".


The Page builder will be displayed with options for the Administrator.

 

Step 3: Create an IFrame CHIP

Open the CHIP catalog by clicking the link at the top right of the screen.


Open the node IFrame CHIPs.
Right click on the node to open the context menu and select "Create"


Create a component configuration for the IFrame CHIP web dynpro.
I have called my component configuration: "ZBING_SEARCH_CC"
Click on the button "Create"

 


Fill in the header attributes for the BING search CHIP:
Address: "http://www.bing.com/search?"


Create an Inport.

 


Create a parameter for the Inport.

 


Create a Tag for the parameter of the Inport.
At a later point we will automatically wire to this Tag.

 


Save the component configuration.


Congratulations!

We have created our first IFrame CHIP.
We can now close the Internet browser with the component configuration settings.
Right click on the node "IFrame CHIPs" to open the context menu and select "Refresh"


You will see the IFrame CHIP in the list that we have just created.

 

Step 4: Implement CHIPs in the Page Builder

The Page Builder consists of cells where you can implement one ore more CHIPs. The cells are created in a table style. You can create, delete, merge or split rows and columns by clicking on the pencil image.

We are going to create a new column.


Select our created "Bing search" IFrame CHIP from the CHIP catalog and drag and drop it in the created column.


SAP has provided several CHIPs that we can use in our applications. One of them is the "CHIP with Outport" CHIP. This is a simple CHIP with one input field and a button to trigger an event.
We are going  to implement this CHIP in the application.
Open the node "Web Dynpro CHIPs" from the CHIP catalog and drag and drop the CHIP "CHIP with Outport" to the left column.

 


We are going to do the same with our created carrier CHIP from blog CHIPs, PageBuilder and the Side Panel - Part 1.
Drag and drop the CHIP "Carrier chip" to the left column under the CHIP "CHIP with Outport".

 

 

Step 5: Setup Wiring

All the CHIPs are now implemented in our new application.
The next step is to wire the CHIPs to each other.
We are going to explicitly wire our carrier CHIP to the CHIP "CHIP with Outport"
After that we are going the automatically wire our carrier CHIP to the BING search CHIP.
You always set explicit wiring in the CHIP with the Inport. (event handler CHIP)
In our example that is the carrier CHIP.

Open the connection view for the CHIP "Carrier chip"


Currently there is no connection.
Set the attributes of the carrier CHIP to connect with the "CHIP with Outport" CHIP.


Click on the button "Apply"
You will see that the carrier CHIP is now connected.


We are now going to automatically wire the carrier CHIP to the BING search CHIP.
For more information about automatically wiring see blog CHIPs, PageBuilder and the Side Panel - Part 2.


Add a Tag name "QUERY".
The Tag must be exactly the same as the Inport parameter Tag we configured in our Bing Search CHIP.

 

 

Step 6: Setup Layout

Yes, appearance does matter ;-)
I also don't care about the color of a button, but if we can make our application more appealing in just a few clicks I won't hesitate to do that.

Set the width of the left column to 20%.


We are going to change the design of the CHIP "CHIP with Outport".


Set the design to "White Background".


We are going to change the design of the carrier CHIP.


Set the design to "Highlighted".


Save the Page Builder configuration.

 

Congratulations!

You have created your first new Page Builder application.
You can test the application by executing the application configuration: "ZZ_RV_CARRIER_SEARCH_AC"

 
The initial screen:


Set the input field to "AA" (upper case).
Click on the button "Fire Outport".


Set the input field to "LH" (upper case).
Click on the button "Fire Outport".

 

What's next?

There are a lot of cool things that you can do with the Page Builder. For now you know the basics and feel free to explore more and maybe write a blog about your experiences.


Currently I am into FPM development. I really like the configuration concept, because when a project is going live someone always says: I have a request for change ;-)

The configuration of FPM applications is very simple. The interesting part is how to setup the architecture of the application. This can be very simple if we are using just one web dynpro component. But for maintainability and re-usability we want to separate functionality. And what is the best architecture to interchange data and which interfaces should we implement? For more information you can read the FPM developer's guide. Unfortunately this document is more for reference then for learning, so maybe in the future I will write a blog about it.


Best regards,

Robin Vleeschhouwer

RV SAP Consultancy

Comments

Actions

Filter Blog

By author:
By date:
By tag: