I want to show a list of suggestions to the user, and as expected I do it like:
new Suggestions('option 1', 'option 2', 'option 3', '...');
But the problem is that this way the suggestions are shown in a single row and the user will have to do horizontal scroll to reach all suggestions.
Instead, I would prefer to organize the suggestions in a table view in order to have multiple rows.
I thought I could get through this using this approach but it doesn't seem to work:
new Table({
dividers: true,
columns: ['header 1', 'header 2', 'header 3'],
rows: [
[new Suggestions('opt 1-1'), new Suggestions('opt 1-2'), new Suggestions('opt 1-3')],
[new Suggestions('opt 2-1'), new Suggestions('opt 2-2'), new Suggestions('opt 2-3')],
]
})
Does anyone know any other way how to achieve this?
There's not really a way to show suggestions within a table. You could show a table of plain text, inviting the user to say one of the options, but you won't get the interactive widgets.
The idea of the suggestion chips is to suggest but not mandate a handful of potential things that the user might say to continue the conversation, and the horizontal row is meant to highlight the most frequent.
Related
Good afternoon. Please tell me how to solve the following problems.
I added a menu to the column headers of the table, when clicked, grouping by the selected column should occur. But for some reason, grouping occurs only after re-selecting this menu item. This happens once after the table is created. Then the menu is triggered the first time. Next, the grouping is triggered by the first click of the menu item.
After adding grouping by columns, the table starts working very slowly. Scrolling in the horizontal direction is jerky and has a long delay, while scrolling vertically remains acceptable. If you select grouping by different columns several times, the browser starts to take up a lot of RAM. The code and video example are below. And even if we remove the grouping, the lags remain when scrolling. It is worth using the grouping once and the Tabulator becomes difficult to use.
UPD: This is actual for Chrome. An if table include 'Frozen' columns.
Code of header menus
var headerMenu = [
{
label:"Группировка",
action:function(e, column){
let gField = column.getDefinition().field;
if(table.options.groupBy === gField){
table.setGroupBy();
}
else {
table.setGroupBy(gField);
}
}
},
]
Adding menus example
arrCol.push({
title: 'Работник',
field:"fio",
sorter:"string",
headerFilter:"list",
bottomCalc:"count",
headerMenu: headerMenu,
bottomCalcParams:{precision:0},
headerFilterParams:{valuesLookup:"active",autocomplete:true},
frozen:true,
width: 200
});
Creating Table
table = new Tabulator("#spreadsheet", {
columnDefaults:{
headerHozAlign:"center",
},
height:"65vh",
columns: arrCol,
columnCalcs:"both",
groupClosedShowCalcs:true,
});
Video showcase
I am developing a shopping bot in that user will ask for the product and then i will be fetching the results from the database and the results will be more than 10 items. I know that the default items for the list is 10 items. My question here is how to add a more button at the end of the list so that i can load more of the items into the list.
for(var p=0;p<=countforchunk;p++)
{
items[p] = {
optionInfo: {
key: (p + 1).toString(),
synonyms: temparray[p],
},
title: temparray[p],
url: "https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.pixabay.com%2Fphoto%2F2015%2F04%2F23%2F22%2F00%2Ftree-736885__340.jpg&imgrefurl=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Fnature%2F&tbnid=_2JirDBiGzi3lM&vet=12ahUKEwi71YPNxdrnAhVJGbcAHVi_BdEQMygAegUIARCFAg..i&docid=Ba_eiczVaD9-zM&w=546&h=340&q=images&ved=2ahUKEwi71YPNxdrnAhVJGbcAHVi_BdEQMygAegUIARCFAg",
image: new Image({
url: imgarray1[p],
alt: imgarray1[p]
}),
}
conv.ask(new List({
title: 'Search Results',
items: items
}));
resolve();
}
Please help me out,
Thanks.
As far as I can tell - there is no technical limit of 10 items. If you put 12 items in a list, for example, it will show 12 items.
This is not, however, a very good idea. (Even 10 items is a lot, and you should be thinking about voice interaction, where you might not want to read back more than 2 or 3). So at some point you will want to think about paging anyway.
If you do, you need to implement this as another Intent and Intent Handler. You can do this by offering a suggestion chip that says "Show me more" and accepting training phrases such as "more", "what else", and "show me more" in the Intent. You can use a Context to keep track of where you are in the result list.
You have to keep track of loaded item. There is limitation of loading 30 items at a time.
When user wants more item, you have handle that voice intent and can store current page index in context and based on that you can add another 30 items by replacing existing one.
1-30 items = page 1
30-60 items = page 2 and so on.
Call an api accordingly.
I just found Tabulator, and i love it. I'm currently using version 4.5. The bottomCalc-function isuseful, however, i would like it to be updated, based on the selection of row(s).
Is there a native option i've missed, or, should it be done manually, fx. triggered by the row-selections?
Column example:
{
title: 'Offline Amount',
field: 'offline',
bottomCalc: 'sum',
formatter: 'html',
align: 'center',
width: 150,
},
And selectField: true for columns.
Currenly, without updated bottomCalc:
And, i would like it to be updated, based on the selection (if there is any).
Update:
I guess the rowSelectionChanged-option, will be the best way to handle the update of .tabulator-footer .tabulator-calcs-holder, but i'm still unsure about, how to do that part.
If it's a question of looping through the selected values, calculate the sum, and update the value - or if i'm able to use another event, reuse a specific function, or yet another thing.
There is no built in way to achieve this but there may be a work around.
You could store a property in the row data that stores the selected state of the row. You could then use the rowSelected and rowDeselected callbacks to change this value.
You could then use a Custom Calculation Function to then generate the sum of the column values for the rows where the data object has a selected property of true.
Update
As of version 4.6, there is now a recalc function you can call on the table, so you could set up your calc function as outlined in the answer above and then use the rowSelectionChanged callback to trigger the update:
var table = new Tabulator("#example-table", {
rowSelectionChanged:function(data, rows){
table.recalc();
},
});
I have a Suitescript search that is returning the following columns.
{"columns":[{"name":"trandate","label":"Date","type":"date","sortdir":"ASC"},{"name":"refnumber","label":"Reference Number","type":"integer","sortdir":"NONE"},{"name":"closedate","label":"Date Closed","type":"date","sortdir":"NONE"},{"name":"custbody_eft_bill_payment","join":"payingTransaction","label":"EFT Bill Payment","type":"checkbox","sortdir":"NONE"},{"name":"tranid","join":"payingTransaction","label":"Check Number","type":"text","sortdir":"NONE"},{"name":"amount","label":"Amount","type":"currency","sortdir":"NONE"}]}
And I am using the list.addRows() method to display the results in a suitelet list where I have defined the columns using the list.addColumns() method but I have not been able to successfully get the columns that are created from a join. I also can find no documentation on how to include them. I have tried the following
list.addColumn({
id: 'payingTransaction.tranid',
label: 'Payment#',
type: ui.FieldType.TEXT,
})
list.addColumn({
id: 'tranid',
label: 'Payment#',
type: ui.FieldType.TEXT,
})
Any help would be appreciated!
Not sure if this will help, but when running through your results you can use one of two methods to get the resulting data:
Use the join in the getValue() call
results.getValue({name:"tranid",join:"payingTransaction"});
Grab the data by Columns
var columns=result.columns;
var tranid=result.getValue(columns[0]);
The first option will need to be told whether it is a join, group, etc...
The second option will just grab the resulting column, no matter whether it is a join, group, or anything else.
I have fixed row numbers to 10 for my subgrids, but if reccount is less than 10 I would want to adjust height subgrid to "auto" or "100%".
So here is my code for this subgrid :
// SUBGRID FOURTH LEVEL
var subgrid_table_id = subgrid_id+"_d",
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).append("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
$("#"+subgrid_table_id).jqGrid({
url:"sg31b.php?id="+row_id+"&clt="+clt,
datatype: "json",
idPrefix:"sgd_",
colNames: ['Id','Article','Désignation','Marque','Equivalence'],
colModel: [
{name:'e.id',index:'e.id',hidden:true},
{name:'a.code',index:'a.code', width:100},
{name:'a.descr',index:'a.descr', width:450},
{name:'k.code',index:'k.code', width:80},
{name:'e.equiv',index:'e.equiv',width:100}
],
pager: pager_id,
sortname: 'a.code',
hiddengrid:true,
scroll:true,
height:230,
rowNum:10,
autowidth:true,
caption:'4 - EQUIVALENCE ARTICLES',
gridComplete:function(){
sortDataCol(this);
if($("#"+subgrid_id+"_d").jqGrid('getGridParam','records') < $("#"+subgrid_id+"_d").jqGrid('getGridParam','rowNum')){
$("#"+subgrid_id+"_d").jqGrid('setGridHeight','100%');
}else{
$("#"+subgrid_id+"_d").jqGrid('setGridParam',[{npage:1}]).jqGrid('setGridHeight',230);
}
}
});
$("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{search:false,add:false,edit:false,del:false});
$("#"+subgrid_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
fullInputCss();
and the snapshot of result for less than 10 filtered rows :
Now if I press Backspace in search field to obtain more rows, it seems that search doesn't fire because Firebug doesn't show any trace of request :
If I delete added 'setGridHeight' lines in gridcomplete, all runs fine !
I think that one more time I'm wrong in my coding and understanding how jqGrid runs.
Please could someone give me some way to solve this trouble ?
Many thanks in advance. Have a nice day. JiheL
I suppose that the origin of the problem could be id duplicates on your page. Just now I wrote the answer on another your question where I described the problem detailed.
Current implementation of jqGrid (version 4.4.5) has problem in the code of filterToolbar which constructs id for input fields of the filter toolbar based on the following rule:
id="gs_" + cm.name
(see the line of code). It means that the id of the input field for the column a.code will be gs_a.code for every subgrid which you use. So you can have id duplicates.
So I recommend you redesign the naming concept in your code. You can use for example
name: row_id + "a_code", index: "a.code"
In the way the value like "a.code" will be still send during sorting of the grid, but you will have no id duplicates. In some scenarios (is you use repeatitems: false in jsonReader) you could need to use additional jsonmap attribute, but you don't need it in you current code.