SAP Adobe Interactive. Part XVIII. How to Hide a Table Column Dynamically Using JavaScript?
We’ve recently been working on a real-world use case for Interactive SAP Adobe Forms. In this post, we demonstrated a real-world project situation in which we used Java Scripts
to hide/display a table column in a simple, hierarchical
business model.Essentially, we will show a practical example
of how to use Java script to conceal or display a certain
column in an Adobe forms table. It is a frequent demand and there
are numerous ways to fulfill it, and JavaScript is the
lucky choice for our project.
Business requirement:
Table Data Structure is as follow:
Requirement: At runtime,
- When Product is “EDITION”, column Territory should be hidden
- When Product is “RENDITION”, column ISBN should be hidden
The expected result should be as follows:
To further understand, let’s use a basic example rather than the layered table structure described before.
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. In Adobe Layout, create a table from the data view using IT_DETAILS as follows:
Column Territory should be hidden if the user enters “E” as the product type. So, whenever each body row of the table is populated, we must read the product type IV_PRODUCT, and the corresponding column for the same data row should be hidden.
3. Write a driver application to invoke Adobe form functions, load test data into this table, and then pass the table into an FM that is generated by an Adobe form. The test data might look like this:
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 Adobe form, please refer my previous article)
Let’s try to understand the highlighted script code.
Adobe’s XML Form Architecture, or XFA for short, is the foundational component of an XML file used by Adobe PDF. By providing its path as a parameter in the resolveNode method, we can gain access to a particular object in the hierarchy. The reference of the object supplied as an argument would be returned by this method, allowing us to utilize the relevant characteristics of that object.
- We obtained the IV_PRODUCT context field reference in the highlighted script, and we used the rawValue property to obtain the product type value that the user had supplied in a local variable called product.
- We attempted to set the visibility attribute (presence) of the corresponding columns to “hidden” based on the product value.
5. Test program creation and result of adobe form print-preview:
a. In the test driver software, create the selection parameter P_PROD that the user will supply to call the Adobe form.
b. Test the program and observe the result:
You can see that the Java script has successfully hidden the column value (Territory as Product type input as E) if you compare the above result with the actual test data from step 3. However, the column header “Territory” has not been deleted. As a result, every column has been moved one spot to the left, creating an incorrect PDF form.
How to correctly display the data?
Another Java script must be written for the table header row’s startup event since we also need to hide the matching column headers from the 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:
The current object in which the event has been written will always be referenced. This would be in reference to “data.sbf_details.GT_DETAILS_simple.header” in the highlighted sentence above. Script code is built to set the presence property of territory and isbn texts because we wish to hide a particular field in the header.
- txt_territory : Text field name in header in hierarchy for Territory column
- txt_isbn : Text field 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:
- Since the Territory column is fully hidden and the product entered is “E,
- ” we have met the criterion. Nevertheless, there has been a disturbance in the column width. The NET_UNITS field was not set as large as it seems in the following example. The ISBN column width has taken its place, and this also applies to any further columns that follow.
What would be the exact solution now?
We noticed that in addition to concealing a column field and header, we also need to dynamically modify the column width. This can be accomplished by writing Java Script code in one location, which will handle everything at once, as opposed to creating numerous Java Scripts on multiple objects (BodyRow, HeaderRow, Table Column Width changes).
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 that the product entered is “E,” the Territory column is suppressed and all column widths are shown correctly.
- However, the height of the column header is now automatically changed A “Text” UI’s layout properties cannot be changed dynamically, thus we must change its type to “Text Field” and double-check the outcomes.
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:
Using Java Script code, we have now seen numerous methods for hiding or displaying a certain column in Table UI in Adobe forms. The most effective and straightforward method is to use Table’s Property
column Width. The aforementioned straightforward table use case allows us to apply the same guidelines to intricate corporate settings.
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
We must now read the Product field for each DATA record in IT_NESTED and modify the columnWidth property of the DETAILS Table in order to conceal or display the matching columns in the details table.
13. Write the below Java script code in initialization event of table DETAILS as follow:
14. Check the result in print-preview:
As you can see, we can quickly accomplish complex business scenarios with just one Java Script code block. That is Adobe Forms’ Java Script’s strength. These days, SAP Adobe makes extensive use of JavaScript. JavaScript is crucial to SAPUI5. It’s imperative that ABAP engineers understand JavaScript for their career advancement. `
YOU MAY BE INTERESTED IN
Is SAP ABAP a High Paying Job?
