Navigation between Views

Hello Guys..

Today's post about Navigation between views. Once you able to understand this post. Then I am sure that you able to create a navigation between views.

To enable the Navigation link between views. You have to use the INBOUND and OUTBOUND plugs. The screen to make you understand how Navigation link worked.

As you can see that each view has plugs IN and OUT. To navigate from one view to another, each OUTBOUND plug from the view 1 must be linked with an INBOUND plug of the view 2 with the help of a navigation link.

INBOUND Plug:
The INBOUND plug defines the start point of the view. It handles the incoming from the other view into its view. An event handler method will be created at the time of creation of INBOUND plug in which you can handle the incoming to the view. When the INBOUND plug of this view is called by the OUTBOUND plug of the another view this event handler method gets triggered first.

OUTBOUND Plug:
OUTBOUND plug is used to call its subsequent views. Whenever a OUTBOUND plug is trigger it call the INBOUND plug of the other view to which the navigation link is created for.

So lets do it practically.

Objective: Create a component with two views in window and establish the link between views using plugs.

Step1. Go to Object Navigator using Tcode SE80 to create Webdynpro Component.

Step2. Create a Webdynpro Component, say ZWD_LINK (By default one window and one view will be
created)

Step3. Create one more View, Say VIEW2, Right click on View Controller and select Create

Provide the of View in View field and Description(optional) and press the enter key. And Save the component. Now in your component there is One Window( ZWD_LINK) and two views (MAIN & View2). As you can see in belows screen.

Step4.  Now go to MAIN View and click on Inbound Plugs Tab to create an Inbound Plug, Say IN1

To create an outbound plug, Click on Outbound Plugs Tab, say OUT1

Till Now we have created one inbound plug and one outbound plug in MAIN View.
In Similar manner, Create one Inbound plug(say IN2 ) and outbound plug (OUT2) in VIEW2 View.

Step5. Go to Window, ZWD_LINK and place the VIEW2 in window controller by drag and drop. Then your window structure will look like this

Step6. Now we have establish the link between these two views. We can do this simply this way
Select the IN1 of MAIN View and drag and drop on OUT2 of VIEW2. One pop up window will be open and press the enter key.

Similarly select the IN2 of VIEW2 and drag & drop on OUT1 of MAIN View.

Then your window structure will look like this.

Step7. Now go to MAIN View Layout and create an Button and provide the following properties of
                                 Text : Next
                                 OnAction Event: Next                    

Double click on onAction NEXT property of Button UI A pop up window will be open. And substitute the outbound plug name as OUT1 in outbound plug filed and press the enter key.

Now if you double click on NEXT onAction Events. Then you will see the below code. Its generate automatic when we substitute the outbound plug in above steps. 

Note: To trigger the outbound plug use the belwo syntax

                      

                   wd_this->fire__plg( ).

                 
Step8. Similarly, Go to VIEW2 Layout and place the Button UI Element and provide the below properties of Button
                                                  Text : Back
                                                  onAction Event: Back
And substitute the outbound plug as OUT2.

Step9. Now save you component and Activate the component.
Step10. Create an Application and run your application. So you below to see the output. Click on Next Button then it show the Button of View2.

So that's it. Hope you guys able to understand the simple topic but mostly used in component. 

Thanks & don't forget to comment.

Context Node and Attribute Properties

Hi,

I hope you all guys have looked on different standard UI elements of Webdynpro. If not Click Here

Today's post about most important concept Context Node and Attributes properties.

First of all let me tell you about Node and Attributes.

Node is something where you store the records. In other way Its like an Internal Table as in simple ABAP. So if you want manipulate with data you need a store place like Internal Table in ABAP. So Node is place where you can store the data/records so you can manipulate the data as you requirements.

And Attributes is something like variable which can be different data types. And Attributes hold the value for variables. Its like variable as in simple ABAP.

So now lets come to its properties.

Node Properties

So you can see in the above fig. There are different types Node properties. I will try to clear all properties of Node.

1. Node Name: When ever you create a node you have define Node Name. And its mandatory since in world every thing has name so Node as.

2. Interface Node: There are two possible value for this properties i.e "Yes" or "No". This properties of Node tells that you want make node as Interface. If you have choose "Yes" then this placed in Interface Controller so this node can be used in other Component as well.

3. Input Element (Ext): Through this property you can decide whether the new node should be available for an external mapping or not.

4. Dictionary Structure: If you want the fields / attributes from Table or Structure. Then give the name of that Table or Structure. And for adding the fields from Table Click on Button and select the required fields.

5.Cardinality: This properties is pair of values, which you can control the maximum and minimum number of elements at runtime i.e you can define the storage capacity of node as run time 

There are four possible values for Cardinality i.e

• 0..1 : Node can store Minimum Zero Record or Maximum One Record at run time.
• 1..1: Node can store exactly one record.
• 0..N: Node can store Minimum Zero or Maximum n Record at run time.
• 1..N: Node can store Minimum One or Maximum n Record at run time. 

6. Selection: Its like Cardinality, but its controls the maximum and minimum number of elements that may be selected at any one time. For example you have used Table UI element and If you want to select one row of table then define Selection property as 0..1 and if you want select the more than one row then you have to define the Selection property as 0..N.

And the possible values for Selection.

• 0..1: i.e maximum you can select only one element or its also possible zero elements.
• 1..1: i.e you can select the exactly one element.
• 0..N: i.e maximum n elements or zero element
• 1..N: i.e maximum n elements or at least one element.

