Skip to Main Content
Forums

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

How to dynamicaly show/hide columns with JS based on current month?

Faaiz QadriFeb 21 2022

Hello,
I have a table with month names as columns and each month I would like to show and hide specific columns dynamically without manually changing the application each month. For e.g, if it is February now, I want to hide the column named 'January' and show the column 'February' till 'December'. When March starts, the JS function should hide February and show from March column onwards.
Right now I am doing something like this in 'Attributes -> JS Initialisation Code':
const d = new Date();
let month = d.getMonth();

if (month === 1) {
gridView.view$.grid("hideColumn", "JANUARY");}
else {
gridView.view$.grid("showColumn", "FEBRUARY");}

However, this is not working at all. Any sort of help will be appreciated.
This post has been answered by Hamza Al-abbasi on Feb 21 2022
Jump to Answer

Comments

SmithJohn45

when we use Show/Hide Action using Dynamic Action on an IG column, it throws error that "Show/Hide column not supported actions for Interactive Grid columns" may be this is the problem.
image.pnglet the seniors advise.

Faaiz Qadri

I am so far not using DA because something needs to happen for the DA to trigger. I want this to be part of my JS code to get current month every time the application is started and show/hide columns based on the month.

Hamza Al-abbasi

However, this is not working at all. Any sort of help will be appreciated.
How ? do you get any error ?
Have you defined the grid first ?

var gridView = apex.region("YOUR_IG_STATIC_ID").call("getViews").grid; // Replace "YOUR_IG_STATIC_ID" with your IG static id attribute
Faaiz Qadri

when I try to edit the 'Attributes -> JS Initialisation Code', I get a strange error like: 'Value too long by 95 characters!'
function(config) {
config.reportSettingsArea = false;
const d = new Date();
let month = d.getMonth();
var gridView = apex.region("prognose_ig").call("getViews").grid;
if ('month' === 1){
gridView.view$.grid("hideColumn", "JANUARY_PROGNOSE");}
return config;
}

I am also trying by creating a function at 'Page->Function and Global Variable Declaration':
function hideCol() {
const d = new Date();
let month = d.getMonth();
var gridView = apex.region("prognose_ig").call("getViews").grid;
if ('month' === 1){
gridView.view$.grid("hideColumn", "JANUARY_PROGNOSE");}
}
Can you tell me exactly where the code should be put and what should the code look like? Thank you.

Hamza Al-abbasi
Answer

In Function and Global Variable Declaration:

function hideCol(){
  const d = new Date();
  let month = d.getMonth(),
      gridView = apex.region("prognose_ig").call("getViews").grid;

  if (month === 1) {
    gridView.view$.grid("hideColumn", "JANUARY");
  }
  else {
    gridView.view$.grid("showColumn", "FEBRUARY");
  }
}

In Execute when Page Loads :

hideCol();
Marked as Answer by Faaiz Qadri · Feb 21 2022
1 person found this helpful
Faaiz Qadri

Thank you for help. I guess I was doing also almost the same thing as you. My IG static id attribute was 'prognose' but it showed as 'prognose_ig' in page source. It works now with 'prognose'

InoL

As you see you can do this with JS, but it looks much easier to do this with a Server Side Condition on the column.
Column: January
Condition: to_number(to_char(sysdate,'mm') <= 1
etc.

1 person found this helpful
Faaiz Qadri

so if this condition is true, the column will act the way we make it to, i.e., hidden, display only, number field, etc.?
I find it a bit confusing to be honest.

Mohamed Sameer

@hamza-alabbasi is there any way to clear the column values while hiding?

1 - 9

Post Details

Added on Feb 21 2022
#apex-discussions, #column, #dynamic, #javascript
9 comments
8,907 views
1 mention