APEX changing row colors in an IG - oracle-apex

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.

Related

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

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

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- Enter a value and convert it to a link

I have a Master Detial with 2 interactive grids.
I would like to be able to genrate a link based on user input....is that at all possible?
To give a simple example:
Lets say I have website like https://www.google.com/
I would like a user to enter anything...for example "Prague"
Once this is entered, I would like APEX to generate a URL from it to result in: https://www.google.com/Prague
Now I know that Google search does not work like that, but I need that sort of mechanism for our internal company app. Is this possible?
Ideally , once the grid is saved the link in the Interactive grid only said "Prague" but if I click it, it would direct me to https://www.google.com/Prague
This can be achieved using the "JavaScript Initialization Code" attribute of the column.
Example on the EMP sample table (*). Functionality is that when a user enters a value in the ENAME column, it is converted to a google search url.
Create an editable IG on table EMP
Set the type of column ENAME to "Text Field"
Set "Javascript Initialization Code" for column "ENAME" to
function(config) {
config.defaultGridColumnOptions = {
cellTemplate: '&ENAME.'
};
return config;
}
Notice that the column now is a link. A user will have to open in new window to get the actual link value, since clicking the column will active the edit mode.
(*) Sample dataset can be installed using SQL Workshop > UTILITIES > Sample Data Sets > EMP/DEPT
yes, you can let user enter the value and by creating a dynamic action(choose the when attribute as whatever suits you) you can take that value and on another column, use that column as &Columnvalue. for example and concatanate it by using to base url using ||

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 only display 'Edit' link on certain rows on apex interactive grid?

I have an interactive report apex5.0 which contains several fields.
Would like to disable 'edit' pencil option link where payment_date & code is populated.
Link is to be enabled only where payment_date & code is null.
Disable the edit button for a particular row, based on a specific value in its column.
For ex. If a grid has 3 columns A,B,C and if B contains "Apple", and '01-jan-17', the edit button for that row must be disabled.
What are the different options to do this kind of functionality in apex5.0, enable & disable "EDIT" based on certain criteria?
You could also add a case statement to your report's query.
E.g.
(Case when [some logic] then
--display link
'<img src="#IMAGE_PREFIX#menu/pencil16x16.gif" alt="" />'
End) as col_link
The above example will only display a link if the case statement is met. The link will point to page 47 and we will pass the query's Id column to page 47's item P47_ID
In order to treat this new column as a link you must change the "display as text" property to "standard report column"; you can achieve this when editing the report attributes.
One way is to use JavaScript on page load:
Let's asume that first column is with ID and used to show edit link. Second column is your product name like Apple. Just disable click on this element(cell with ID) or change link, img etc.
var table = $(".a-IRR-table tbody");
table.find('tr').each(function (i, el) {
var $tds = $(this).find('td'),
productId = $tds.eq(0).text(), //first column with ID and edit link
product = $tds.eq(1).text(), //second column
Quantity = $tds.eq(2).text(); //third column
if (product == 'Apple'){
$tds.eq(0).click(false);
$tds.eq(0).replaceWith('');
}
});
Thanks to this answer for JavaScript: Loop Through Each HTML Table Column and Get the Data using jQuery
EDIT:
To hide value based on your Query use CASE. For example:
SELECT
CASE
WHEN B = 'Apple' THEN
'<img src="#IMAGE_PREFIX#edit.gif" alt="">'
ELSE ''
END edit_link,
A,B,C
FROM TABLE_NAME
Click on column edit_link and make it of type Link
Choose your target to edit page
For link text select #EDIT_LINK#
Escape special characters must be set to NO
On Report Atributes set **Link Column** to **Exclude Link Column** (you have custom link column so don't display original link)
*Check your online workspace, page 3*