Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 165
Registered: ‎10-04-2010
My Device: P'9982 & Z10
My Carrier: alfa Lebanon
Accepted Solution

Context Menu - Modify List Element

[ Edited ]

I added Context Menu items to a list's objects

 

<div data-bb-type="item" data-bb-title="Test Title"  data-webworks-context="myContext" onclick="bb.pushScreen('editScreen.html', 'editScreen', {elementID: 1});">Something</div>

 With the Context Menu I added two items, one to remove it and one to quickly modify an attribute of that object. The question is, how to pass the elementID to the context menu so that I know which element to modify or delete?

Like I'm doing with the onclick event.

 

This is how I'm adding the Context Menu.

 

var myItem = {actionId: '2', label: 'Remove', icon:'local:///images/icons/remove.png'},
        contexts = ["myContext"];
    blackberry.ui.contextmenu.addItem(contexts, myItem, function() {
        toast('You clicked Remove');
    });
    var myItem = {actionId: '1', label: 'Stop', icon:'local:///images/icons/stop.png'},
        contexts = ["myContext"];
    blackberry.ui.contextmenu.addItem(contexts, myItem, function() {
        toast('You clicked Stop');
    });

 

Ideally, I would like to override the automatic "Cancel" button that shows with the "Remove" button instead of creating an additional one for it.

 

Thanks for any help! Smiley Happy

Wadi
Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Context Menu - Modify List Element

Here is the Wiki page for Context Menus in bbUI.js which explains the features you are looking to implement:

https://github.com/blackberry/bbUI.js/wiki/Context-Menus

 

Note to use context menus, you need to add a custom extension called "blackberry.ui.contextmenu".

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Retired
Posts: 245
Registered: ‎09-21-2012
My Device: Q10
My Carrier: Virgin

Re: Context Menu - Modify List Element

You can actually speciy this using the support for the data-webworks-context as a JSON object. I have a blog post sitting around that I have yet to post... Smiley Sad. So here is the gist of it:

 

1. When you are creating the data-webworks-context attribute you can specify 2 types of data 1) A string, or 2) a JSON object. The JSON object is of the following form:

- '{ "id": <Id>, "type": <customcontext-type>, "header" : <what header you want to appear>, "subheader" : <the sub heading you would like> }'

 

This data will be parsed as JSON by the custom context API and will set your headings when the CCM appears, as well as send back the ID the was selected to your callback.

 

2. Therefore inside your callback to add item put a parameter:

 

var myItem = {actionId: '2', label: 'Remove', icon:'local:///images/icons/remove.png'},
        contexts = ["myContext"];
    blackberry.ui.contextmenu.addItem(contexts, myItem, function(Id) {
        toast('You clicked Remove on id:' + Id);
    });
    var myItem = {actionId: '1', label: 'Stop', icon:'local:///images/icons/stop.png'},
        contexts = ["myContext"];
    blackberry.ui.contextmenu.addItem(contexts, myItem, function(Id) {
        toast('You clicked Stop on id:' + Id);
    });

Give that a shot and let me know how it goes Smiley Happy

@erikjohnzon
erjohnson@blackberry.com
Retired
Posts: 245
Registered: ‎09-21-2012
My Device: Q10
My Carrier: Virgin

Re: Context Menu - Modify List Element

Oh and I also forgot....if you would like to override the "Cancel" item that appears at the bottom you can set your own. While defining the custom context you simply specify that actionId of the item you wish to appear pinned:

 

 

var options = {
    ...
    pinnedItemId : '2'
    ...
};
blackberry.ui.contextmenu.defineCustomContext("MyContext", options);
@erikjohnzon
erjohnson@blackberry.com
Developer
Posts: 165
Registered: ‎10-04-2010
My Device: P'9982 & Z10
My Carrier: alfa Lebanon

Re: Context Menu - Modify List Element

I still don't really know how to get the element's ID.

 

@astanley: The documentation explains the "selected property" alright, but how do I find out the Context Menu's ID so I can use this:

context = document.getElementById('mycontextmenu');

 I'm creating the menu with the code I mentioned in the first post, how can I set the menu's ID?

 

 

@erikjohnzon: Thanks for the pinning the item tip, it worked! The ID in the code you shared is not being set it toasts a 'null'

Wadi
Retired
Posts: 245
Registered: ‎09-21-2012
My Device: Q10
My Carrier: Virgin

Re: Context Menu - Modify List Element

Can you post your the code for this attrbute?

data-webworks-context
@erikjohnzon
erjohnson@blackberry.com
Developer
Posts: 165
Registered: ‎10-04-2010
My Device: P'9982 & Z10
My Carrier: alfa Lebanon

Re: Context Menu - Modify List Element

I'm adding the list elements dynamically, this is how I'm adding that attribute:
item.setAttribute('data-webworks-context',"myContext");
Wadi
Retired
Posts: 245
Registered: ‎09-21-2012
My Device: Q10
My Carrier: Virgin

Re: Context Menu - Modify List Element

Yes, you need to pass in the ID you want returned as I stated previously. This attribute accepts a JSON string:

 

 

data-webworks-context='{ "id": "2" "type": "myContext", "header" : "A great header", "subheader" : "The subheader" }'
Try that and let me know if it works.
@erikjohnzon
erjohnson@blackberry.com
Developer
Posts: 165
Registered: ‎10-04-2010
My Device: P'9982 & Z10
My Carrier: alfa Lebanon

Re: Context Menu - Modify List Element

[ Edited ]

So this is my element's DIV now:

<div data-bb-type="item" data-bb-title="Catch a Duck" data-webworks-context="{ 'id': 'myContextMenu', 'type': 'myContext', 'header' : 'A great header', 'subheader' : 'The subheader' }" onclick="bb.pushScreen('editScreen.html', 'editScreen', {elementID: 1});" class="bb-bb10-image-list-item bb-bb10-image-list-item-dark bb-bb10-image-list-item-720x720" title="Catch a Duck">

 But now the Context Menu isn't showing anymore when I press and hold in the simulator. Am I missing something?

 

This is how I'm adding the attribute now:

item.setAttribute('data-webworks-context',"{ 'id': 'myContextMenu', 'type': 'myContext', 'header' : 'A great header', 'subheader' : 'The subheader' }");

 

Wadi
Retired
Posts: 245
Registered: ‎09-21-2012
My Device: Q10
My Carrier: Virgin

Re: Context Menu - Modify List Element

Whoops try swtiching the quotes. This is one that works for me:

data-webworks-context='{"id":"1", "type":"MyContext", "header":"The Author", "subheader":"Mr. William Goldman"}'

@erikjohnzon
erjohnson@blackberry.com