FoxInCloud
Menu in bootstrap mode
Gravatar is a globally recognized avatar based on your email address. Menu in bootstrap mode
  Vincent H.
  All
  Jul 23, 2018 @ 03:01am

Hi Thierry,

I have a hole, sorry ... how to reproduce this style of menu ?

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 23, 2018 @ 04:06am

You can see tuto.mnx|mpr by modify project home(1)+'tools\ab\aw\samples\fic\fictuto\tutoTestBS'

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 23, 2018 @ 05:36am

Thank you Thierry, but how (from where) to launch the menu.mpr ?

My DO Monmenu.mpr has no effect

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 23, 2018 @ 05:48am

Look at tutosets.prg

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 23, 2018 @ 06:15am

Ok Thierry, I found that in my xxxsets.prg

if this.wlWeb
   wMenu ("set sysmenu to")
endif

can I launch a menu from a window or in a window ?

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 23, 2018 @ 07:35am

Setting the menu in xxxSets is application wide.

You can set it for a form page in xxxProcess.<form>().

FoxInCloud does not support in-form menu.

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 23, 2018 @ 08:26am

Ok, I've tried this:

MODIFY COMMAND ... dooserver.prg
DEFINE CLASS dooProcess AS awProcess OF awServer.prg
...
PROCEDURE Tabbord
   EXTERNAL MENU ... Tabbord
   DO ... Tabbord.mpr
   return this.wFormStandardPage('tabbord.scx', .NULL.)
   EXTERNAL FORM Tabbord.scx
ENDPROC

No effect. Somethning wrong ?

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 23, 2018 @ 12:27pm

Maybe the nav container is hidden in your case

Can you see any menu HTML generated?

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 24, 2018 @ 01:53am

Everything is OK. in fact, I wanted an in-form menu ... Can we reproduce a button (with his associate menu) like this ?

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 24, 2018 @ 05:33am

Well, we don’t support in-form menu…

If you need a single level you can use a drop-down list.

Otherwise you need to drop a container and generate a Bootstrap menu HTML using its .wcHTMLgen() method.

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 24, 2018 @ 06:07am

Yes of course, but I would have preferred a dropdown control in bootstrap 😉

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 24, 2018 @ 08:43am

OK, I’ll give you a code sample later this evening.

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 24, 2018 @ 09:34am

Thank's in advance !

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 24, 2018 @ 10:51am

untested, to be adapted

If the JavaScript Event handler does not work, please provide a test URL

procedure combobox.wcHTMLgen
lparameters toHTMLgen, tlInnerHTML

text to this.wcHTML textmerge noshow flags 1 pretext 3
<div class="btn-group" id="<<this.wcID>>">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Coordonnées <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li value="<<this.List[1]>>"><a href="javascript:void(0)">Action 1</a></li>
    <li value="<<this.List[2]>>"><a href="javascript:void(0)">Another action</a></li>
    <li value="<<this.List[3]>>"><a href="javascript:void(0)">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li value="<<etc.>>"><a href="javascript:void(0)">Separated link</a></li>
  </ul>
</div>
endtext

local lcJS
text to lcJS textmerge noshow flags 1 pretext 3
jQuery("#<<this.wcID>> li").click(function(event){FoxInCloud.EventRequest(
  'DOMEvent' // méthode awProcess
, event // événement : objet ou type
, this // source de l'événement : élément ou ID
, jQuery(this).val() // valeur de l'élément
, "<<this.wcID>>" // en cas d'indirection d'élément, ID à transmettre au serveur
);})
endtext

toHTMLgen.cScriptJSadd(m.lcJS)

Here is the Bootstrap HTML reference: https://getbootstrap.com/docs/3.3/components/#btn-dropdowns-single

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 25, 2018 @ 01:24am

Thank you Thierry, visually it's ok.
It works well with an url but how to only get the text of the option ?

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 25, 2018 @ 02:54am

Not sure I understand… do you mean « get the text of the option as value »?

Can you post code and/or screenshot, and/or additional explanations?

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 25, 2018 @ 03:10am
LPARAMETERS toHTMLgen AS awHTMLgen OF awHTML.prg, tlInnerHTML && {en} doc in Parent Code {fr} doc dans le code parent
DIMENSION ADrop (5)
Adrop(1) = "Option1"
Adrop(2) = "Option2"
Adrop(3) = "Option3"
Adrop(4) = "Option4"
Adrop(5) = "Option5"
text to this.wcHTML textmerge noshow flags 1 pretext 3
<div class="btn-group" id="<<this.wcID>>">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Coordonnées <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li value="Adrop(1)>>"><a href="https://www.google.fr">Action 1</a></li>
    <li value="Adrop(2)>>"><a href="void(0)">Another action</a></li>
    <li value="Adrop(3)>>"><a href="void(0)">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li value="<<Adrop(4)>>"><a href="void(0)">Separated link</a></li>
  </ul>
</div>
endtext
...

I would like to retrieve the text of the selected option to launch the appropriate program.
What should I write instead of href = "void (0)" ?

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 25, 2018 @ 04:27am

<a href="javascript:void(0)">…</a> is required for HTML/CSS markup, has no role for getting and processing the value on the server.

What is important is the <li value=""> element

You could try this (remove the space between java and script, not sure why message board removes javascript :):

<li value="<<Adrop(xx)>>"><a href="java script:void(0)"><<Adrop(xx)>></a></li>

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 25, 2018 @ 05:41am

I'm trying to hang on ... 😉
In my (your) case, it seems to work. But where does the value of the selected option get ?

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 25, 2018 @ 06:02am

It seems to work

Do you see the event going to the server? what parameters are sent? (see screenshot below)

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 25, 2018 @ 06:32am

It seems not ...

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  Vincent H.
  Jul 25, 2018 @ 06:36am

Value: 0

It's the same if I chose the second option

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 25, 2018 @ 07:02am

please post the generated HTML and JS for this object, thanks

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 25, 2018 @ 07:15am

got it, in <li value="xx">, xx indicates the current ordinal value of the list item

HTML should be: <li value="<<xx>>"><a href="java script:void(0)"><<Adrop(xx)>></a></li>

On server:

&& in this.wcHTMLgen(), use this.waRowSource[] instead of aDrop[]

procedure dropdown.click
lparameters iItem

if !empty(m.iItem)
 this.Value = Adrop[m.iItem] && use this.waRowSource[] instead
 this.Valid && or .InteractiveChange depending on your code
endif
Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 25, 2018 @ 07:27am

Ok for the value.
But my control is a button and I have not waRowSource[]

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 25, 2018 @ 07:28am
procedure dropdown.init

this.addProperty('waRowSource[1]')

return dodefault()
Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  Vincent H.
  FoxInCloud Support - Thierry N.
  Jul 25, 2018 @ 07:58am

I did a little differently but it works !
Thank you Thierry, FIC is really a wonderful extensible product

Gravatar is a globally recognized avatar based on your email address. re: Menu in bootstrap mode
  FoxInCloud Support - Thierry N.
  Vincent H.
  Jul 25, 2018 @ 08:52am

Thanks for these nice words, glad you could get it to work…

What is also very handy is the encapsulation of Web code within the corresponding VFP objects and classes methods.

You benefit from the structured visual designers and don’t have to keep in mind a complex naming scheme and multiple files.

© 1996-2024