Profound Logic Forums

Posted: **Wed Jan 14, 2015 5:21 pm**

Hi All,
I'm new to ProfoundUi, i would like to add a context menu to a subfile.
That way, i will copy the 2=Edit, 3=Copy, 4=Delete, 5=Show to a context menu.
So, when the user right click in a line, he can do these option with the mouse.
I dont have found an example of this in ProfoundUI examples, so if somebody has, it will help me.
I have read the posts but don't really understand how to create a widget...
Thanks !
Best regards,
Patrice

Posted: **Thu Jan 15, 2015 10:45 am**

Hello Patrice,

I can give you a quick example on how to create a context menu.

First thing to do is add the menu to your record format containing the grid.

: context1.png (19.15 KiB) Viewed 1061 times

Set the 'context menu id' property of the Grid widget to the id of the added menu widget.

: context3.png (1.39 KiB) Viewed 1061 times

Set the choices/values you would like to make available to the user in the menu widget. (If no values are set, the values in the 'choices' property are used)

: context2.png (3.81 KiB) Viewed 1061 times

Hide the added context menu, by right-clicking the widget and selecting 'Hide'.

: context6.png (12.64 KiB) Viewed 1061 times

Now the menu should be available when the grid is right-clicked.

: context4.png (8.19 KiB) Viewed 1061 times

: context5.png (8.93 KiB) Viewed 1061 times

Posted: **Thu Jan 15, 2015 12:07 pm**

Hi Scott,
Nice !!! Thank you very much for this example.
I'm going to try it !
Best regards,
Patrice

Posted: **Thu Jan 15, 2015 3:36 pm**

Patrice,

To expand on Scott's reply. There is some fairly simple JavaScript you can use to put the clicked context menu option into your onscreen (or hidden) option field and submit the screen.

First you would put some code in the 'onrowclick' property of your grid (Note the button to the right of the area where you enter text. You can click that to get a context sensitive text editor).

: onrowclick.png (3.28 KiB) Viewed 1043 times

Here's the code:

Code: Select all

applyProperty("<ID property of your context menu>","user defined data",row);

This code puts the row that the user clicked into a property of the context menu named "user defined data" (note that you should change the text in the <> symbols to the id of your context menu).

You would then put some code in the 'onoptionclick' property of your context menu (Note that this image shows our text editor that is launched when you press the button mentioned above).

: onoptionclick.png (11.05 KiB) Viewed 1043 times

Here's the code:

Code: Select all

var rowClicked = this.pui.properties["user defined data"];
pui.set("<Name of option field in your grid>." + rowClicked, value);
pui.click();

This code pulls the row that the user clicked out of the property it was put in by the previous code and concatenates it with the field name of your option field. It then uses our pui.click() function to submit it back to the server.

If you are converting existing green screens, all of this can be done automatically by options available in our Conversion Themes (see this blog post http://www.profoundlogic.com/blog/dds-c ... ents-ibmi/).

Glenn

Posted: **Thu Jan 15, 2015 3:51 pm**

This is a very nice explanation, guys. I wonder if we should put it in our documentation somewhere?

Posted: **Fri Jan 16, 2015 7:08 am**

Hi Guys,
Thanks very much for your precious help.
i will try all and give you feedback.
Really nice !
Patrice

Posted: **Mon Jan 19, 2015 5:07 pm**

Hi Guys,

With your help, i succeed in creating a menu on a subfile.

To make it clear for others, the first part is to create a menu (Scott Wagers gave us screen copy of that).
At this stage, the menu is clicable but nothing is done when you select something.

To make the link beetween your subfile and this menu, you need to do what Glenn explain in the next part, the javascript code.
This code permit the system to put when you right click on the subfile the line number of your subfile (to know where to return information) in a variable, then call the menu and return your choice with the line number. This way, your otion (where normaly the user put 2, 3, 4 ... is completed).

I have a question to support team, i have tried to avoid javascript to only use the "menu response" zone of the menu. (Like a selectbox).
In that zone, i have put the same name as my subfile option :
ex :
Subfile Menu
ZCHOIX NAME ADRESS .... Menu response=ZCHOIX
ZCHOIX NAME ADRESS ....
ZCHOIX NAME ADRESS ....
ZCHOIX NAME ADRESS ....
With that, i have no error but my subfile is not impacted (i think because i haven't the raw number).
Is there a simple way to do that or are we obliged to use javascript ?

Thanks a lot for your help,
Patrice

Posted: **Mon Jan 19, 2015 6:15 pm**

I think the "menu response" property is for when you use the menu as a "regular" menu. i.e., if you're writing a screen whose purpose is to be a menu where the user selects an option.

I don't think you can use "menu response" when a menu is used as a context menu of a subfile, for that you need to use the JavaScript technique that Glenn posted.

Posted: **Tue Aug 11, 2015 1:45 pm**

And how to put an image behind the options like this ?

Thank you

Posted: **Tue Aug 11, 2015 1:58 pm**

You can embed HTML in the Choices property of the menu widget. So for example if I set my Choices property to the following:

<img src="/img/accept.png"> Option 1,Option 2,Option 3,Option 4,Option 5

It would look like this:

: MenuWithImage.png (4.69 KiB) Viewed 871 times

Profound Logic Forums

Subfile Context Menu Code Sample

Subfile Context Menu Code Sample

Re: Subfile Context Menu Code Sample

Re: Subfile Context Menu Code Sample

Re: Subfile Context Menu Code Sample

Re: Subfile Context Menu Code Sample

Re: Subfile Context Menu Code Sample

Re: Subfile Context Menu Code Sample

Re: Subfile Context Menu Code Sample

Re: Subfile Context Menu Code Sample

Re: Subfile Context Menu Code Sample