# Bootstrap Extra Components 1.1.0 released

**URL:** <https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173>\
**Category:** Classic Servoy\
**Created:** [March 13, 2017, 5:56pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173 "2017-03-13T17:56:39Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Gordon\_McLean](https://avatars.discourse-cdn.com/v4/letter/g/839c29/32.png) [@Gordon\_McLean](https://forum.servoy.com/u/Gordon_McLean)\
**Post date:** [March 22, 2017, 6:34pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/21 "2017-03-22T18:34:42Z")

</div>

> patrick:  
> addMenuItem expects one item and you are giving it an array… So change that to
> 
> ```auto
> var item = {
> 
> ```

```
    itemId: "1",
    displayType: "MENU_ITEM",
    iconName: "fa fa-pencil-square-o",
    onAction: onAction_edit,
    position: "RIGHT",
    text: "Help"

```

};  
elements.navbar.addMenuItem(item)

> ```auto
> 
> and try again.
> 
> EDITED: onAction wants a Function (reference), not the name of a function... So remove the quotes.
> 
> ```

I have copied this and added onAction as a function it is still not creating a menu item ? the code is:

```auto
var item = {
        itemId: "1",
        displayType: "MENU_ITEM",
        iconName: "fa fa-pencil-square-o",
        onAction: onAction,
        position: "RIGHT",
        text: "Help"
   };
elements.navbar.addMenuItem(item)

```

In addition I am getting a warning about the addMenuItem:

The function addMenuItem(bootstrapextracomponents-navbar.menuItem) is not applicable for the arguments  
({itemId:String,displayType:String,iconName:String,onAction:String,position:String,text:String})

Gordon

---

<div class="post-metadata">

