We have a requirement that of using a "tab" key in the table control to navigation across only input fields.
1. Every table row has atleast 6 to 8 fields - 2 of them are input fields and rest could be text,select etc.
2. By clicking tab i navigate across input fields in a row on clicking the last input field of a row i should move to the first input field of the next row.
I have the code for the following but i can see the focus method of the input control focuses the UI to subsequent input field of the input to be focused.
Jsbin - https://jsbin.com/lugesecuhe/edit?html,output
I tried to set styles like .sapMFocus and also document.getElementbyId().focus and they dont work either.
Can you suggest some pointers on this.
Thanks and Regards,
Veera
I have exactly the same problem and started looking into it. I found out that the navigation within the table is possible and performed by class sap.ui.core.delegate.ItemNavigation (at least in v1.26).
However, what I consider really non-intuitive:
On Mac (Chrome or Safari) you have to hold the ALT key while pressing TAB to cycle through the input fields of your table.
I haven't figured out how to do it on Windows
I checked in your JSBin example, somehow the fields get focused in a weird order. I have prepared my own example - http://jsfiddle.net/bgerth/x8h92mz8 - where you can cycle through the input fields row by row using Alt+Tab.
Update 1
I have found the blog SAPUI5 Table Navigation with Tab Key by Klaus Kronawetter which adds extra keyboard handling to a sap.ui.table.Table. I adapted his code for a sap.m.Table which you can find at http://jsfiddle.net/bgerth/os6r096y.
Update 2
After further investigation, I decided that the solution from update 1 above is too much hassle.
Instead, I adapted the class sap.ui.core.delegate.ItemNavigationmentioned above, which is internally employed by sap.m.ListBase. In essence, you can cycle through the input fields with up and down arrow keys.
I have prepared an example at http://jsfiddle.net/bgerth/0r9L30wd. The relevant code is
var fnPatchedItemNavigationsetItemDomRefs = sap.ui.core.delegate.ItemNavigation.prototype.setItemDomRefs;
sap.ui.core.delegate.ItemNavigation.prototype.setItemDomRefs = function setItemDomRefsPatched(aItemDomRefs) {
// 'this' is now the instance of sap.ui.core.delegate.ItemNavigation
jQuery.sap.log.debug("Patched version of sap.ui.core.delegate.ItemNavigation.setItemDomRefs");
var aInputFields = $(aItemDomRefs).find("input:enabled").get();
if (aInputFields[0]) {
// There is at least one enabled input field in this table
fnPatchedItemNavigationsetItemDomRefs.call(this, aInputFields);
} else {
fnPatchedItemNavigationsetItemDomRefs.call(this, aItemDomRefs);
}
}
Related
I want a button from the command line bar to be visible or invisible depending on whether a record has been selected in the lookup field from the main form or not.
If no record has been selected, then the button should be displayed. Otherwise not.
For this problem, I want to use the Power Fx in PowerApps, but I haven't found a command yet, which shows me the content or something like that of the lookup field. Other field data types like text have worked without problems.
With Javascript, I already managed it without problems, but I would like to do it also in PowerFx if that should work.
Screenshot: https://i.stack.imgur.com/uqDJ6.png
The records come from the Table Company, where the attribute is Companyname.
Commands where I think they might work:
If([Selected Record];true;false);If(IsBlank([Selected Record]);true;false);If(IsBlankOrError([Selected Record]);true;false);If(IsEmpty([Selected Record]);true;false)
I guess there are 2 scenarios:
The Lookup form control element is a Dropdown with a Selected output property. Then your approach would work like If(IsBlankOrError(DataCardValue1.Selected),true,false)
If your form control element is a ComboBox then you could use If(CountRows(DataCardValue1.SelectedItems)>0,true,false) or the above described IsBlankOrError.
We have a requirement to move the cursor from one editable cell to another automatically in sap.m.table .
I tried all the previously answered blogs but none of the code works.
Has anyone tried similar requirement before ?
Thanks
Tisha
I had this requirement before. I had to automatically focus from input field in column A to the next input field in column C in my sap.m.Table.
How I solved it was like this:
I detected the change of my input A by defining an event handler on the view XML. Then I get by id the input C and use jQuery method to put focus on its HTML inner element.
I am building an application in MATLAB app designer (2019b), and I am trying to link two blank fields to a table that has only two columns, such that the first field should show the first value (in the first column) in the table and the other should show the last value in the first column in the table.
Example
table:
9 2
3 4
5 6
blank field_1: 9
blank field_2: 5
I am a C++ person, so whenever I am developing, for instance in SFML, I just have one event loop that captures and updates everything - no matter where I press on the window, but, in MATLAB, whenever I press a button - I need to build a separate callback function. Here, I am not calling back anything - I just need to update the value.
Anyone, please help?
Thank you
Here's an example which illustrates how you can achieve the behavior you want.
In the below example, I am creating a uitable in the App startup, and I am defining a callback which updates the table as required when the cells are modified.
function startupFcn(app)
vars = {9,2;3,4;5,6;'blank _field_1:', '';'blank field_2:', ''};
t = uitable(app.UIFigure,'Data',vars);
t.ColumnEditable = true;
t.DisplayDataChangedFcn = #updateTable;
function updateTable(src,~)
src.Data(end-1:end,2:end) = [src.Data(1,1) src.Data(end-2,1)].';
end
end
i am trying to create a footer component in CQ5, where i have 4 columns & all are autherable.
But we have to make no of columns autherable too i.e based on a value selected form a dropdown we have to open those many tabs for authoring those many columns only.
i have created a dropdown and have a maximum range of 6 columns. i know that i have to configure a listener for this purpose but don't know how . Requirement is like if i select 3 from the drop down then 3 tabs should come to author 3 columns
pls help me , i am middle of something very important.i need the solution very early too as i have to finish the job as soon as possible
I might be late for this by now but in case you still need it:
You need to add a listener node before closing your drop-down element:
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(box){ //here you also need to handle the hide/unhide when the panel loads for the first time. Use this.getValue() to retrive the intial value }"
selectionchanged="function(box, value) {
for(var c=1;c<=value;c++){
this.findParentByType('tabpanel').unhideTabStripItem("tab"+c); // You need to handle the opposite with hideTabStripItem("tab"+c);
}
}"/>
Then on both "loadcontent" and "selectionchange" (these are events on your drop-down) grab the current selected value and use it to hide/unhide the tabs. In this case the tabs would be named "tab1", "tab2", etc, make sure you get the names right.
The ExtJS in the events is finding the "tabpanel" container for the whole dialog, and then hiding/unhiding based on name. You could also set to enable/disable using the methods ".enable()" and ".setDisabled(true)". Just make sure you get the reference to the tab first if you want to do this (something like ".getComponent(tabName).enable()").
I didn't test this specific code, I couldn't find my actual example from my code base but this should take you in the right direction.
I have a data-grid and three column in it. one column is type of DataGridViewComboBoxCell, three items are in this grid combo box, now i have to invoke selection index changed event to change value according to combo value change in grid.
also help me to make a new event ....
please help...
thanks
I really can't understand your question.
But maybe these informations can help:
A ComboBoxColumn has always two kinds of controls. A presenting one (in most cases a label) which is individually for each row. And a editing one that will be shared for the whole column. So take a look into this documentation and the IDataGridViewEditingControl Interface.
Maybe these will give you a starting point on how to solve your problem.
In the Load event for the form, you need to get the cell that you want to add the handler to and cast it as a regular combo box. You can then add the event handler on SelectedIndexChanged, but it must be done programmatically, and depending on the language you are using.