Full View or Normal View of Tabular Form Columns in APEX

Description:A tabular form enables users to update multiple rows in a table at once from a single page. You can use the Tabular Form Wizard to create a tabular form that contains a built-in multiple row update process. This built-in process performs optimistic locking behind the scenes to maintain the data integrity

Step:1:

Create relation between table header and table data

<td class=”t-Report-cell” rel=”#COLUMN_HEADER_NAME#” #ALIGNMENT# headers=”#COLUMN_HEADER_NAME#”>#COLUMN_VALUE#</td>

Step:2:

Normal View  

Functionality: Show / Hide required columns on-click

Order the Columns accordingly,

1.Create Button with dynamic action as Execute Javascript Code,

  1. For Example, If you have 25 columns, Arrange first 6 as your main visible columns

and so that you can form a loop and hide after 6, Use following Jquery inside your loop

 var a = $(‘.t-Report-report’).find(“td:eq(“+i+”)”).attr(“rel”);

 $(‘.t-Report-report’).find(“th:eq(“+i+”), td:eq(“+i+”)”).hide();

 $(‘td[rel=’+a+’]’).hide();

i                         Represents the nth column of <table>

.t-Report-report            Class of the report

.find                      Finds the selector specified in braces

td:eq(“+i+”)               equals (eq) nth(i)  table data(td)

.attr(“rel”)                Finds attribute rel

.hide()                    Hides the selector

Step:3:

Full View

Functionality: Show / Hide required columns on-click

1.Create Button with dynamic action as Execute Javascript Code,

  1. After main columns we should show remaining columns so that here loop starts         with last column of Normal View. Include following Jquery in loop,

 var a = $(‘.t-Report-report’).find(“td:eq(“+i+”)”).attr(“rel”);

 $(‘.t-Report-report’).find(“th:eq(“+i+”), td:eq(“+i+”)”).show();

 $(‘td[rel=’+a+’]’).show();

i                         Represents the nth column of <table>

.t-Report-report            Class of the report

.find                      Finds the selector specified in braces

td:eq(“+i+”)               equals (eq) nth(i)  table data(td)

.attr(“rel”)                Finds attribute rel

.hide()                    Hides the selector

Output : Normal View 

Notice Buttons , Above is in Normal View. So, Full View button is displayed

Output : Full View

Notice Buttons , Above is in Full View. So, Normal View button is displayed

Recent Posts