Thank you very much.
>Below is a VERY SIMPLE example using HTML in VFP as a UI. Keep in mind this is a very basic UI from someone who is not good at UI design and was created very quickly. In fact you can create any UI that you see on the web and also utilize JS too (ie: You could create and use a graphic with d3js -
https://www.d3-graph-gallery.com possibilities are a lot):
>
>
>Set Safety off
>Local lcHTML
>lcHTML = Forcepath('Sample.html', Sys(2023))
>If !Directory(ForcePath('images',Sys(2023)))
> Md (ForcePath('images',Sys(2023)))
>endif
>Strtofile( GetSampleHTML(), m.lcHTML)
>
>Public o
>o = Createobject('MyHTMLViewer', m.lcHTML)
>o.Show
>
>Define Class MyHTMLViewer As Form
> Caption = "HTML sample"
> Height = 768
> Width = 1024
>
> Add Object htmlviewer As OleControl With ;
> anchor = 15, Left=216, Top=43, Height=685, Width = 793, OleClass = 'Shell.Explorer'
>
> Procedure Init
> Lparameters tcHTML
> With Thisform.htmlviewer
> .Navigate2(m.tcHTML)
> Endwith
> Endproc
>
> Procedure htmlviewer.Refresh
> Nodefault
> Endproc
>
> Procedure htmlviewer.BeforeNavigate2
> Lparameters pdisp, url, Flags, targetframename, postdata, headers, Cancel
> If Atc('#',m.url) > 0
> Local lcVals, lcCurrentValue
> * oFrm = This.Object.Document.myForm
> lcVals = m.url + Chr(13)+Chr(10)
> If This.Object.Document.Forms.Length > 0
> For Each oFrm In This.Object.Document.Forms
> lcVals = lcVals + oFrm.Name + Chr(13)
> If oFrm.elements.Length > 0
> For Each oElem In oFrm.elements
> If !Empty(oElem.Name)
> If oElem.Type = "select-multiple"
> lcList=''
> For ix=0 To oElem.Length-1
> If oElem.Item(ix).Selected
> lcList = lcList + Iif(Empty(lcList),'',',')+oElem.Item(ix).Value
> Endif
> Endfor
> m.lcCurrentValue = m.lcList
> Else
> m.lcCurrentValue = oElem.Value
> Endif
> lcVals = lcVals + Textmerge("<< oElem.Name >>: << m.lcCurrentValue >> << Chr(13) + Chr(10) >>")
> oElem = .Null.
> Endif
> Endfor
> Endif
> oFrm = .Null.
> Endfor
> Endif
> Cancel = .T.
> Messagebox(m.lcVals)
> Endif
> Endproc
>Enddefine
>
>
>Procedure GetSampleHTML
> Local lcCarouselImages, lcMyHtml
> Set Textmerge To Memvar m.lcCarouselImages On Noshow
> For ix=1 To Adir(laImages, _samples+'data\graphics\*.*')
> Copy File (_samples+'data\graphics\'+laImages[m.ix,1]) to ForcePath(laImages[m.ix,1],Addbs(Sys(2023))+'images')
> \<a class="carousel-item" href="#<< chrtran(JustFname(laImages[m.ix,1]),'.','_') >>">
> \\<img src="images/<< JustFname(laImages[m.ix,1]) >>"/></a>
> Endfor
> Set Textmerge To
> Set Textmerge Off
>
> TEXT to m.lcMyHtml textmerge noshow
><!DOCTYPE html>
><html>
><head>
> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
> <!--Import Google Icon Font-->
> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
> <!--Import materialize.css-->
> <!-- Compiled and minified CSS -->
> <link type="text/css" rel="stylesheet"
> href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
> media="screen,projection"/>
> <!--Let browser know website is optimized for mobile-->
> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
> <title>Materialize Sandbox</title>
> </head>
><body>
>
><div>
> <div class="row">
> <form action="" method="POST" name="MyForm">
> <div class="col s6">
> <input type="text" placeholder="Name" name="myName">
> </div>
> <div class="col s6">
> <input type="text" placeholder="SurName" name="mySurName">
> </div>
> <div class="col s6">
> <input type="text" class="datepicker" placeholder="Start date" name="fromDate">
> </div>
> <div class="col s6">
> <input type="text" class="timepicker" placeholder="Start Time" name="fromTime">
> </div>
> <div class="col s6">
> <input type="text" class="datepicker" placeholder="End date" name="toDate">
> </div>
> <div class="col s6">
> <input type="text" class="timepicker" placeholder="End Time" name="toTime">
> </div>
> <a href="#runItem"
> class="btn-floating btn-small green darken-1 waves-effect waves-light tooltipped"
> data-position="top" data-tooltip="Run report">
> <i class="material-icons">play_arrow</i>
> </a>
> </form>
> <div class="carousel">
> << m.lcCarouselImages >>
> </div>
> </div>
></div>
><!--JavaScript at end of body for optimized loading-->
><!-- Compiled and minified JavaScript -->
><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
><script type="text/javascript"
> src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
></body>
><script>
> $(document).ready(function () {
> $('.tooltipped').tooltip();
> $('.carousel').carousel();
> $('.datepicker').datepicker({format: 'mm/dd/yyyy'});
> $('.timepicker').timepicker({twelveHour: false});
> });
></script>
></html>
> ENDTEXT
> Return m.lcMyHtml
>Endproc
>
>
"The creative process is nothing but a series of crises." Isaac Bashevis Singer
"My experience is that as soon as people are old enough to know better, they don't know anything at all." Oscar Wilde
"If a nation values anything more than freedom, it will lose its freedom; and the irony of it is that if it is comfort or money that it values more, it will lose that too." W.Somerset Maugham