**Author:** ![HEKUCH](https://avatars.discourse-cdn.com/v4/letter/h/aeb1de/32.png) [@HEKUCH](https://forum.servoy.com/u/HEKUCH)\
**Post date:** [March 22, 2017, 10:01pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/22 "2017-03-22T22:01:12Z")

</div>

Hi Gordon,

You Need an annotation in your code. This tell your compiler what item is:

```auto
/**@type{bootstrapextracomponents-navbar.menuItem}*/
var item =    {
        itemId: "1",
        displayType: "MENU_ITEM",
        iconName: "fa fa-pencil-square-o",
        onAction: onAction_edit,
        position: "RIGHT",
        text: "Help"
   };
elements.navbar.addMenuItem(item)

```

I prefer this spelling

```auto
[code]
/**@type{bootstrapextracomponents-navbar.menuItem}*/
var item =    new Object() ;
item.itemId = "1" ;
item.displayType = "MENU_ITEM" ;
item.iconName = "fa fa-pencil-square-o" ;
item.onAction = onAction_edit ;
item.position = "RIGHT" ;
item.text = "Help" ;

elements.navbar.addMenuItem(item)

```

[/code]

---

<div class="post-metadata">

**Author:** ![patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@patrick](https://forum.servoy.com/u/patrick)\
**Post date:** [March 22, 2017, 10:11pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/23 "2017-03-22T22:11:58Z")

</div>

> 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

Hm. Not sure I understand why that isn’t clear. The docs state

```auto
Method
addMenuItem	

Parameter (name/type)
menuItem:menuItem		

Description
Adds the given menu item to the bar.

```

Meaning the method wants a menuItem (even a link to the type definition is available) and not an array of something. That would look like this:

```auto
Method
setMenuItems	

Parameter (name/type)
menuItems:menuItem[]

```

so in this case, it wants an array containing menuItem items (it wants all items).

Examples in the Wiki would be nice, I agree. But they take time that I can’t spend on features ![:wink:]( "Wink") And there is a sample solution that among other things has exactly your case as example.

---

<div class="post-metadata">

**Author:** ![patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@patrick](https://forum.servoy.com/u/patrick)\
**Post date:** [March 22, 2017, 10:17pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/24 "2017-03-22T22:17:42Z")

</div>

> I have copied this and added onAction as a function it is still not creating a menu item ? the code is:

I have done just that right now. Copied the code (except that I chose an ID not already used and used a different method) and put it in the sample solution on the “Add item” button:

```auto
function onAction_addItem(event) {
	/** @type {bootstrapextracomponents-navbar.menuItem} */
	var itemToAdd = {
        itemId: "1000",
        displayType: "MENU_ITEM",
        iconName: "fa fa-pencil-square-o",
        onAction: onAction_addItem,
        position: "RIGHT",
        text: "Help"
   };
	elements.navbar.addMenuItem(itemToAdd);
}

```

and I get

[attachment=1]snip\_20170322231359.png[/attachment]

When I click that now, I get

[attachment=0]snip\_20170322231547.png[/attachment]

So not sure what goes wrong at your place…

![snip_20170322231547.png](https://canada1.discourse-cdn.com/flex010/uploads/servoy/original/2X/6/694ee69864953dcb56dac0d1bcd3be0b588182bd.png)

![snip_20170322231359.png](https://canada1.discourse-cdn.com/flex010/uploads/servoy/original/2X/b/b8910797585bcd7804d49c1ef50c5c0fd7e7ff2f.png)

---

<div class="post-metadata">

**Author:** ![patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@patrick](https://forum.servoy.com/u/patrick)\
**Post date:** [March 22, 2017, 10:33pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/25 "2017-03-22T22:33:44Z")

</div>

OK. I now added sample code to the wiki for setMenuItems() and addMenuItem()…

---

<div class="post-metadata">

**Author:** ![Gordon\_McLean](https://avatars.discourse-cdn.com/v4/letter/g/839c29/32.png) [@Gordon\_McLean](https://forum.servoy.com/u/Gordon_McLean)\
**Post date:** [April 12, 2017, 2:52pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/26 "2017-04-12T14:52:10Z")

</div>

> HEKUCH:  
> Hi Gordon,
> 
> You Need an annotation in your code. This tell your compiler what item is:
> 
> ```auto
> /**@type{bootstrapextracomponents-navbar.menuItem}*/
> 
> ```

var item =&nbsp; &nbsp; {  
&nbsp; &nbsp; &nbsp; &nbsp; itemId: “1”,  
&nbsp; &nbsp; &nbsp; &nbsp; displayType: “MENU\_ITEM”,  
&nbsp; &nbsp; &nbsp; &nbsp; iconName: “fa fa-pencil-square-o”,  
&nbsp; &nbsp; &nbsp; &nbsp; onAction: onAction\_edit,  
&nbsp; &nbsp; &nbsp; &nbsp; position: “RIGHT”,  
&nbsp; &nbsp; &nbsp; &nbsp; text: “Help”  
&nbsp; &nbsp;};  
elements.navbar.addMenuItem(item)

> ```auto
> 
> I prefer this spelling 
> 
> ```
> 
> [code]  
> /\*\*@type{bootstrapextracomponents-navbar.menuItem}\*/  
> var item =&nbsp; &nbsp; new Object() ;  
> item.itemId = “1” ;  
> item.displayType = “MENU\_ITEM” ;  
> item.iconName = “fa fa-pencil-square-o” ;  
> item.onAction = onAction\_edit ;  
> item.position = “RIGHT” ;  
> item.text = “Help” ;

elements.navbar.addMenuItem(item)

> ```auto
> 
> [/code]
> 
> ```

Talking the need for annotation on board where do you get the correct syntax because I have tried adding this to another component and its throwing a warning “Unknown type servoyextracomponents-sidebar” ie is there a type list anywhere as I have not seen it ?

/\*\* @type {servoyextracomponents-sidebar} \*/

---

<div class="post-metadata">

**Author:** ![rafig](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rafig/32/4463_2.png) [@rafig](https://forum.servoy.com/u/rafig)\
**Post date:** [June 22, 2017, 4:12pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/27 "2017-06-22T16:12:53Z")

</div>

Hi,  
I want to change my solution from setting the navbar brandlogo to a solution media file

```auto
elements.navbar.brandLogo = "media:///companylogo.png";

```

to using an image stored in a table (media datatype)

```auto
elements.navbar.brandLogo = plugins.images.getImage(_to_organisation_default.logo) ;

```

I also tried

```auto
elements.navbar.brandLogo = solutionModel.getMedia(_to_organisation_default.logo) ;

```

but neither are working (and relationship is pointing to correct record & that media does exist)

Please can someone tell me the correct syntax??  
Thanks  
Rafi

---

<div class="post-metadata">

**Author:** ![patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@patrick](https://forum.servoy.com/u/patrick)\
**Post date:** [June 22, 2017, 4:58pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/28 "2017-06-22T16:58:56Z")

</div>

I have to investigate this a bit. It seems that the media type can’t be just set from a byte, maybe because we need a resource on the server (instead of the bytes).

As a workaround you could do

```auto
var media = solutionModel.newMedia('mylogo',record.image_media)
elements.navbar.brandLogo = 'media:///mylogo'

```

Bit strange, but it should work.

---

<div class="post-metadata">

**Author:** ![rafig](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rafig/32/4463_2.png) [@rafig](https://forum.servoy.com/u/rafig)\
**Post date:** [June 22, 2017, 5:55pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/29 "2017-06-22T17:55:32Z")

</div>

> patrick:  
> I have to investigate this a bit. It seems that the media type can’t be just set from a byte, maybe because we need a resource on the server (instead of the bytes).
> 
> As a workaround you could do
> 
> ```auto
> var media = solutionModel.newMedia('mylogo',record.image_media)
> 
> ```

elements.navbar.brandLogo = ‘media:///mylogo’

> ```auto
> 
> Bit strange, but it should work.
> 
> ```

Hi Patrick,  
thanks for looking in to this & I will have to use your ‘strange’ way of doing it for the moment.  
Thanks  
Rafi

---

<div class="post-metadata">

**Author:** ![patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@patrick](https://forum.servoy.com/u/patrick)\
**Post date:** [June 23, 2017, 6:44am UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/30 "2017-06-23T06:44:35Z")

</div>

As I thought: the media type does not support byte. I could add a property brandLogoDataprovider, then you could assign a form variable or something like that, but I think that’s a bit over engineered. Your use case of setting a nav bar’s brand logo from a record is maybe not the 90% use case…

---

<div class="post-metadata">

**Author:** ![rafig](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rafig/32/4463_2.png) [@rafig](https://forum.servoy.com/u/rafig)\
**Post date:** [June 23, 2017, 8:02am UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/31 "2017-06-23T08:02:20Z")

</div>

> patrick:  
> As I thought: the media type does not support byte. I could add a property brandLogoDataprovider, then you could assign a form variable or something like that, but I think that’s a bit over engineered. Your use case of setting a nav bar’s brand logo from a record is maybe not the 90% use case…

Hi.  
My ‘use case’ is that I want a client to be able to associate an image of their choosing that I am now getting them to store along with their organisation details & then in solution, if they change the ‘org’ it changes the logo…  
(My client has two parts that I have termed organisations and in the solution someone at a higher level may want to change which org they are dealing with & illustrate by changing logo)  
I’d be happy with a new property brandLogoDataprovider…

Thanks  
Rafi

---

<div class="post-metadata">

**Author:** ![patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@patrick](https://forum.servoy.com/u/patrick)\
**Post date:** [June 23, 2017, 11:34am UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/32 "2017-06-23T11:34:48Z")

</div>

But since this logo is rather static, it doesn’t feel wrong to create a media from it, does it?

---

<div class="post-metadata">

**Author:** ![rafig](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rafig/32/4463_2.png) [@rafig](https://forum.servoy.com/u/rafig)\
**Post date:** [June 23, 2017, 11:46am UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/33 "2017-06-23T11:46:09Z")

</div>

> patrick:  
> But since this logo is rather static, it doesn’t feel wrong to create a media from it, does it?

Most of them it will be static, but if the client decides to change the logo they use for an org, I don’t want to have to be changing media files on the server and I’m also using that table media on reports, so want it to come from the table …

Also, I’m a bit confused ![:?]( "Confused")  
In my onLoad I put

```auto
	var media = solutionModel.newMedia('mylogo',_to_organisation_default.logo);
	elements.navbar.brandLogo = 'media:///mylogo';

```

and that sets the correct image.  
I have added a menu to the navbar with the list of organisations and an ‘onDataChange’ method to that menu.  
Prior to this, this code changed the brandLogo correctly

```auto
	switch (_to_organisation_default.name, 1)) {
	case 'Org2':
		elements.navbar.brandLogo = "media:///Org2Logo.png";
		break
	default:
		elements.navbar.brandLogo = "media:///OrgDefaultLogo.png";
	}

```

but now using this code, it doesn’t work

```auto
	// remove logo if it exists
	var removed = solutionModel.removeMedia('mylogo');
	// set logo to org logo
	var media = solutionModel.newMedia('mylogo',_to_organisation_default.logo);
	elements.navbar.brandLogo = 'media:///mylogo';

```

(followed by an application.updateUI…)  
and the relationship which is based on a global is having it’s global value changed (& if I console output the media column, it changes), as the org name which is setting brandName is changing also based on that relationship??  
Not sure what I’m doing wrong or why it isn’t working…

---

<div class="post-metadata">

**Author:** ![patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@patrick](https://forum.servoy.com/u/patrick)\
**Post date:** [June 23, 2017, 12:03pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/34 "2017-06-23T12:03:05Z")

</div>

It could be that Servoy does not see the setting of brandLogo = ‘media:///logo’ as a change and therefore doesn’t send anything to the client.

Try something like this instead:

```auto
// set logo to org logo
var media = solutionModel.newMedia('logo_' + _to_organisation_default.organisation_id, _to_organisation_default.logo);
elements.navbar.brandLogo = 'media:///logo_' + _to_organisation_default.organisation_id;

```

This should give each org logo a unique name… (given that the ID of organisation is called “organisation\_id”).

---

<div class="post-metadata">

**Author:** ![patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@patrick](https://forum.servoy.com/u/patrick)\
**Post date:** [June 23, 2017, 12:03pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/35 "2017-06-23T12:03:49Z")

</div>

Also, with this approach, there is no need to remove any media previously created…

---

<div class="post-metadata">

**Author:** ![rafig](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rafig/32/4463_2.png) [@rafig](https://forum.servoy.com/u/rafig)\
**Post date:** [June 23, 2017, 12:47pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/36 "2017-06-23T12:47:57Z")

</div>

> patrick:  
> It could be that Servoy does not see the setting of brandLogo = ‘media:///logo’ as a change and therefore doesn’t send anything to the client.

I think that must be the case…

> patrick:  
> Try something like this instead:  
> This should give each org logo a unique name… (given that the ID of organisation is called “organisation\_id”).  
> Also, with this approach, there is no need to remove any media previously created…

as it now works great, thanks for the suggestion.

---

<div class="post-metadata">

**Author:** ![rafig](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rafig/32/4463_2.png) [@rafig](https://forum.servoy.com/u/rafig)\
**Post date:** [June 25, 2018, 5:35pm UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/37 "2018-06-25T17:35:57Z")

</div>

Hi,  
I was just playing with the online demo ([demo.servoy.com](http://demo.servoy.com)) & downloaded the bootstrapextracomponents sample from there, imported it & let it auto import the correct web packages, but the current release of Bootstrap Extra Components seems to be missing the ‘badges’ component??  
Is there a reason or is it just a mistake?  
Thanks  
Rafi

---

<div class="post-metadata">

**Author:** ![rafig](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rafig/32/4463_2.png) [@rafig](https://forum.servoy.com/u/rafig)\
**Post date:** [June 28, 2018, 9:32am UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/38 "2018-06-28T09:32:27Z")

</div>

[^^BUMP^^]

---

<div class="post-metadata">

**Author:** ![patrick](https://avatars.discourse-cdn.com/v4/letter/p/b2d939/32.png) [@patrick](https://forum.servoy.com/u/patrick)\
**Post date:** [June 29, 2018, 7:14am UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/39 "2018-06-29T07:14:12Z")

</div>

That is a know little problem and is fixed for the next release. You could also use the git source to fix this.

---

<div class="post-metadata">

**Author:** ![rafig](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rafig/32/4463_2.png) [@rafig](https://forum.servoy.com/u/rafig)\
**Post date:** [June 29, 2018, 7:36am UTC](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173/40 "2018-06-29T07:36:59Z")

</div>

> patrick:  
> That is a know little problem and is fixed for the next release. You could also use the git source to fix this.

Thanks Patrick…  
I can probably wait for next release ![;-)]( "Wink")

[Previous page](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173.md?page=1)

[Next page](https://forum.servoy.com/t/bootstrap-extra-components-1-1-0-released/19173.md?page=3)