Tips on dynamic columns in Adobe forms

Just like the ALV list, it’s common to have different layouts for various purposes. Also, it could have the same requirements for the adobe forms as well, like hidden some specific columns with specific conditions. Here in this article, just want to wrap up some tips for dynamic columns in Adobe forms.

Define alternative conditions in the Context

Define alternative conditions with the hierarchy of True/False, using the same table but inactive various fields accordingly to hidden them.

This method has disadvantages like it’s hard to adjust columns at design view as it’ll display all those tables (same table with different layout) stacked together. A little bit of dizzy like below : P Maybe fewer alternative conditions will be workable. For this example, I don’t want to touch it at all!~

Hide the columns by using javascript

Generally, there’re only two steps to hide the column by javascript.

• 1, Get the value from the interface transferred data

var lv_bukrs = xfa.resolveNode("$record.PO_HEADER.IM_PO_HEADER.BUKRS").value;

• 2. Use IF/ELSE statements to set element as ‘hidden’ / ‘invisible’

 if (lv_bukrs == "XYZ")
 {
   this.presence = "hidden";
 }

Be cautious that ‘hidden’ will shift the position of the rest elements if the contents have been set as ‘flowed’~ But invisible will still occupy the column’s original position.

For example, sometimes users want the ZERO to be displayed as space instead of ‘0.00’. No need to change currency/value type into character fields, using the attribute ‘invisible’ will do. But the most convenient way should be checking the ‘Allow Empty’ check box.

For more javascript examples at adobe form, please check this blog as a good reference.

Make the columns extremely narrow to hide it by using javascript

 data.Main.Items.Item_Data.ItemAdditionalInfo.SCH_RELEASE::initialize - (JavaScript, client)
// Get output type
 var lv_output = xfa.resolveNode("$record.HEADER.ZHOP_PO_HEADER.KSCHL").value;
 if ( lv_output == "ZLD1"  )
 {
// Get all table columns.
  var width = this.columnWidths;
// Split into array, each index represents a column.
  var array = width.split(" "); 
// Remove the second column width , [0] is first column, [1] is second column, etc..
  array[1] = "0.001mm";
// make it extremely narrow to hidden it
  this.columnWidths = array.join(" "); 
 }

Step 8 of this blog gives more details about this approach.

Merging internal table cells dynamically

This article from Raghu Prasad shows the way to merge different internal tables together dynamically by using javascript. Hope users don’t come up with such a complex layout~haha

Dynamic rows in Interactive forms

For dynamic rows in Interactive forms, there’s a DEMO form called ‘DEMO_IFBA_DYNAMIC_TABLE’ and you can check SAP help as well or this article from SAP technical.