11 Replies Latest reply on Jun 27, 2017 7:48 AM by user19752

    Webviewer HTML+CSS+JQuery for Syntax Highlighting

    osninc

      I am trying to learn the Webviewer based on Jeremy Brown's  Webviewer Integrations example files: Web Viewer Integrations Library - Soliant Consulting  I have created a new file with 5 text fields: HTML, CSS1, JS1, JQuery  and CODE that I am trying to combine with a calculation field and display in webviewer.  My goal is to be able to format the CODE and display it in the webviewer. I am using Prism which is a free code syntax highlighter that requires two files: prism.css and prism.js along with your own HTML file/field.  I have downloaded and opened these files in a text editor and then copied and pasted the files into the fields CSS and JQuery.  I then created a simple HTML file:

       

      <!DOCTYPE html>

      <html>

      <head>

        PRISM

        <link href="**CSS1**" />

      </head>

      <body>

        PLACEHOLDER FOR CODE FIELD

      <script src="**JS1**"></script>

      </body>

      </html>

       

      What I get displayed in the webviewer is part of the CSS which is not what I was expecting, I would have expected "PALCEHOLDER FOR CODE FIELD as shown in the HTML.  I am also wondering how I can reference the CODE field once I get this working.  I want to be able to use this as a way to display readable XML or JSON when testing against a REST API.

        • 1. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
          user19752

          You are missing tag (maybe <title>) around a word PRISM, then body starts at there.

          • 2. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
            user19752

            And you look using bad template, see figure 4

            Web Viewer Integrations Library Overview - Soliant Consulting

            This don't use <link> for embedding CSS source in field. etc.

            If you use href or src, they need file reference, so you can't embed contents there.

            2 of 2 people found this helpful
            • 3. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
              Mike Duncan

              This line looks like an issue:  <link href="**CSS1**" />

               

              The href attribute is expecting a URL, not CSS. It should maybe look like this:

               

              <style>

              **CSS1**

              </style>

              1 of 1 people found this helpful
              • 4. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
                beverly

                Just what user19752 said. If you follow the examples in Jeremy's article/sample that is also what he said!

                No external calls, no href="", no src="". The actual code is in fields and is placed into the 'template' where the **__** exists (but not as an external link).

                Beverly

                • 5. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
                  osninc

                  Thanks Beverly & user19752.  I made those changes and now have *Data1*

                  loaded with sample JSON and it is displaying unformated even though I have

                  the CSS loaded into CSS1 and the Javascript for Prism loaded into JS1.  Any

                  suggestions on why this would not format the code in the webviewer like it

                  does on the Prismjs.com website?  Here is screen shot and here is a link to

                  the full code on JSFiddle for the page from the combined field from

                  HTMLCSS1JS1: https://jsfiddle.net/wwo3jhvf/

                  <https://mailtrack.io/trace/link/9bb6e01f13750b6f50b9b20cfac48d7cb0ed2597?url=https%3A%2F%2Fjsfiddle.net%2Fwwo3jhvf%2F&userId=1587337&signature=eb82b26ac2051959>

                   

                  • 6. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
                    jbrown

                    Howdy.

                    It looks like the field with the JSON is not surrounded by the proper HTML tags. According to the documentation of prism.js, it should look like this:

                     

                     

                    <pre><code class="language-javascript">**Data2**</code></pre></body>

                     

                    The <pre> and <code> tags need to surround your data placeholder text. And you need to tell the code which language class to use. In my case I'm using the language 'javascript'.

                     

                    I downloaded this library and put it into the web viewer library. I couldn't get the JSON to format or hi light. Not sure how it is supposed to highlight, but the other languages work nicely.

                    Attached is my example from my web viewer library. You can change the **___** placeholder to Data1, Data2, or Data3 and update the language in the tag to be the same as the field label ( all lowercase, however).

                    1 of 1 people found this helpful
                    • 7. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
                      osninc

                      Jeremy,

                       

                      Thank you so much.  Your examples are a huge help in understanding how to integrate HTML/CSS/JS.  I see that you couldn't get JSON to display so Im guessing it might be a config setting in prismjs.  I found another solution to display JSON that DB Services used in this example file:

                      Here is their HTML/CSS/JS but not sure how I would separate to work in the template you sent me. When i try to split the HTML/CSS/JS and copy/paste into the fields in your solution it doesnt seem to work.  Any thoughts on how to get it to work?  Thanks!

                       

                      "data:text/html, " &

                      "

                      <!DOCTYPE html>

                      <html>

                      <head>

                      </head>

                      <style>

                      .string { color: #07a; font-style: italic; }

                      .number { color: #ca7841; }

                      .boolean { color: red; }

                      .null { color: black; }

                      .key { color: #905; }

                      body{

                        color: #999;

                      }

                      </style>

                      <script type='text/javascript'>

                      window.onload=function(){

                      function output(inp) {

                          document.body.appendChild(document.createElement('pre')).innerHTML = inp;

                      }

                      function syntaxHighlight(json) {

                          json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

                          return json.replace(/(\"(\u[a-zA-Z0-9]{4}|\[^u]|[^\\\"])*\"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {

                              var cls = 'number';

                              if (/^\"/.test(match)) {

                                  if (/:$/.test(match)) {

                                      cls = 'key';

                                  } else {

                                      cls = 'string';

                                  }

                              } else if (/true|false/.test(match)) {

                                  cls = 'boolean';

                              } else if (/null/.test(match)) {

                                  cls = 'null';

                              }

                              return '<span class=\"' + cls + '\">' + match + '</span>';

                          });

                      }

                      var obj = " & PREFERENCES::results & ";

                      var str = JSON.stringify(obj, undefined, 4);

                      output(syntaxHighlight(str));

                      }

                      </script>

                       

                       

                      <body>

                      </body>

                      </html>"

                      • 8. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
                        jbrown

                        I'm glad you found something that works.

                        To separate these, simply extract anything between the <script> tag(s) and put each one into a field and put in the placeholder text

                        Same for the style tags. Put that text inside the CSS1 field.

                        So

                        <style>

                        .string { color: #07a; font-style: italic; }

                        .number { color: #ca7841; }

                        .boolean { color: red; }

                        .null { color: black; }

                        .key { color: #905; }

                        body{

                          color: #999;

                        }

                        </style>

                         

                        would become:

                         

                        <style> **CSS1** </style>

                        and the script tag would look like this:

                         

                        <script> **JS1 </script> (you don't need the 'type = 'javascript'')

                        • 9. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
                          osninc

                          Thanks, almost there.  I made those changes and put in the CSS1 and JS1 fields but still no worky.

                           

                          I am wondering what I need to change this line in the Javascript to get it to work:

                          var obj = " & PREFERENCES::results & ";      Where PREFERENCES::result is TABLE::field in the DB Services file

                          In the webviewer it displays as: " & PREFERENCES::results & "

                           

                          If I change it to point to the TABLE::field in your solution lwhere the JSON is saved

                          var obj = " & HTML::Data1 & ";

                          In the webviewer it displays as: " & HTML::Data1 & "

                           

                          Here is the HTML now:

                          <!doctype html>

                          <html>

                          <head>

                          <style>**CSS1**</style>

                          <script type='text/javascript'>**JS1**</script>

                          <body>

                          </body>

                          </html>

                           

                          Thanks in advance.

                          • 10. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
                            jbrown

                            Hi.

                            Do the same thing as you've done with the placeholder text. Inside the JS1 field, put in the placeholder text "**Data1**" and it should resolve. This text will be replaced by the text inside Data1 field, and then the placeholder **JS1** will be replaced with the content in the JS1 field.

                            it would, then, be:

                            var obj = **Data1**;

                            The obj variable, in your case is literally & HTML::Data1 & since you put that in quotes.

                             

                            If you have my library, check out the C3Charting integration. The JSFunction field contains the placeholder text that contains the data values for the chart.

                             

                            Let me know if that helps

                            • 11. Re: Webviewer HTML+CSS+JQuery for Syntax Highlighting
                              user19752

                              You are trying to embed calculation.

                              If your field value is FM calculation instead of javascript code, change calculation for template like as

                              Substitute ( HTML ; "**JS1**" ; Evaluate ( JS1 ) )