We Keep Coding

How to access an entered Interactive Grid column value in a Javascript dynamic action on the Change event in order to ensure uniqueness

I am trying to prevent duplicate items from being entered in an Interactive Grid in Oracle Apex 20.2. I do get a unique constraint error when this happens, but this is for a barcode scanning stock control app and the unique constraint error only happens when saving after scanning a room with lots of objects. It is then very difficult to find the duplicate field. You also cannot use sort, since that wants to refresh the page and looses all your scanned items. I cannot presort because I want the last scanned item on top.
I was able to add Javascript on page load that creates an array with all the barcodes. I then check this array when scanning and do not add new Interactive Grid rows when a duplicate barcode is going to be added to the array.
In addition to this I need to add the same for when an Interactive Grid row is manually entered. For this I wanted to add a Javascript dynamic action on the barcode column in the Interactive Grid, in order to once again check the global array for uniqueness. However I have several issues: I cannot figure out how the get the entered barcode value in the change dynamic action Javascript, sometimes it shows the previous changed value (might be this bug although I am in 20.2) and the Change event also seems to fire twice when hitting enter after entering a value (once for the new row (this time my code works unlike when hitting Tab) and once for the next row below). The last one seems bad, since then it will try to check existing values (the next row) and give errors that should not happen; however I do not see a more appropriate event like On Row Submit. Not sure if there is a way to check whether the value changed on the Change event.
The code I currently have I got from here. I am assuming this means Oracle Apex does not have a standard way of getting an Interactive Grid column value in a Javascript dynamic action. Not sure if this has changed in 20.2 or 21. The code I have is:
console.log($(this.triggeringElement));
var grid = apex.region('LINES').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);
let bcode = model.getValue(record, 'BARCODE');
console.log(id);
console.log(record);
console.log($(selectedRow[0][0]));
console.log(bcode);
if(barcodes.includes(bcode)) {
apex.message.showErrors([{
type: "error",
location: "page",
message: "The entered barcode is already in the list.",
unsafe: false
}]);
}
When I console.log(record) I can see values that I enter into the barcode column, but I do not know how to walk the object tree in order to retrieve the value out of the record. I do not understand the object it shows me in the console log. It does not seem to correlate with the dot access traversals that others are doing in the above code. I can see the record array at the top, but for that the barcode column shows the previous value; below that it does however show the newly entered value as the third (2) index, but I do not know how to write Javascript to access that.
If I can access the previous and new value from the record object I could check for changes and also compare the new value against the global array. How do I access these values in the record object or is there a better way of achieving my goal? bcode prints the previous value, so I guess I already have that if that is not a bug.

Tabulator.js table elements retrieve the index of the row and serve as a control element to other plots

I am using tabulator package 4.3.0 to work on a webpage. The table generated by the package is going to be the control element of a few other plots. In order to achieve this, I have been adding a dataFiltered function when defining the table variable. But instead of getting the order of the rows in my data object, I want to figure a way to get the index of the rows in the filtered table.
Currently, I searched the manual a little bit and have written the code analogue to this:
dataFiltered: function(filters,rows){
console.log(rows[0]._row.data)
console.log(rows[0].getPosition(true));
}
But the getPosition always returned -1, which refers to that the row is not found in the filtered table. I also generated a demo to show the real situ when running the function. with this link: https://jsfiddle.net/Binny92/3kbn8zet/53/.
I would really appreciate it if someone could help me explain a little bit of how could I get the real index of the row in the filtered data so that I could update the plot accordingly and why I am always getting -1 when running the code written in this way.
In addition, I wonder whether there is a way to retrieve the data also when the user is sorting the table. It's a pity that code using the following strategy is not working in the way I am expecting since it is not reacting to the sort action and will not show the information when loading the page for the first time.
$('#trialTable').on('change',function(x){console.log("Yes")})
Thank you for your help in advance.

The reason this is happening is because the dataFiltered callback is triggered after the rows are filtered but before they have been laid out on the table, so they wont necessarily be ready by the time you call the getPosition function on them.
You might do better to use the renderComplete callback, which will also handle the scenario when the table is sorted, which would change the row positions.
You could then use the getRows function passing in the value "active" as the first augment return only rows that have passed the filter:
renderComplete: function(){
var rows = table.getRows("active");
console.log(rows[0].getPosition(true));
}
On a side note i notice you are trying to access the _row property to access the row data. By convention underscore properties are considered private in JavaScript and should not be accessed as it can result in unstable system behaviour.
Tabulator has an extensive set of functions on the Row Component to allow you to access anything you need. In the case of accessing a rows data, there is the getData function
var data = row.getData();

Automate converting text to rows and columns (Google Sheets)

