An update to the bootstrap extra components adds a drop down button and a progress bar.
Visit the project page on github for details. Wiki pages have been added for both components.
Hi Patrick,
I like the web components, especially the Navbar and Sidenav. Great work, thank you!
But I have some issues by setting the menuitems of the Navbar by method.
When I set the menuitems in the Properties, they are displayed and working as expected.
But if I would like to set the menuitems by a method, it doesn’t work as it should.
For example a INPUT menuitem looks like a MENU_ITEM and the onAction of an item and/or subitem doesn’t fire the set method.
Here my code example:
var menuItems = [{
itemID: "1",
dataProvider: "fv_find_txt",
displayTyp: "INPUT",
iconName: "fa fa-search",
onAction: "onAction_find",
position: "LEFT",
text: "i18n:cuvis.dataprov.text.lc.entersearch"
},
{
itemId: "2",
displayType: "MENU_ITEM",
iconName: "fa fa-pencil-square-o",
onAction: "onAction_edit",
position: "RIGHT",
text: "i18n:cuvis.btn.lc.edit"
},
{
itemId: "3",
displayType: "MENU_ITEM",
iconName: "fa fa-user",
position: "RIGHT",
text: scopes.globals.gUsername_txt,
subMenuItems: [{
itemId: "3.1",
iconName: "fa fa-sign-out",
onAction: "onAction_logout",
text: "i18n:cuvis.menuitem.text.lc.logout"
}]
}];
elements.navbar_1.setMenuItems(menuItems);
Am I doing anything wrong?
BTW, how can I fix this warning?
The function setMenuItems(Array<bootstrapextracomponents-navbar.menuItem>) is not applicable for the arguments (Array<{itemID:String,dataProvider:String,displayTyp:String,iconName:String,onAction:String,position:String,text:String}|
{itemId:String,displayType:String,iconName:String,onAction:String,position:String,text:String}|{itemId:String,displayType:String,iconName:String,position:String,text:String,subMenuItems:Array<{itemId:String,iconName:String,onAction:String,text:String}>}>)
Best regards
Thomas
Hi Thomas,
the problem with your input field is a typo in your code (“displayTyp” instead of “displayType”). The method is not fired because your a passing a string instead of a Function (reference). It should be
...
onAction: onAction_find,
...
and regarding the type warning, add this to your variable declaration (see what the warning says it wants):
/** @type {Array<bootstrapextracomponents-navbar.menuItem>} */
var menuItems = [...]
Hi Patrick,
the typo “displayType” in my code came from the Wiki > MenuItem type > Property.
I have fixed my code like your suggestion and also removed the quotation marks by dataProvider Property, right?
Now onAction Property is firing the method.
I tried all Property types, but displayTyp: “INPUT” doesn’t adds a text field to the navbar. It is still a MENU_ITEM.
Regards Thomas
You misunderstood that. The name of the property needs to be “displayType”. In your code, it is “displayTyp” and that is wrong and the reason it is not working! The wiki is correct.
Uuups…, sorry! Now it is working fine. Thank you once more.
An other thing:
Most of the glyphicons wont work. Font Awesome Icons do all work well.
For me it’s ok with the FAIs, but do I have to think about anything when using glyphicons?
All glyhpicons of bootstrap v3.3.1 (that’s what NG client currently loads) should work. For the font awesome icons: the components include v4.7.
Hi Patrick,
Thank you for this update!
Is it possible to show a image in the dropdown-button? In the menuitems is a property “iconName”. On the button I miss this property.
You mean for the button itself? You can file a feature request on github if that is wanted/needed…
Hi Patrick,
When I place the drop-down-button in a header-part of a form, then the menu did not show correct. Is there a way to setup the orientation from the menu?
attachment=0]15-03-2017 14-56-11.png[/attachment]
I can’t see what the problem is. Is it cut off at the bottom or on the right?
And btw: this looks a bit as if the Navbar component might be a better fit in general…
Hi Patric,
Yes, te menu of the dropdown-button was cut of at the end of the header-part. In the navbar-control this problem does not exist.
The other problem is: when the drop-down button is at the right position in a form, the menu was cut at right sight. The same problem is in navbar-control.
Hi,
I have an other issue with menuItems on the navbar.
If I set the properties for an displayType INPUT menuItem directly in the component, I get the entered value in the formvariable set as dataProvider.
[attachment=0]navbar_item_property.png[/attachment]
But when setting the menuItem by method, the formvariable has no value if I enter anything in the input field.
menuItems = [{
itemId: "1",
dataProvider: fv_find_txt,
displayType: "INPUT_GROUP",
iconName: "fa fa-search",
onAction: onAction_find,
position: "LEFT",
isActive: "true",
text: "Enter search..."
...
What I’m doing wrong?
When you set the dataprovider as
dataProvider: my_data_provider
you are assigning the value of my_data_provider at the time of method execution. So when my_data_provider is currently “Hello World”, you are setting “Hello World”. Do this
dataProvider: 'my_data_provider' // the name of the dataProvider, not it's value
and it should work
Hi Patrick,
when I execute the method to set the INPUT menuItem I will assign the formvariable as dataProvider.
For that I made:
dataProvider: ‘my_data_provider’
But the formvariable is always null if I enter any value and execute the onAction_find method.
Why is it doing what I want, if I set the property of the INPUT menuItem in the form/component properties and not by method.
Just tested that and there is indeed a small bug that kills databinding for inputs when you have left and right aligned items (with only left aligned items I think it should work). Could you please create a ticket on github then I can fix that?
Hi Patrick
I am trying to set menu items individually depending on the user access rights by adding them one at a time with a loop. The problem addMenuItem does not appear to be working as I have it and I am not understanding the Wiki instructions
var item = [
{
itemId: "1",
displayType: "MENU_ITEM",
iconName: "fa fa-pencil-square-o",
onAction: "onAction_edit",
position: "RIGHT",
text: "Help"
}
];
elements.navbar.addMenuItem(item)
Instructions are saying:
addMenuItem
Adds the given item to the navbar.
Params
Type Name Description Required
menuItem itemToAdd The item to add Required
Returns void
Can you point me in the right direction please
rgds
Gordon
addMenuItem expects one item and you are giving it an array… So change that to
var item = {
itemId: "1",
displayType: "MENU_ITEM",
iconName: "fa fa-pencil-square-o",
onAction: onAction_edit,
position: "RIGHT",
text: "Help"
};
elements.navbar.addMenuItem(item)
and try again.
EDITED: onAction wants a Function (reference), not the name of a function… So remove the quotes.
Thanks Patrick, it would be good to add this example or a similar one to the wiki if thats possible as the instructions made little sense to me, I don’t know about others
Gordon