Bootstrap Extra Components 1.1.0 released

[patrick]

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.

[tgs]

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:

Code: Select all

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?

Code: Select all

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

[patrick]

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

Code: Select all

...
onAction: onAction_find,
...

and regarding the type warning, add this to your variable declaration (see what the warning says it wants):

Code: Select all

/** @type {Array<bootstrapextracomponents-navbar.menuItem>} */
var menuItems = [...]

[tgs]

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

[patrick]

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.

[tgs]

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?

[patrick]

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.

[HEKUCH]

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.

[patrick]

You mean for the button itself? You can file a feature request on github if that is wanted/needed...

[HEKUCH]

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]

[patrick]

I can't see what the problem is. Is it cut off at the bottom or on the right?

[patrick]

And btw: this looks a bit as if the Navbar component might be a better fit in general...

[HEKUCH]

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.

[tgs]

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.

navbar_item_property.png

But when setting the menuItem by method, the formvariable has no value if I enter anything in the input field.

Code: Select all

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?

[patrick]

When you set the dataprovider as

Code: Select all

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

Code: Select all

dataProvider: 'my_data_provider' // the name of the dataProvider, not it's value

and it should work