Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Accepted Solutions
Hello Liam,
I thought this was an interesting use case so I built a little POC for you:
var app = qlik.openApp('456942a2-d3e2-40a5-bad6-985e80294f05', config);
app.getObject('QV01', 'BSNjEu').then(model => {
console.log('loaded:', model);
var table = qlik.table(model);
// set timeout for now, some invalidated event would probably be a better fit
setTimeout(() => {
console.log('table:', table);
$('#QV01 [tid] .qv-st-data table tbody tr').each((i, tr) => {
var input = $('<input type="text" class="lui-input"/>');
var data = {};
$(tr).find('td').each((i, td) => {
td = $(td);
// get cell object from angular scope
var cell = angular.element(td).scope().cell;
if(cell.type == undefined || cell.dataColIx < 0)
return;
var header = table.headers[cell.dataColIx];
var column = header.field ? header.field.fldname : header.qFallbackTitle;
// create property for this cell
// using either field name or table header
// and append value to row data object
data[column] = cell.text;
// append input field after
var isLast = table.colCount == td.index() + 1;
if(isLast) {
td.after(input);
input.wrap($('<td class="qv-st-data-cell"><div class="qv-st-value"></div></td>'));
}
});
// save data for later use
input.data(data);
// and assign change event handler
input.change(function(){
var value = $(this).val();
var data = $(this).data();
data.inputValue = value;
console.log('sending data: ', data);
});
});
}, 1000);
This should work for straight tables but the're probably some issues as this is just a small example. I also don't know how this will perform on very big tables.
Hope this helps you,
Mathias
Hello Liam,
I thought this was an interesting use case so I built a little POC for you:
var app = qlik.openApp('456942a2-d3e2-40a5-bad6-985e80294f05', config);
app.getObject('QV01', 'BSNjEu').then(model => {
console.log('loaded:', model);
var table = qlik.table(model);
// set timeout for now, some invalidated event would probably be a better fit
setTimeout(() => {
console.log('table:', table);
$('#QV01 [tid] .qv-st-data table tbody tr').each((i, tr) => {
var input = $('<input type="text" class="lui-input"/>');
var data = {};
$(tr).find('td').each((i, td) => {
td = $(td);
// get cell object from angular scope
var cell = angular.element(td).scope().cell;
if(cell.type == undefined || cell.dataColIx < 0)
return;
var header = table.headers[cell.dataColIx];
var column = header.field ? header.field.fldname : header.qFallbackTitle;
// create property for this cell
// using either field name or table header
// and append value to row data object
data[column] = cell.text;
// append input field after
var isLast = table.colCount == td.index() + 1;
if(isLast) {
td.after(input);
input.wrap($('<td class="qv-st-data-cell"><div class="qv-st-value"></div></td>'));
}
});
// save data for later use
input.data(data);
// and assign change event handler
input.change(function(){
var value = $(this).val();
var data = $(this).data();
data.inputValue = value;
console.log('sending data: ', data);
});
});
}, 1000);
This should work for straight tables but the're probably some issues as this is just a small example. I also don't know how this will perform on very big tables.
Hope this helps you,
Mathias
Hello Liam,
Yes you can just switch the app and object id.
No, the data variable contains the row-data for the current input field (should've probably named the variable on line 14 rowData in the first place 
).
You can see the content of the data variable in the screenshot just below the code snippet. Thats the output of the "console.log" statement on line 53.
Line 12 to 31 are responsible for looping over the table rows and their columns creating a javascript object for every row in the following form:
{
"FIELD NAME1 OR COLUMN HEADER1": "VALUE OF COLUMN1",
"FIELD NAME2 OR COLUMN HEADER2": "VALUE OF COLUMN2",
}
Line 34 to 41 are appending a <td> element containing the input field after the last data column and line 44 uses the jQuery .data method to append custom data to an html element (think of data-blabla attributes).
Line 47-54 assigns an event handler for the changed event (will be triggered after you tab out of the textbox), extracts the object that was set in line 44 and creates a property "inputValue" with the <input>-elements current value.
So the data variable contains probably everything you want to send to your REST API.
Mathias
Mathias,
Thanks so much! I was able to replicate it on a mash-up. I see the text box and I can type in it. I'm noticing some strange behavior that maybe was expected but it's saying: 'Uncaught TypeError: Cannot read property 'dataColIx' of undefined' whenever I highlight the text within the text box - for each character of the text box.
Thanks! That helps. One last thing 
I think this is something you'll be able to answer really quickly; I just want to know how to add a title to that new column with the text fields.
Thanks again for building this out m.schindler I have one more issue that you may be able to resolve pretty quickly. The hards part may be just demonstrating what the problem is haha. When I type in text and then scroll the text in each box stays in there as I scroll. Does that make sense? Please see screen shots.
