Let’s Web Dynpro. Part IV

Share on Facebook4Share on LinkedIn0Tweet about this on TwitterShare on Google+0
Please Share!!

In Part III, we displayed a simple output with multiple lines as output. If you check the initial screen, it has the input fields, dates, execute button and the output table structure. In acutal project, user would not like to see the blank output table structure. Also, user would like to get an error message if the mandatory fields are missing.

[adToAppearHere]

In this post, we would show, how to declare the UI elements as mandatory and also how to show the output elements (in this case the output table) only when it is needed, dynamically.

On your mark, get set, go…. 😛

A) Output table visibility to be dynamically controlled.

Check the blank output table with SO, Created no/by and SO Type. If you are the user, you would NOT like to see these structure, when you are in the initial screen.

2

Why is it displaying?
Because, we have hardcoded the UI element to be always visible (as shown in screen shot).

4

Solution:
Instead of hard coding it to visible, we should point it to a variable, which should be blank (false) when the user first enters the screen. Once the user hits the execute button, that variable should be flagged (true) to indicate the visibility.

How to do control the visibility?

Step 1: Define a context node (cardinality 1:1 should be enough) and define an attribute (say set_table_visible). This attribute is our variable, which we would bind with the output table visibility parameter.

5 6

Step 2: Bind the visibility property with set_table_visible attribute as shown in figure. Done!! The output structure would not be visible now.

7  8

Step 3: But, it would not be visible even if you hit execute. Because, you have not written the logic to set the attribute to true, when execute button is hit. In the method which is called on execute button, set the attribute to true, using the magical wand as shown in the screenshot.

9 10

After removing the commented lines, your code should look like below. You just need to set the variable to ‘X’ or ABAP_TRUE. Only one line of code has to be written as shown in line 43 of screenshot.

Step 4: Test it. Your output is visible only when you hit the Execute button.

11

B) Error message should be displayed if mandatory fields are not entered

Step 1: Make the State property of the input field to “required”. This would put a small red asterisk (*).

3

Begin a developer, we assume our work is done. Now Web Dynpro framework should handle it automatically. But, we need to implement one more step. 🙂

Step 2: In the event handler method which is triggered by your button (ONACTIONEXECUTE for this example), we need to write the below piece of code. Basically, it calls standard method check_mandatory_attr_on_view and give the missing mandatory fields message.

13

Web Dynpro would show the message in default area. We can define our message area and show the message in the place where we want in the screen.

Check the output.

14

Link for code snippet for Part III and Part IV in the Execute button method: OnActionExecute

In Part V, we would see how we can display the same tabular output in ALV with Component Usage.

Please let us know, if you face any issue in any of the steps. We would be glad to elaborate them.

If you want to get practical issues and resolutions straight to your inbox, please SUBSCRIBE. We respect your privacy and take protecting it seriously.

If you liked this post, please hit the share button at the left side of your screen.

Thank you very much for your time!!

Our series on Web Dynpro ABAP

1. Let’s Web Dynpro. Part I : Overview of Web Dynrpo
2. Let’s Web Dynpro. Part II : Create your first Web Dynpro Application
3. Let’s Web Dynpro. Part II : Display a simple tabular output in Web Dynpro
4. Let’s Web Dynpro. Part IV : Show and hide UI elements dynamically in Web Dynpro
5. Let’s Web Dynpro. Part V : ALV display explaining Component Usage in Web Dynpro
6. Let’s Web Dynpro. Part VI : Add custom buttons programmatically to the ALV output tool bar/header
7. Let’s Web Dynpro. Part VII : Personalization and Customization in Web Dynpro
8. Let’s Web Dynpro. Part ZZ : Export an EXCEL file with data in cell formatted excel sheet with colors, borders, filters in Web Dynpro
9. Is data element WDY_BOOLEAN and Flag (Char1) same for Web Dynpro ALV? : Trick to create checkbox in ALV
10. Taking one step back after EhP7.4, does it make sense for Web Dynpro UI? : Getting back the old look and feel after EhP740 upgrade
11. Can we avoid Table Type declaration for Attributes section in Web Dynpro?

Image source: via Free Stock Photos foter.com

Share on Facebook4Share on LinkedIn0Tweet about this on TwitterShare on Google+0
Please Share!!

About the Author

SAP Yard
SAP Yard
SAPYard is one stop page for all Technical Folks in SAP. You would find un-conventional explanations, tutorials, and tricks. Please like our Facebook Page and also join our LinkedIn Group.

Be the first to comment on "Let’s Web Dynpro. Part IV"

Leave a comment

Your email address will not be published.


*