This is where we will call outbound plugs. In next step we will link outbound plug to button which will complete the whole flow.Įarlier we defined onAction events on buttons which created Action methods in view. Well plugs are mapped using navigation link. Between OUT plug of V_AVAILIBITY and IN_MAIN
Between OUT plug of V_ADDITIONAL_INFO and IN_MAINģ. Between OUT_AVAIL and IN of V_AVAILIBILITY.Ģ. Similarly define following navigation linkġ. You should now see a link icon under OUT_ADDITIONAL_INFO outbound plug Link OUT_ADDITIONAL_INFO of V_MAIN to IN of V_ADDITIONAL_INFOĪs there is only one inbound plug IN in view its automatically filled up, otherwise you can do value help in Inbound plug input and choose inbound plug within view to define target of this navigation link Embed V_FLIGHT_DATA in V_MAIN Define plug in V_MAIN Define plug for view Define Navigation Linksįirst add views V_ADDITIONAL_DATA and V_AVAILIBILITY to window W_MAIN by dragging and dropping views to W_MAIN node. We will link these navigation links on button onActionEvent. Then we will create two outbound plugs (red arrows) which will help us navigate to view V_ADDITIONAL_INFO and V_AVAILIBILITY using navigation link (black arrows). ViewContainerUIElement is like a sub-screen area which you can embed views. View V_FLIGHT_DATA is embedded in V_MAIN using ViewContainerUIElement. V_MAIN is default view which will be displayed in window W_MAIN. Now that we have all views in place we will concentrate on navigation and how views will be displayed at runtime. Insert a group, create container form within group and insert button. Within ADDITIONAL_INFO group create container based on context. Tip : Change layout to of Flight_Data to GridLayout and colCount to 2Ĭreate form using Create Container form within Flight_Data tray for Context node FLIGHT_DATA Create view V_ADDITIONAL_INFOĭefine used component and context mapping View should look like this Create View – V_FLIGHT_DATA Now insert few more UI element as shown in below screen shot After this step you will notice Search button is now activated and a method is inserted under Actions tab of layout. You could link this to outbound plug here but let’s just leave it at the moment.
Its like adding button in module pool screen without giving a function code to it.Įnter action name and a description. Notice that search button is greyed out it because we hav’t completed definition of onAction event. This is how layout looks like after button. I have changed layout of Group to Matrix layout and rearranged element to look in order. You should now have input fields on layout. We will create input form within group selection using Create Container Form option Go to layout right click on ROOTUIELEMENTCONTAINER and insert element Group Context values are always overhead on web Dynpro component therefore keep nodes to minimum. In this view we are only going to put input criteria and display any error message so only need IMPORTING and RETURN node here in context. Go to Context tab of view and drag drop importing and return node from right pane to left.
Go to view V_MAIN and define component controller usage. To let V_MAIN access context of component control we need to defined component usage in V_MAIN. You should have a service call method in component controller (unless you choose to create service call in new custom controller) and context that looks like below screen shot. Ĭreate service call to BAPI_FLIGHT_GET_DETAIL In SE80 create a new Web Dynpro Component. Test Web Dynpro using Web Dynpro Application In this example, we will create a Web Dynpro component to demonstrate how navigation is achieved within WDA component.Ĭreate Web Dynpro Component and Service Call to BAPI_FLIGHT_GET_DETAIL Navigation-link connect and outbound plug to inbound plug as seen in the picture below. That’s where navigation links come in the picture. On the other hand, defining outbound plug means view can call other views. Defining an inbound plug for view means the view can be called in by other views. In Web Dynpro this is achieved using Inbound plug, Outbound plug and Navigation links. In the context of classical Dynpro, it’s moving from one screen to other which is achieved by CALL SCREEN and LEAVE TO SCREEN statements. Moving from one view to another is referred as navigation in Web Dynpro. Step by Step guide to navigate to views within WDA component.