Monday, 18 July 2016

Full View/ Normal View of Tabular Form Columns in APEX

                    
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,
  2. 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,
   2. 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 

No comments:

Post a Comment