Dynamically set Oracle Apex 5.1 interactive grid region header

1
votes

I'm wondering if it's possible to dynamically change the interactive grid region header text. I have an IG that provides detail from a "master" report, and I'd like the HTML header text to update dynamically to display the title of the master record being displayed.

I'm guessing I'll need to create a custom dynamic action, but I'm not sure how to identify / reference the region header text element.

I appreciate any ideas.

1
oracle-apex

1 Answers

2
votes

I created a Master/Detail page based on DEPT/EMP to come up with these steps.

  1. Give the child region a static id (I used js-ig-emps).
  2. In the Page Designer, right-click the parent region and select Create Dynamic Action.
  3. For the Dynamic Action, set Event to "Component Events > Selection Change [Interactive Grid]".
  4. For the Action, set Action to "Execute JavaScript".
  5. In Code, enter some JavaScript that updates the header of the child region using data from the parent.

Here's the code I used:

var selectedRecord = this.data.selectedRecords[0];
var selectedDept = this.data.model.getValue(selectedRecord, 'DNAME');
var newText = 'Employees in ' + selectedDept;

$('#js-ig-emps .t-Region-title').text(newText);

That assumes you're using Universal Theme. You'll need to make adjustments according to your requirements and the columns you have access to from the parent region.