Oracle Apex Interactive Grid - Changing column size via JS not working in specific case - oracle-apex

My enviroment:
Apex 21.2
Oracle 19.3
Requirement:
in a page i need to show 3 IG based on table and queries.
first and third IG are in single record view mode (query returns just one row), second is in normal view mode (multi records).
I need to resize a column, say DUMMY, in second IG to width=0% (for other technical reasons)
The column could not be hided, because i need to modify it programmatically.
Problem:
When IG1 and IG3 are in normal view, IG2's column is resized, while not when IG1 and IG3 are in "single record view"
How to reproduce:
in "Execute when Page Loads"
var ig$ = apex.region("IG_1").widget();
ig$.interactiveGrid("getActions").invoke("single-row-view");
ig$ = apex.region("IG_3").widget();
ig$.interactiveGrid("getActions").invoke("single-row-view");
in Dynamic actions -> Action fired on Page Load -> True action -> Execute Javascript Code:
apex.region("IG_2").widget().interactiveGrid("getViews","grid").view$.grid("setColumnWidth", "DUMMY", 0);
--> this could be putted in "Execute when Page Loads" with same unsuccessfull result
Any help will be appreciated.
Thanks

Related

Oracle APEX - how to read a cell from interactive grid

The same question once again but with (I hope) better explanation:
I created the most simple case:
An Interactive Grid IG with data source EMP ( table with 14 records contains Ename, Job, HireDate, Salary etc. etc.)
Text field P7_ENAME
After running it looks like below:
What I would like to do is to copy Ename from selected record of IG to P7_ENAME field .
I found several tutorials (text and video) how to do it. Most of them suggest to create dynamic action SelectionChange on IG and when TRUE add a JavaScript code something like below:
var v_ename;
model = this.data.model;
v_ename = model.getValue( this.data.selectedRecords[0], "Ename");
apex.item( "P7_ENAME" ).setValue (v_ename);
and the second step is to create another action: Refresh.
So finally I have a dynamic action with two steps : the first one is a Java script code and the second refresh function on my P7_ENAME field.
Sounds simple and it is simple to repeat/implement. A guy (I suppose) from India published a video on YouTube (https://www.youtube.com/watch?v=XuFz885Yndw) which I followed and in his case it works good. In my case it simple does not work - field P7ENAME is always empty, no errors appears. Any idea why ? Any hints, suggestion ?
thanks for any help
K.
The best way to debug and achieve what you are trying to do is as follows:
create the Dynamic action with the following setup:
-when -> selection change[interactive grid],
-selection type -> region, region -> your IG region,
-client side condition -> javascript expression: ```this.data.selectedRecords[0] != undefined```
First action of the true of the DA with the type: execute javascript code and fire on initialization is turned on, code: console.log(this.data.selectedRecords);
Run your page, and check the browser console. You should see an array of columns when you select a record from that IG as follows:
Find in that array, which sort number of the array contains the data that you want to use for the page item. Let's say I want the 3rd element which is "2694" then I should change my dynamic action's execute javascript code to:
var value = this.data.selectedRecords[0][2];
apex.item( "P7_ENAME" ).setValue (value);
The last thing I should do is add another true action (and the refresh action at the end) to the same dynamic action with type 'SET VALUE' and 'PLSQL EXPRESSION' as type, put :P7_ENAME in the expression, items to submit P7_ENAME and affected element: item / P7_ENAME as follows:

Oracle Apex: How i can make page item Display Only while can still be updated through Dynamic Action

have a page with some page items (region on top of page) and an interactive grid below it. one of page item have sum of an ig column, another page item is Discount, after user enter any discount amount, there are more 2 columns updated/calculated with Dynamic Actions. how i can prevent user interaction with those page items except Discount which required to.
you can use custom css class to that item and inline css for display only, or you can use custom attribute to item as disabled.
You can check afterwards on browser console on dom if it is on the correct level of the page item.
For example I have a textfield item on the page:
if I use staticid or id that is generated by the Oracle Apex and on the page's execute when page load section:
$('#P30_ORDERNR').attr('disabled');
this will add disabled attribute to my item which means it can be set but not by user.

APEX changing row colors in an IG

I am following an example I found on-line as since I found it on the internet I know it must be correct. I am trying to search for a specific value in an IG and when it is found the line/row is highlighted with red text, Below it the logic I followed and screen shots. Please let me know what I am missing. He is using an employee example and I using my car dealership example. Thank you !
"Here's another approach that works great:
For an IR with this query:
select EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO,
OFFSITE
from EMP
Define for the column JOB the following Static ID: MANAGER_STATIC
Then create a DA After Refresh on Region where On True Execute the following javascript with Fire
on Page Load=ON:
this.affectedElements.find('td[headers="MANAGER_STATIC"]').each(function(i) {
var lThis = $(this);
if (lThis.text() == "MANAGER") {
lThis.parent().children().css({
"background-color": "#C0C0C0"
});
}
});
And every row that has the value of MANAGER will be highlighted and this will respect pagination.
That Example appears to be for an Interactive Report, but you appear to be using an Interactive Grid.
The easiest way to do this (without coding) is to run the report and use the Actions Button to define Highlighting. E.G.
Fill out form similar to this (Change column selection and value to your requirement):
Afterwards, using the Action Button again to Report->Save the report so it saves the report for All Users.

How to save and return to newly created item in previous page?

I have an interactive report and a form associated to it. After creating a new entry using the form, my end-users want to put the focus on that specific new entry in the interactive report (it's a lot of entrys, and today they need to scroll down a lot to see the new one).
They also want the same funcionality when updating a row of the report.
How can I do this the correct way in APEX 5.1?
Here is one aproach based on EMP table in apex.oracle.com Create interactive report with edit form. In my case this is page 6 for report and page 7 for edit. Create one hiden item on page six (P6_EMPNO). Add case to your query so in my example it's look something like:
select "ROWID",
"EMPNO",
"ENAME",
"JOB",
"MGR",
"HIREDATE",
"SAL",
"COMM",
"DEPTNO"
from "#OWNER#"."EMP"
ORDER BY CASE WHEN EMPNO = :P6_EMPNO THEN 1 ELSE 2 END, EMPNO
I'm sorting result by EMPNO.
Choose P6_EMPNO in Page Items to Submit section. Go to page 7, select branch(Go to page 6)and click on Target In set items section choose P6_EMPNO and for target &P7_EMPNO.
Now every time you go to page 7, the value of hiden item will be the EMPNO from page 7 and it will apear on top of the region. You can use jQuery to highlight the row and put some validations to update P6_EMPNO only when some data was changed.
I hope this can help you.
easy.
You don't even have to create any additional page items. Change your form DML so that it returns into the primary key page item holder. Then Create a process after your DML process but before the reset cache process. Use APEX_IR API to reset pagination on your IR page, and then set an interactive report filter based on the primary key page item you returned the new PK into. Check the documentation for exact usage.
Apex_IR.reset_report to reset the report pagination and remove any filters.
Apex_ir.add_filter to add a filter = to new primary key
Interesting question, another solution:
Create a item in your report page, something like P3_ANCHOR
Add data-anchor="#< YOUR_COLUMN_ID >#" to your report link attribute
Configure your form page to return the created/modified item id to item P3_ANCHOR in your report page.
Create a Dynamic Action on report page
Action: Execute Javascript Code
Code:
var container = $('body'),
scrollTo = $('[data-anchor="'+$v('P3_ANCHOR')+'"]');
container.animate({
scrollTop: scrollTo.offset().top - $(document).scrollTop()
}, 2000);
Simple solution:
Sort your report descending so that the last created ID will be the first in the IR

How to perform partial refresh of page in APEX5.0

I have an APEX page where it contains multiple regions. Each region has its own drop down list (Select list) item and a bar chart. My problem is from any particular region when I select a value from the drop down list, the whole page is refreshed as I have the option Submit page set for Page Action on Selection property.
How do I perform partial refresh so that during the selection from drop down list only the bar chart for that region should be refresh and not the entire page?
Go on your select list item and change the Page Action on Selection property from Submit Page to None. Then create a dynamic action on page with the following options:
Event=Change
Selected Type=Items
Item=Your select list item
Action=Refresh
Selection Type=Region
Region=Your bar chart
Same as answer above with one trick to make it work. The value in your select list has not been submitted so will be null and not work.
Add another Dynamic action that runs before the refresh one of type PLSQL. set the code to null; then add your select list to the "items to submit".
Should work now :)