Interactive grid - write values ​in text field when clicked - oracle-apex

With a query I have 3 values ​​that I would like to process further. With the LOV, I only get a return value. Or you can use a plug-in, I've read.
How can I transfer the values ​​from column 1 to text field 1, column 2 to text field 2 and column 3 to text field 3 by clicking on any row in an interactive grid?
I currently have a dynamic action stored in the interactive grid - when you "click".
With "True" I have selected the action "Set value" and as Set Type "Dialog Return Item". Unfortunately, it doesn't work that way.
I am not yet very fit in dealing with APEX and I hope your help.
Marja

add three page items page_item1, page_item2 and page_item1
You can create DA on the interactive grid on event selection change
Event
and action execute JavaScript code
JavaScript code
then write this code
var model = this.data.model;
for ( i = 0; i < this.data.selectedRecords.length; i++ ) {
$s("page_item1", $v("page_item1") += model.getValue( this.data.selectedRecords[i], "COLUMN1"));
$s("page_item2", $v("page_item2") += model.getValue( this.data.selectedRecords[i], "COLUMN2"));
$s("page_item3", $v("page_item3") += model.getValue( this.data.selectedRecords[i], "COLUMN3"));
}
`

Related

How I can make Mandatory add at least one row in Interactive grid in apex oracle

I have two region one form and one interactive grid like a master detail(company and company contact person ) how i can make the interactive grid mandatory ,the user can't submit page ,he/she need add at least one row in interactive grid ,
I can do that or I need to change the interactive grid to collection and count the row in validation
This one is a little tricky because of the way processes and validations work with Interactive Grids (they are executed once per submitted row). To work around this, I'll use a page item and a validation that works with it.
The basic idea of this solution is based on the fact that a new row will not have a primary key value. Here are the steps to reproduce (my example was on page 14, update the following as needed).
Create an Interactive Grid (IG) region. The primary key column should be Query Only (which ensures it's null for new rows).
Create a Hidden page item named P14_NULL_FOUND. Set Type under Server-side Condition to Never so that it never renders on the page.
Create an After Submit (before Validations) process. This process will NOT be associated with the IG so it will only fire once. Set the PL/SQL Code attribute to:
:P14_NULL_FOUND := 'NO';
That will clear out the value of the page item prior to the next process.
Create another After Submit process that runs just after the previous one. Set Editable Region to the IG. Then set the PL/SQL Code to something like the following:
if :PK_COLUMN_IN_IG is null
then
:P14_NULL_FOUND := 'YES';
end if;
You'll need to replace ":PK_COLUMN_IN_IG" with the name of the primary key column in the IG, such as ":EMPNO". This process will be run once for each submitted row in the IG. If a null value is found for the primary key column, then that would mean the user added a new row and the value of P14_NULL_FOUND would be set to 'YES'.
Create a new validation. This validation will NOT be associated with the IG so it will only fire once. Set Type to PL/SQL Expression. Set PL/SQL Expression to:
:P14_NULL_FOUND != 'NO'
Then set Error Message to something relevant.
At this point, you should be able to run the page and verify that the processes and validation are working correctly.
There is an another solution;
Create a page item like PX_ROWCOUNT which will hold the data of the row count of your IG.
Assign a static ID to your IG region.
Write a JS function to count the rows of the grid then set it to the page item. Sample function;
function f_setRowCount(){
var grid = apex.region("staticIDOfYourIG").widget().interactiveGrid("getViews", "grid");
var model = grid.model;
var rowCount = 0;
model.forEach(function (record) {
rowCount ++;
});
$s("PX_ROWCOUNT",rowCount);
}
To submit your page and run this function, change your submit button's behavior to Defined by Dynamic Action. Execute your function when user clicks to that button then submit your page via DA.
Add validation to Processing section of the page and check your page item there; PLSQL Expression => :PX_ROWCOUNT > 0
The solution by Hamit works nicely, except of the case of deletion of a row.
My suggestion is to amend the above code by adding inside the loop an if statement to check whether the row is editable or no.
So the code will be
var grid = apex.region("staticIDOfYourIG").widget().interactiveGrid("getViews", "grid");
var model = grid.model;
var rowCount = 0;
model.forEach(function (record) {
if (model.allowEdit(record)) {
rowCount ++;
}
});
$s("PX_ROWCOUNT",rowCount);

Button to change selected records

I have an interactive grid with a bunch of records, and I want to set up a button on the page that changes one column in all records currently selected.
Running APEX 18.2, the IG has a whole bunch of columns and I want to change just one of them, but on a whole bunch of rows, so I do need a button.
The IG has ROWID as PK because the actual PK is assembled from 4 different columns.
I have spent some time googling this issue and have found a couple people with solutions:
http://thejavaessentials.blogspot.com/2017/03/getting-selected-rows-in-oracle-apex.html
This is the first, and simplest solution. But it doesn't return any rowid or anything like that, it returns the value in the first column.
Then I also found
http://apex-de.blogspot.com/2018/09/update-several-rows-in-tabular-form-grid.html
and
https://ruepprich.wordpress.com/2017/03/23/bulk-updating-interactive-grid-records/
Which are pretty similair and seem to be the best for me, but I get a Javascript error in the console: http://prntscr.com/n5wvqj
And I dont really know much Javascript, so I dont know what went wrong or how to best fix it.
I set up a Dynamic action on button click that executes Javascript and I have the selected element being the region named CUR_STAT.
var record;
//Identify the particular interactive grid
var ig$ = apex.region("CUR_STAT").widget();
//Fetch the model for the interactive grid
var grid = ig$.interactiveGrid("getViews","grid");
//Fetch the model for the interactive grid
var model = ig$.interactiveGrid("getViews","grid").model;
//Fetch selected records
var selectedRecords = apex.region("CUR_STAT").widget().interactiveGrid("getViews","grid").view$.grid("getSelectedRecords");
//Loop through selected records and update value of the AVT_OBR column
for (idx=0; idx < selectedRecords.length; idx++)
{
//Get the record
record = model.getRecord(selectedRecords[idx][0]);
// set Value for column AVT_OBR on "D"
model.setValue(record,"AVT_OBR", 'D');
}
The column named AVT_OBR is a select list with display values(DA, NE) and return values(D, N). But I tried having it be a text field and it didnt help.
I want to be able to select multiple columns and change the data in those entries.
If possible I would also like to be able to change data in such a way in a hidden column. Or if I could get all the ROWIDs for selected records and execute a PLSQL block with them.
Ended up with noone responding so I spent a lot of time and finally came up with a solution.
var g = apex.region('myIG').widget().interactiveGrid('getViews','grid');
var r = g.getSelectedRecords();
for(i = 0; i < r.length; i++) {
g.model.setValue(r[i], 'myColumn', 'Value');
}
For some reason none of the solutions I found had worked. But I learned from those solutions and made this simple piece of code that does what I need.
Also, I was wanting to set up so I could do this set value on a hidden column, I achieved this by just having the column visible and editable, but then when running the page I clicked on the column and hid it, and set the current view as the default report.
If anyone stumbles upon this question, I hope it helps.

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*

Adding dynamically selected value to LOV in Oracle Apex 5

I have problem with multi-select LOVs in Apex 5.
I want to do, in programmatic way, select values in multi-select LOV.
For example I press button and some value will be selected in LOV.
Any ideas how to do this?
If you mean a Select List item that is set to allow multiple values then your button could execute this Javascript:
$('#P123_MY_MULTI_SELECT option[value="AAA"]').attr('selected',true);
$('#P123_MY_MULTI_SELECT option[value="BBB"]').attr('selected',true);
... etc.
Alternatively, you could use a dynamic action, but it wouldn't be any simpler. It would define the affected elements using a jQuery selector:
#P123_MY_MULTI_SELECT option[value="AAA"],#P123_MY_MULTI_SELECT option[value="BBB"]
... and the action would be to execute Javascript code:
$(this.affectedElements)..attr('selected',true);
I'll describe the easiest example:
Create APEX item eg. P1_MULTIPLE
Type = Select list
Allow Multi Selection = Yes
List of Values > Type = Static Values
List of Values > Static values = STATIC:Display1;Return1,Display2;Return2
Create button eg. SET_VALUES
Create dynamic action
Event = Click
Selection type = Button
Button = SET_VALUES
Create true action within DA from step 3
Action = Set Value
Set Type = JavaScript Expression
JavaScript Expression = ['Return1', 'Return2']
Selection Type = Item(s)
Item(s) = P1_MULTIPLE
Test it.
basically, if you want to change value(s) of the multi select list you need to pass array of value(s).
With pure jQuery (without APEX DA):
$("#P1_MULTIPLE").val(['Return2', 'Return1'])

Set Form Values From Interactive Report Row

I have two tables: T1 and T2
Table T1 contains five columns: CT11, CT12, CT13, CT14, CT15
Table T2 contains 4 columns: CT21, CT22, CT23, CT24
I have a page with two regions. Region 1 is a Form on a Table using table T1. Region 2 is an Interactive Report ( IR ) on table T2.
The SQL for region 2 is:
select apex_item.RADIOGROUP(p_idx => 1, p_value => CT21) "Choose", CT22, CT23, CT24 from T2;
When the user click a radio button for a row in the Interactive Report, I would like the values in cells CT22, CT23, CT24 to populate
the CT13, CT14, CT15 fields in the table form in region 1. If a user clicks another row radio button, the values should update.
Using Google and Stackoverflow, I have tried a bunch of options, but I just can't seem to find the correct method.
Hopefully you understand how the f## arrays work a bit and what they look like in the generated html. To solve this you need javascript, and to understand that you do need to know what that html looks like. Nothing is as error-prone as misunderstanding this! Changing the f## array or any of the required columns name may stop the code from working properly, and while I don't think it is too hard, it is simply important to understand it. If you implement it, you will need to be able to support it and not rely on the help of a stranger on the internets. Having said that.
Create a dynamic action.
Event: After refresh
Selection type: Region
Region: your IR region
Condition: -
True action:
Execute javascript code
fire on page load: checked
Code:
$("input[name=f01]", this.triggeringElement).change(function(){
//mind the capitalization in the headers attribute selector
var lRow = $(this).closest("tr"),
lct22 = lRow.find("td[headers=CT22]").text(),
lct23 = lRow.find("td[headers=CT23]").text(),
lct24 = lRow.find("td[headers=CT24]").text();
console.log("22: " + lct22 + " - 23: " + lct23 + " - 24: " + lct24);
$s("P3_CT13", lct22);
$s("P3_CT14", lct23);
$s("P3_CT15", lct24);
})
"input[name=f01]" will select the radiobuttons. You gave the radiobuttons p_idx=>1 and this will translate to the usage of array f01.
I made a small demo app too: http://apex.oracle.com/pls/apex/f?p=11964 . Log in with apex_demo/demo