Standard service - a fixed amount of work that is performed at a fixed price.  Post Service

  

Sunday, 12 May 2019 18:46

Interactive Adobe. Part 18. How to Hide a Table Column Dynamically Using JavaScript?

Written by  https://sapyard.com/interactive-adobe-part-18-how-to-hide-a-table-column-dynamically-using-javascript/
Rate this item
(0 votes)

Of late, we have been working on real use case of Interactive SAP Adobe Form. In this article, we have illustrated a real project scenario of using

Java Scripts to hide/display a table column in a simple and nested business model. Basically we will see a practical example of using Java script to hide or display a specific column in a table in Adobe forms. It is a very common requirement and there are many ways to achieve it and JavaScript is the lucky chosen one for our project. ?

Businessrequirement:

Table Data Structureis as follow:

Requirement: At runtime,

  • When Productis “EDITION”, column Territoryshould be hidden
  • When Productis “RENDITION”, column ISBNshould be hidden

Expected result should be as follow:

Check, Territory and ISBN are toggled on or off based on Product value.

Also Read: How to Execute URL Dynamically by Button Click Event in SAP Adobe?

For better understanding, let’s try with a simple example rather than nested table structure as above.

  1. Create an Adobe form ZPB_HIDE_TABLE_COLUMN with an interface with import parameter as IV_PRODUCT and IT_DETAILS.
  • IV_PRODUCT : Product Type entered from driver program
  • IT_DETAILS : Detail table with following structure

2. Create a table from data view using IT_DETAILS in Adobe layout as follow:

As per the business requirement, Column Territory should be hidden whenproduct type entered by user is “E”.

So whenever each body row of table will be initialized, we need to read producttype IV_PRODUCT and corresponding column for the same data row should behidden.

3. Create a driver program to call Adobe form functions and fill this table with test data and pass that table into Adobe form generated FM. Test data would be displayed as follow:

4. In the script editor, Write the below Java script code in initialization event of body row of table GT_DETAILS_SIMPLE as follow:

(For details of using scripts in Adobeform, please refer my previous article)

Let’s try to understandthe highlighted script code.

XFA stands for Adobe’s XML Form Architecture and it’s the root element of xml file for adobe PDF. If we want to access a specific object in the hierarchy, we can access it by passing its path as parameter in resolveNode method. This method would return the reference of the object passed as parameter and we can use the appropriate properties of that object.

  • In the highlighted script, we got the reference of IV_PRODUCT context field and using property rawValue, we got the user entered product type value in a local variable product.
  • Based on product value, we tried to set the visibility property (presence) of respective columns as “hidden”.

Also Read: My First Program in S/4HANA ABAP

5. Test program creation and result of adobe form print-preview:

a. Create a selection-parameter P_PROD which will be passed by user in the test driver program for calling Adobe form.

b. Test the program and observe the result:

If you compare the above result with actual test data from step 3, you will observe that actually Java script has worked out to hide the column value (Territory as Product type entered as E) but column header “Territory” was not removed. Therefore, all the columns have been shifted 1 place to the left and therefore resulted into a wrong PDF form.

How to correctly display the data?

We have to hide corresponding column headers from Tableheader row as well so we need to write another Java script in initializationevent of table header row.

6. In the script editor, Write the below Java script code in initialization event of header row of table GT_DETAILS_SIMPLE as follow:

this will always refer to the currentobject in which event has been written. In the highlighted sentence above, thiswould refer to “data.sbf_details.GT_DETAILS_simple.header”.Since we want to hide a specific field of the header, script code is written toset the presence property of territory and isbn texts.

  • txt_territory : Textfield name in header in hierarchy for Territory column
  • txt_isbn : Textfield name in header in hierarchy for ISBN column

7. Test the program and observe the form result in “Print-Preview”:

Two important observations if we compare the above result with actual test data in step 3:

  • We achieved the requirement as Territory column is completely hidden as Product entered is “E”.
  • However, column width of the columns has been disturbed. We didn’t set NET_UNITS column as wide as shown above. It has been replaced with column width of ISBN and same applicable for subsequent columns afterwards.

What would be the exact solution now?

We observed that apart from hiding a column field and column header, we also need to adjust the column width dynamically. For that, rather than writing multiple Java Scripts on multiple objects ( BodyRow, HeaderRow, Table Column Width changes ), we can achieve this by writing Java Script code at single place and it will handle everything at once.

Also Check – How I Create My First SAP OData Service?

8. After step 3, Follow this step and write the below Java script code in initialization event of table GT_DETAILS_SIMPLE as follow:

Explanation of above Script code is as follow:

  • var width = this.columnWidths – Return the whole string as set of all column’s width
  • var array = width.split(” “) – Split the width string by space, return an array with each column
  • array[2] = ‘”0.001mm” – Replace third column width with 0.001mm.
  • array.join(” “) – Concatenate all the array data sets and return a string.

9. Test program creation and result of adobe form print-preview same as step 5 above:

Now all the columnwidthsare correctly displayed and Territorycolumn has also hidden as productentered is “E”.

But now, column header height has been adjusted automatically. We can’t change the layout properties of a “Text” UI dynamically so we have to change its type to “Text Field” and re-check the results.

10. Change the type of the Header columns to “Text Field” as follow:

a. Select column header and go to Object palattes:

b. Set the default column header text as follow:

c. Follow the above steps for all column headers.

11. Repeat step 9 and check the result in print-preview:

a. When Product = E

b. When Product = R

Conclusion:

We have now observed many ways to hide or display a specific column in Table UI in Adobe forms using Java Script code and the best and easy way to control it using Table’s Property columnWidth. With the above simple table use case, we can apply the same rules on complex business environments.

Also Read: An ABAPer’s First SAPUI5 Application

We will now learn how to handle a nested Table columns controlled by Java Script.

12. a. Extend the above Adobe form with new context created in form interface:

IT_NESTED : Detailed Product structure with Table type as follow:

b. Create a table from data view using IT_NESTED in Adobe layout as follow:

c. Set the PRODUCT_TYPE column in table IT_NESTED as invisible

Now, for each DATA record in IT_NESTED, we have to read Product field and based on that, we have to adjust columnWidth property of DETAILS Table (which would hide/display corresponding columns in details table).

13. Write the below Java script code in initialization event of table DETAILS as follow:

14. Check the result in print-preview:

You can see that with a single Java Script code block, we can achieve the complex business scenarios very easily. That’s the power of Java Script in Adobe Forms. These days, JavaScript is widely used in SAP Adobe. SAPUI5 is all about JavaScript. It is high time ABAP developers learnt JavaScript for their professional growth. ?

If you think our page is helpful, do not forget to share our links with your friends, colleagues and team members. Do like our facebook page and follow us at twitter and instagram.

Please SUBSCRIBE to ourYoutube channel for free end to end video courses.

Your feedback is most welcome. Please, please leave your comments below.

We have a very active Telegram (App) SAP Technical Group with more than 4775+ SAP Technical Practitioners from 6 Continents of the SAP World. Please join it using below link.
Telegram SAP Technical Discuss Group. You need to install the Telegram App first on your mobile device. Once you have it on your mobile, you can join the group and also access it from the Web on your computer and laptop.

Free Step by Step Course on Interactive Adobe Forms

Read 35 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.