14 Replies Latest reply on Aug 23, 2017 6:58 AM by makerbert

    Exchange Data with Javascript

    flowet

      I'm using the open-source vis.js library to play with webviewer and see whats possible. I'm particularly interested in their network views.

       

      Specifically I'm trying to find a way to create a hierarchical network with javascript, which is able to read and write data to FileMaker tables. The idea is to provide a structure for the hierarchy with FileMaker data and visualise it in a webviewer using vis.js. The user shall now be able to manipulate the structure, say add another hierarchy level or change the order.

       

      Right now I'm stuck with getting the data out of the webviewer and into FileMaker. vis.js provides functions that allow you to extract the displayed data in JSON format. I can easily display and copy them from the webviewer into a FileMaker field, but obviously this solution doesn't have a future. So far my approach was to find a way to forward the contents of JavaScript variables to FileMaker.

       

      Anybody any ideas? Is what I'm trying to accomplish even possible with current tools (I'm running FM16 both on client and (Windows-)Server)?

        • 1. Re: Exchange Data with Javascript
          CarlSchwarz

          MBS has a plugin that will call javascript functions in a web viewer.

          • 2. Re: Exchange Data with Javascript
            fmpdude

            So, so you want to have standalone JS files that can read/write FMP data or do you want to stay in the web viewer?

             

            When I use JS to interact with FMP, I use a small micro-service and JQuery with code like this:

             

            // example JavaScript portion using JQuery:

            // Just shows return value from web service in a window

             

            $(document).ready(function()

            {

                $("button").click(function()

                {

                    $.get("http://127.0.0.1:4567/<some_web_service_function>", function(data, status)

                    {

                        alert("Data: " + data + "\nStatus: " + status);

                    });

                });

            });

             

            Output:

            Then, in the microservice I have the "Service" and "Data" layers abstracted to do whatever is needed with the database. Usually, I POST some form variables to the web service and it "knows" how to persist the data into whatever backend database I'm using (FMP, SQL Server, ...).

             

            The web service serves up JSON from HTML/JS form queries which the service then uses JS libraries DOJO or JQuery UI to populate form elements (so easy and with such amazing results...all for free!).

             

            Check out the amazing widgets:

            Dojo Toolkit

            http://jqueryui.com/

             

            HOPE THIS HELPS.

            • 3. Re: Exchange Data with Javascript
              clind

              The easiest way to have your webviewer change data in FileMaker is to call FM scripts from the webviewer using the fmp:// url scheme (you can set variables with this as well):

               

              To run a script in a file using a URL:

              fmp://192.168.10.0/filename.fmp12?script=scriptname

              Specify a script parameter and local variables using the format:

              fmp://{{account:password@}address/}filename{?script=scriptname{&param=scriptparameter}{&$variablename{[repetitionnumber]}=value}}

              1 of 1 people found this helpful
              • 4. Re: Exchange Data with Javascript
                Mike Duncan

                Using an fmp url is correct, as was mentioned. There are some limitations using this, such as string length on Windows when passing back a parameter, but if the data is not too long then it should be fine. There are workarounds to handle arbitrarily longer results.

                Here is an example that handles both platforms: GitHub - SoliantMike/FM-js_ExcelSheets: Save XSLX files programatically with Javascript

                If you need to support WebDirect, then fmp url won't work, but you can use CWP to pass the data back to the FM Server and pick it up in your WebD session, so it can be made to work there as well.

                Good Luck,

                Mike

                2 of 2 people found this helpful
                • 5. Re: Exchange Data with Javascript
                  wimdecorte

                  Here's an excellent intro with a full library of integrations:

                   

                  Web Viewer Integrations Library - Soliant Consulting

                   

                  jbrown is presenting this at Devcon this year too, if you are going check it out.  Some more info on changes in FM16:

                  JavaScript Changes in FileMaker16 - What You Need to Know

                  1 of 1 people found this helpful
                  • 6. Re: Exchange Data with Javascript
                    jbrown

                    Thanks, wimdecorte for mentioning that. Ill have a new version of the library released Tuesday (7/25) afternoon after the presentation with almost 40 different integrations.

                     

                    OP, the web-viewer is awesome. I myself asked the question "What can you do with a web viewer" on this forum a few years ago. I decided to explore it deeply. Playing with JS and the web viewer is what I do for fun instead of video games or (sometimes) human interaction.

                     

                    Good luck. Let me know if you need any help with it.

                    • 7. Re: Exchange Data with Javascript
                      makerbert

                      I'm so utterly stuck...

                       

                      I try to click on a google map in order to get the name of the geojson object i'm on. I have html with some javascript which logs the property I want in the browser console (F12): *(when I test the html in a browser that is)

                       

                      map.data.addListener('click', function(event) {
                          console.log(event.feature.getProperty("afdeling"));
                      })
                      

                       

                      But what I want is the property as parameter in a FMP url so my FM can pick it up, something like:

                       

                      'fmp://$/fmfilename?script=ReadParam&param=afdeling';
                      

                       

                      Whatever I try, I can't get this to work and my lack of javascript knowledge isn't helping either but at the moment i'm unable to spend time studying.

                       

                       

                      There surely must be a very simple var statement or a function in which I can get the contents of the property in a param?

                      • 8. Re: Exchange Data with Javascript
                        CarlSchwarz

                        I'm not anywhere to debug it, but it looks like you are already getting a string.  Make your URL by setting it to a variable.

                         

                        var url = "fmp://$/fmfilename?script=ReadParam&param=" + event.feature.getProperty("afdeling");

                        • 9. Re: Exchange Data with Javascript
                          beverly

                          NOTE-WORTHY: jbrown is a former school teacher, not a former Web Developer. What he's discovered and presented is not only "what can be done", but "here's a good method for doing so", and "if I can do it, so can you!"

                           

                          makerbert  Continue to post questions and the varied skill sets on this forum will point you to the answers (even if it's "no, sorry cannot be done"!)

                           

                          Remember to keep in mind that there are things that JavaScript can & cannot do (limitations for security, perhaps) and things that Web Viewer can & cannot do (could be security as well).

                          Beverly

                          • 10. Re: Exchange Data with Javascript
                            jbrown

                            Morning. Here's the code in my examples, and this is pretty standard:

                             

                            google.maps.event.addListener (marker, 'click', function () {
                            
                                var markerTitle = marker.getTitle();
                                  var markerID = this.customInfo;
                              var myTitle = "<a href=fmp://$/**FileName**? script=**ScriptName**&param="+markerID+ "><h3>" + markerTitle + "</h3></a>";
                              var infowindow = new google.maps.InfoWindow({
                                content: myTitle
                              });
                            

                             

                            This bit of code adds a listener event to each marker, so that, when clicked on, the popover will pop up.

                            Inside this is a var myTitle. This holds an a href tag that contains the fmp protocol. In my map example, clicking on this link will run the script  GTRR_People, which is substituted in for the **ScriptName** placeholder.

                             

                            EDIT: I removed a lot of extra, not-needed advice; doesn't apply to this situation.

                            in your case. . .

                            This is what you can do to get FileMaker to respond when you click on it:

                             

                            var theProperty = this.afdeling;

                            var theURL = "'fmp://$/fmfilename?script=ReadParam&param=theProperty';

                            window.location = theURL ;

                             

                            The 'this.afdeling' command will get that property from the point or marker you clicked on. I set that to a variable even though it's not needed and then put that into the URL.

                             

                             

                            Be happy to help more if you need.

                            jb

                            1 of 1 people found this helpful
                            • 11. Re: Exchange Data with Javascript
                              makerbert

                              Jeremy and Beverly, many thanks for your replies, I'll get a break now (end of the afternoon in the Netherlands) and return tomorrow morning to make a new start. Keep you posted ...

                              • 12. Re: Exchange Data with Javascript
                                makerbert

                                Steps taken!

                                I have read this https://www.soliantconsulting.com/blog/2014/04/getting-started-javascript-and-filemaker and it describes -amongst others- how to send a parameter to filemaker from a webpage in your webviewer.

                                 

                                I figured you should be able to send that parameter to filemaker from an external browser, which works well if you have the receiving filemaker file opened on the same machine. That makes testing, experimenting and debugging a lot easier and faster.

                                I already had a working html/javascript page with a small number of geojson objects and, working from the browsers inspector I was able to mash the soliant code with the java click event (or whatever it's called).

                                 

                                The attached webpage offers some geojson parcels, a mouseclick sends the name attribute ('afdeling') to a filemaker script, which displays it. You need to add your own google api in the html for it to work.

                                 

                                I have been on and off trying to get this since the beginning of May and I can't tell you how happy I'm right now..  I really value your support from last week.

                                 

                                Next steps: make this work from within the webviewer, get all 5000+ geojson objects on the map. It's not finished yet but I'm a lot further.

                                • 13. Re: Exchange Data with Javascript
                                  jbrown

                                  Morning. The blog post you linked to by my colleague logicurio was my source for getting started and helped me build the library and learn more about JS and FM. I'm glad it was useful to you.

                                   

                                  How do you want it to work in FileMaker? I copied the code from the web page into a FM file, plugged in my google API ke and it worked. Clicking on a shape on the map, I got the script "incoming' to work.

                                  (In FM 16 I have to turn on the extended privilege fmurlscript for the full access account to allow the web viewer to run a aFileMaker script)

                                  What more do you need to do? Are your coordinates (or the entire geometry object) stored in FileMaker? If so you can do some data-gathering from records, plop them in a field or a global variable and substitute out a piece of placeholder text in the code for the actual data. My library shows that off all over the place.

                                  I'd be happy to lead you thru that if you need.

                                  • 14. Re: Exchange Data with Javascript
                                    makerbert

                                    In the mean time more progress was made.

                                    At the moment I've got a custom function that pieces together the html/javascript you saw in the earlier example. combined with the geojson (all 5000+ polygons now) which is read from a textfield.

                                     

                                    I don't know where I first read about the idea of using a cf for populating the webviewer but it was probably on this forum.

                                     

                                    Thanks jbrown for your tip on the extended privilege fmurlscript!

                                     

                                    Over the next days I'll try to add autolocation and using a tap on the geo-object to go to a related record so the user can update that. When that works I'll post another example.