4 Replies Latest reply on Sep 3, 2014 10:07 AM by madmike6537

    Managing Javascript code for webviewer

    madmike6537

      Hello all,

       

      I have been building a webviewer and learning HTML CSS and Javascript along the way. Within my Javascript code, I need to reference some of my filemaker fields. That is no problem as long as I type all the code inside of the calculation, but as my code grows, its getting increasingly difficult to manage it all inside of a calculation text box.

       

      I would like to just type up all my code outside of filemaker, then paste it into a text field which I could reference from the calculation. The problem with that, it seems, is that I cant reference my filemaker fields that way. It seems those have to be inside the calculation or they dont work (unless I am doing something wrong). I wonder if there is a way for my to pass my filemaker fields as a parameter when I reference that script?

       

      I am curious how others manage their webviewer code. If you keep it in a seperate file - how do you access filemaker fields? And do you simply store the code in a text field, or maybe a container field with the .js file and access that some way?

       

      Thanks!

        • 1. Re: Managing Javascript code for webviewer
          beverly

          See this thread and my answer for using "placeholders" and Substitute when ready to push field contents:

           

          <https://fmdev.filemaker.com/message/156556#156556>

           

          Beverly

          • 2. Re: Managing Javascript code for webviewer
            madmike6537

            Hi Beverly,

             

            I think you are referring to your answer here:

             

             

            Beverly Voth wrote:

             

             

            It goes into a field or variable (fm) or wherever you want to set the Javascript and/or HTML. It's just a way to "replace" parts of the "template" with whatever field values need to go into the chunk of text.

             

            Think of is as a "mail-merge", but you use the Substitute function to supply the real values that replace the "<<...>>" merge-type values inside the chuck of text.

             

            Yes, you can use "Let". It more or less a way to create the entire html/js/css as a block of text. And you put placeholders (the merge-style text) inside where they need to be.

             

            HTH,

            Beverly

             

            Can you elaborate on this process? I am not quite following. It sounds like something like this:

             

            Set temporary variables in the javascript code.

            Inside of my Let function in my calculation - somehow set a filemaker field which will replace all the temporary variables in the javascript code which is in a text field.

             

            Am I on the right track? Reading your notes, it seems like I put the temporary variables inside of arrows like this << temp variable >>, but how do I tell my calcuation to replace those with my fields?

             

            Thanks!

             

            Edit - I think I need to read up on the Substitue function in filemaker.

            • 3. Re: Managing Javascript code for webviewer
              beverly

              Yes, set "placeholders". I used the "<<...>>" but any symbols that you can call from the Substitute function will work. But if you happen to be using the double angle brackets in any of your code in the field, you need to use character(s) that you happen to NOT be already using.   Other suggestions might be "__....__" (double underscore) or "..." tilde at the front and back.

               

                   code code code <<field1>> code code code <<field2>> code
              code code <<field2>> code code <<field3>> ....

              Substitute ( mycode ; "<<field1>>" ; table::field 1 ) // one field replaced if you prefer to do this in script with "steps".

              Substitute ( mycode ; [ "<<field1>>" ; table::field 1 ] ; [ "<<field2>>" ; table::field2 ] ; .... ) // repeat as needed for each pair to find/replace.

               

              Check the Substitute help topic for how this function works for multiple parameters. You should know that if you set the same placeholder in the code field in more than one spot, ONE substitute will replace all matches.

               

              Beverly

              • 4. Re: Managing Javascript code for webviewer
                madmike6537

                Gah I always forget to click "mark this as a question"!

                 

                Thank you very much that is exactly what I needed.

                 

                Edit - now that I think about it, this will still have some issues - for example: if I want to do mathmatical expressions in my code, I wont be able to do this:

                 

                if ( <<field1>> + 5 = 10)

                   //do stuff

                 

                Edit - I guess it might work when filemaker's webviewer actually executes the script, but I will still have to work with 2 seperate peices of code, meaning I will have to go through and edit all the text when I put it into filemaker I was hoping to just manage it one time in my external IDE, and then when ready to go just paste it into my text field and be done.

                 

                Edit Edit - I suppose I can still use my external IDE for formatting and readability reasons and then copy and paste. I will just get a lot of errors as I am typing it up, and I wont be able to debug correctly, which is one of the main reasons I was hoping to use an IDE. I would be open to any other ideas, but if this is the best option I suppose it can work. At least its better than manually typing it into the calc field!