3

I have an IG with a link column where the target is set to URL and I use it to call javascript.

What I want to accomplish is whenever a link column is clicked, grab a value of another - hidden column and set a page item to that value:

javascript:$s('P1_ITEM',#COLUMN2#);alert($v('P1_ITEM'));

but what happens, if I reference COLUMN2 value using just #COLUMN#, I get a javascript error and if I wrap it in single quotes, the value of P1_ITEM literally gets set to #COLUMN2#.

Coding Duchess
  • 6,445
  • 20
  • 113
  • 209

1 Answers1

2

The first thing I would recommend is that you move to a Dynamic Action rather than trying to put all the code in the link. Also, I think buttons are a better than links (and they can be styled to look like links).

Start by going to https://apex.oracle.com/ut. Navigate to Reference > Button Builder and build the button you want. Then copy the value from the Entire Markup field.

Change the Type of the Link column to HTML Expression and paste the HTML from the Button Builder in the HTML Expression field. I styled my button to look like a link (as you had it), added a custom class to the class property named my-button, and added a data-attribute for the primary key value (my table was EMP, so the PK was EMPNO). It looked like this in the end:

<button type="button" class="t-Button t-Button--link my-custom-button" data-id="&EMPNO.">Click me!</button>

Give the Interactive Grid a Static ID value of my-ig.

With that done, create a new Dynamic Action. Set Name to .my-button clicked, Event to Click, Selection Type to jQuery Selector, and jQuery Selector to .my-button. Finally, set Event Scope to Dynamic, which will use event delegation to keep the event binding working if the report refreshes (see this for details).

In the action, set Action to Execute JavaScript Code. Enter the following code in the Code field:

var id = $(this.triggeringElement).data('id');
var model = apex.region('my-ig').call('getViews').grid.model;
var record = model.getRecord(id);
var job = model.getValue(record, 'JOB');

$s('P1_ITEM', job);

alert($v('P1_ITEM'));

This code starts by obtaining the value of the primary key from the data- attribute on the button using jQuery's data method. Next, a reference to the model that is used by the IG is obtained. Then the model's getRecord method is invoked and the primary key value is passed in. Finally, the model's getValue method is used to get the 'JOB' value from the record. I went after the JOB column since I was using the EMP table, but you would go after whatever column you need.

You can learn more about the model methods here: https://apex.oracle.com/js > Interfaces > Model.

Dan McGhan
  • 4,479
  • 1
  • 11
  • 15
  • I really need to figure out how to just set the page item value based on a column value and I really need to do this in the link. Can you help? – Coding Duchess Mar 20 '20 at 12:45
  • You said two things 1) I really need to figure out how to just set the page item value based on a column value and 2) I really need to do this in the link. Regarding 1, didn't I show you how to do that? Regarding 2, can you please explain why? I'm just curious. – Dan McGhan Mar 20 '20 at 15:36
  • Does this: var id = $(this.triggeringElement).data('id'); still work in APEX 20.2? For me this code returns "undefined". I have 2 columns (in a IG) with radio groups that I need to check their values and based on the results run some javascript but I can't seem to find a way to do this that works – Dejan Dragicevic Mar 29 '21 at 20:38
  • 1
    Note that `var id = $(this.triggeringElement).data('id');`, so that should work unless jQuery was updated and they changed that method. However, the fact that you're getting `undefined` indicates the method is still there. Look at the button HTML and you'll see this: `data-id="&EMPNO."`. I'm using that to map the EMPNO value to the HTML element as a "data" attribute. jQuery's data method allows me to get that value. Make sure you have something like that too. – Dan McGhan Mar 30 '21 at 02:14
  • Thanks for the input... I tried adding data-id="&ID." to the advanced -> custom attributes of the column but it is not picking up the ID. When I inspect the grid I just see "data-id" . I have tried other methods of picking up the id : var id = $(this.triggeringElement).closest('tr').data('id') but this returns undefined as well. – Dejan Dragicevic Mar 30 '21 at 08:22
  • Just to be sure, "ID" is the primary key column name/alias and it is in the query for the region? – Dan McGhan Mar 30 '21 at 13:07
  • Yes....the result is the same be it the column is hidden...not hidden... – Dejan Dragicevic Mar 30 '21 at 15:00
  • I ended up going another route: var grid = apex.region('ig_region_id').widget().interactiveGrid('getViews','grid'); var model = grid.model; var selectedRow = grid.view$.grid('getSelection'); var id = $(selectedRow[0][0]).data('id'); var record = model.getRecord(id); – Dejan Dragicevic Mar 30 '21 at 18:19