I'm trying to convert order form data submitted from a Squarespace website from the following format to a table with 4 columns:
Store,Item,Quantity,Details;Store2,Item2,Quantity2,Details2; (etc...)
Commas separate columns while semi-colons separate rows.
All the methods I've tried so far have been successful in splitting the data into the desired form, but the problem occurs when new data is added. When the form is submitted, it creates a new row in the next available empty row. I can't seem to find a way to automate the process without receiving cyclical dependency errors, since each order can have any amount of item entries.
Example spreadsheet:
https://docs.google.com/spreadsheets/d/1ZEWtmMiWO0Us76Z7o7GB7Salw1Rl_-1PhK6GzeOD0GM/edit?usp=sharing
The above example splits the data as desired. I cannot figure out how to make it work with the data added as a new row. I would also like to continue using sheets for its cloud functionality.
Any advice is appreciated, including entirely new ways of processing the data, whether with a script, a different remotely accessible order processing app compatible with Squarespace forms, or natively within Sheets.

You want to achieve the following conversion.
Sample formula:
=ARRAYFORMULA(SPLIT(TRANSPOSE(split(A4,";")),","))
In this formula, the cell "A4" has the input value.
You have already used the formula of =TRANSPOSE(split(A10,";")). In this answer, I used this.
For TRANSPOSE(split(A10,";")), the value is splitted with , using SPLIT and ARRAYFORMULA.
Result:
Sample script:
When you want to use Google Apps Script, you can also use the following script.
function myFunction(value) {
const values = value.split(";");
return values.splice(0, values.length - 1).map(e => e.split(",").map(f => isNaN(f) ? f : Number(f)));
}
In this case, please copy and paste the script to the script editor, and put the custom function of =myFunction(A4) to a cell.
The same result with above formula can be obtained.
References:
SPLIT
ARRAYFORMULA
split()
map()

Storing contents from Viewbag into a local jquery array or object

Let's imagine a situation like this:
I have an ViewBag dynamic object which is basically a list fille with some results;
Scenario 1:
User 1 comes in and fills the ViewBag.Products object with a list of 50 items inside;
Scenario 2:
User 2 comes in and fills ViewBag.Products object with a list of 50 NEW items which ARE DIFFERENT than the previous 50 ones of a user 1.
Now when the both users get displayed results onto their page, which is located at /Analyze/Index <- view
I enable them so that they can sort out that list by a certain property of a class which is located inside the object like this:
public JsonResult GetSortedBySales()
{
var list = lista.OrderByDescending(x => x.SaleNumber).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
public JsonResult GetSortedByFeedback()
{
var list = lista.OrderByDescending(x => x.Feedback).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
As you can see this produces an issue like this:
The last user that added it's own items to the list are the items which will be shown to User 1 when he tries to sort out the list, since the list is now filled with User #2's items...
The list is filled with the items from the eBay API, therefore I cannot guarantee the integrity and uniqueness of the data to each user...
What I thought I can do here?? Is that I can store these items from the list somehow into the local jquery array and then perform the sorting from that local array, so that each jquery array is local to each user in their browser and no mixing of data is done...
Do you guys understand me what I'm trying to achieve here?
I apologize if my English is bad, I've tried my best to explain the issue that I have.
Edit: here is more data on what I'm trying to achieve
Basically I have a form where users perform a search of ebay items based on a certain keyword. After the search via http request I display the results to them in a manner where they can select all of those products in a table and then perform analyzing of those selected products.
Then they are transferred with another page with the analyzed data and I display the results to them in the list object called "lista".
The "lista" list is always filled differently based on what the user searches on the page via the process that I just explained above.
So the "lista" object is always filled with the new data and when the user performs sorting of data in list "lista" they are always displayed differently if 2 users perform analyzing of data like in scenario 1 and 2 that I explained above.
Does this helps?
Edit 2:
Here is a graphical explanation of what I ment
Step 1:
Step 2:
P.S. the "lista" list is declared as static, is that what's causing the issue?
Edit again:
Okay so guys I've found a way so that the data isn't changed when I sort it. Instead of doing a jQuery post, I perform sorting of data based on two extra attributes that I added into my table tr - sales and feedback and then sorted it like following:
$(".feedbackClick").click(function() {
var $wrapper = $('#tableSellers');
$wrapper.find('.test').sort(function(a, b) {
return +$(b).attr('feedback') - +$(a).attr('feedback');
}).appendTo($wrapper);
});
This sorts the data locally in jQuery thus no data is lost at the time when multiple users perform a search.

P.S. the "lista" list is declared as static, is that what's causing the issue?
Yes. That is the problem.
You should almost never be using static variables in a web site, as those variables will end up being shared across all users.

stocklist Dynagrid demo

I'm trying to modify the stocklist Dynagrid demo which is designed to work with HTML5 and Javascript, it's originally designed to subscribe an item per subscription.
In my case, I have connected this demo to my lightstreamer server, the adapter in my server deals with itemgroub and fieldschema instead of itemList and fieldList which was used in the example.
I modified the code to subscribe using this item group and equivalent field schema, now the dynagrid listener (onVisualUpdate function) is capable to detect how many items in the item group and based on that it creates the equivalent number of rows, however, when I call getChangedFieldValue for and one of the fields in the dynagrid, I get null always, and based of that no data is updated on the screen.
What is the solution for this problem, and how can I get the updated values?
(Note: Currently, I get the data directly from the info paramter which is passed to onVisualUpdate function).

When using a Field Schema, fields in the subscription are identified by their 1-based index within the schema and not by their name. So, wen you call getChangedFieldValue try to use the 1-based index to identify a field.