You can see tuto.mnx|mpr
by modify project home(1)+'tools\ab\aw\samples\fic\fictuto\tutoTestBS'
Thank you Thierry, but how (from where) to launch the menu.mpr ?
My DO Monmenu.mpr
has no effect
Look at tutosets.prg
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 ?
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.
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 ?
Maybe the nav
container is hidden in your case
Can you see any menu HTML generated?
Everything is OK. in fact, I wanted an in-form menu ... Can we reproduce a button (with his associate menu) like this ?
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.
Yes of course, but I would have preferred a dropdown control in bootstrap 😉
OK, I’ll give you a code sample later this evening.
Thank's in advance !
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
Thank you Thierry, visually it's ok.
It works well with an url but how to only get the text of the option ?
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?
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)" ?
<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>
I'm trying to hang on ... 😉
In my (your) case, it seems to work. But where does the value of the selected option get ?
It seems to work
Do you see the event going to the server? what parameters are sent? (see screenshot below)
It seems not ...
Value: 0
It's the same if I chose the second option
please post the generated HTML and JS for this object, thanks
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
Ok for the value.
But my control is a button and I have not waRowSource[]
procedure dropdown.init
this.addProperty('waRowSource[1]')
return dodefault()
I did a little differently but it works !
Thank you Thierry, FIC is really a wonderful extensible product
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.