7. Init. Lead Selection: At run time one of element of node has special position i.e is called Init. Lead Selection. This property tells you that whether the lead selection should be set automatically as soon as required.  Two possible values "Yes" or "No". The default value is "Yes".

8. Singleton: If you have created Nested Node i.e Node inside Node i.e Parent Node or Child Node. If you select the Singleton property of Child Node as "Yes" then there will be only one initiated of lead selection of Parent Node. If you define as "No" then there will be more than one initiated of lead selection of Parent node.

7. Supply Function: Its is special type of Function as node level. It is combinations with Singleton Property. If you have define the Supply Function for child node then you can capture the selected header record from parent node. Supply Function will triggered automatically when "Node is Empty" or "When you change the lead selection of Parent Node".

                   When you define the Supply Function for child node just double click on supply function then you will be able to see code which generated automatically. Here you have to write the Select query as you requirements.

Node Attributes Properties

There are different properties of Attribute

1. Attribute Name: Define the attribute name

2. Type assignment: Possible values "Type" or "Ref To"

3. Type: Assign the data type of attributes like int, String, or Elements etc..

4. Read Only: Set as "Yes" if you want to make it as Read Only

5. Default Value: Define the default value for Attribute.

6.Input Help Mode: Here you can define Input Help Mode as design time for Attributes. The possible values are

• Automatic: It will show the automatic Input help mode of Attributes if you choose DDIC data element 
• Deactivated: If you don't want to Input help the select this option.
• Dictionary Search Help: If you want to Input Help from DDIC then choose this option. Give Search Help Name in Determined Input Help field
• Object Value Selector: If you want to use OVS search help then choose this option and give the OVS component which used WDR_OVS component in OVS Component Usage field. 
• Freely Programed: If you want to display the Webdynpro Component as Input Help which used the Interface IWD_VALUE_HELP then choose this option and give the name in Input Help Componet Usage field.

So today's post all about Node and Attribute properties. And I hope you guys will understand the properties of Node and Attributes. And it will be more clear once you practice as much as can.

Thanks and Yes don't forget to comment. :)

Web Dynpro Standard UI's Elements

Hello Guys,
Hope you all doing good and me too :)

Todays post about the Standard UI elements of Webdynpro.

There is numbers of UI elements are avilable in Webdynpro for different purpose with their own properties. Here I am going to figure out the important UI elements and their mandatory properties that you have to provied when you used these UI elements. Apart from mandatory properties of UI elements there are other properties also which are optional.

So here are the some Important UI elements in Web Dynpro and thier mandatory properties.

• Input Field : To display the input field and its mandatory property is Value. ( more )
• Label: To display the label for text or input field and its properties are Text & LabelFor. (more)
• TextView : To display the text and its mandatory property is Text. (more)
• TextEdit :  To display the text in editable form and its property is Value. (more)
• PageHeader : To display the Header and its property is Title. ( more )
• Button : To place the button and its property are Text & onAction( ). (more)
• Image : To insert the images and its property is Source. (more)
• CheckBox : To display the Check boxes and its properties are Checked & onToggle( ). (more)
• CheckBoxGroup:To display the check boxes as group and its properties are Text & onToggle( )(more)
• DropDownByIndex : To insert the drop down by index functionlity and its properties are Text & onSelect( ).  (more)
• DropDownByKey : To insert the drop down by key functionlity and its properties are Selected Key & onSelect( ).  (more)
• RadioButtonGroupByIndex: To insert the radio button as group by index and its properties are Text & onSelect( ).  (more)
• RadioButtonGroupByKey: To insert the radio button as group by key and its properties are Selected Key & onSelect( ). (more)
• LinkToAction: To insert the link as action and its properties are Text & onAction( ). (more)
• LinkToURL: To insert the URL and its properties are Text & Reference (more)
• Table : To insert the table and its property is  DataSource (more)
• ItemListBox : To insert the Item List Box and its properties are DataSource. (more)
• BusinessGraphics: To insert the map and its properties are SeriesSource,  X-axis( Category) i.e Descriptions and Y-axis(SimpleSeries) i.e Value  (more)
• Iframe: To display the files on the browser and its property is Source. (more)
• ProgressIndicator: To insert the progress indicator bar and its property is PercentValue. (more)
• Tree : To insert the tree and its property is DataSource. (more)
• DateNavigator: To insert the calandor and its properties are FirstSelectedDate, LastSelectedDate, StartsWith,  SelectionMode. (more)
• FileUpload : To upload the file from local machine and its properties are Data, FileName, MIMEType.  (more)
• FileDownload : To download the file and its properties are FileName, Texts MIME Type. (more)
• InteractiveForm: For dispaly Adobe Form and its properties are DataSource, TemplateSource, PDFSource. (more)
• TimedTrigger: To insert the time delay and its property is Delay (more)

Other Screen Elements are

• TabStrip
• ContextualPanel
• Tray
• Group
• ScrollContainer
• ViewContainer
• TransparentContainer
• InvisibleElement
• MessageArea
• HorizontalGutter

LayOuts in WebDynpro Screen Designing

There are different types of layouts availabel in WebDynpro such as

• FlowLayout , default layout
• GridLayout
• MatrixLayout
• RowLayout
• FormLayout

I have listed above all the UI elements and Layout with link. And I have it will be help you out to understand the UI elements.

In further post you will learn how to use these UI elements. 

Thanks and don't forget to comment