Bootstrap Extra Components 1.1.0 released

Announcements of the latest WebComponents for NGClient (shipped by the WebPackageManager)

Bootstrap Extra Components 1.1.0 released

Postby patrick » Mon Mar 13, 2017 7:56 pm

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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby tgs » Tue Mar 14, 2017 9:45 am

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
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 886
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby patrick » Tue Mar 14, 2017 10:24 am

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 = [...]
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby tgs » Tue Mar 14, 2017 11:17 am

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
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 886
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby patrick » Tue Mar 14, 2017 11:27 am

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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby tgs » Tue Mar 14, 2017 12:04 pm

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?
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 886
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby patrick » Tue Mar 14, 2017 12:26 pm

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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby HEKUCH » Wed Mar 15, 2017 2:02 pm

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.
Hendrick Kurland

DataBit GmbH
CH-9217 Neukirch an der Thur
HEKUCH
 
Posts: 13
Joined: Thu May 05, 2011 8:02 am

Re: Bootstrap Extra Components 1.1.0 released

Postby patrick » Wed Mar 15, 2017 3:56 pm

You mean for the button itself? You can file a feature request on github if that is wanted/needed...
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby HEKUCH » Wed Mar 15, 2017 4:05 pm

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]
You do not have the required permissions to view the files attached to this post.
Hendrick Kurland

DataBit GmbH
CH-9217 Neukirch an der Thur
HEKUCH
 
Posts: 13
Joined: Thu May 05, 2011 8:02 am

Re: Bootstrap Extra Components 1.1.0 released

Postby patrick » Wed Mar 15, 2017 4:13 pm

I can't see what the problem is. Is it cut off at the bottom or on the right?
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby patrick » Wed Mar 15, 2017 4:15 pm

And btw: this looks a bit as if the Navbar component might be a better fit in general...
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby HEKUCH » Sat Mar 18, 2017 10:58 am

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.
Hendrick Kurland

DataBit GmbH
CH-9217 Neukirch an der Thur
HEKUCH
 
Posts: 13
Joined: Thu May 05, 2011 8:02 am

Re: Bootstrap Extra Components 1.1.0 released

Postby tgs » Mon Mar 20, 2017 4:38 pm

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?
You do not have the required permissions to view the files attached to this post.
Thomas Schnaus
SAN Developer
yomotec GmbH
User avatar
tgs
 
Posts: 886
Joined: Wed Oct 04, 2006 12:05 pm
Location: Germany

Re: Bootstrap Extra Components 1.1.0 released

Postby patrick » Mon Mar 20, 2017 4:55 pm

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
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Next

Return to Web Components

Who is online

Users browsing this forum: No registered users and 4 guests