Google Spread Sheets and Custom URL Layout Problem???

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I am using the Google Spreadsheet Widget and a html file for the layout.

The HTML code I got was from this github site without modifications. https://github.com/Rise-Vision/widget-google-spreadsheet/blob/master/examples/list.md

What happens is, the presentation plays fine initially, it displays the correct amount of items. Once the data refreshes after 5 min. The data duplicates it's self and gets jumbled a little.

Here is my preview presentation:
http://preview.risevision.com/Viewer.html?type=presentation&id=53a352c7-d0a5-4c05-8633-14014ed5d...

Focus on the "Sides" menu on the right side. You'll see that it will show the 3 items from my spreadsheet correctly for the first 5 minutes, then it will change after the data refreshes.

If I use the default layout, nothing changes after the data refresh and it seems to work correctly.

Anybody have a fix for this????? It really makes the Google Spreadsheet widget useless, if this happens.

Thank you
Photo of John Smith

John Smith

  • 170 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
John,

What do you mean by saying "default layout?" And what is wrong with it if it works?

I looked at your presentation and the code u have used. My question is why do not u try using RV Google Spreadsheet Widget, which works just fine, instead of that buggy code?
(Edited)
Photo of John Smith

John Smith

  • 170 Points 100 badge 2x thumb
I am using the Google Spreadsheet Widget.

In the Google Spreadsheet Widget Settings, at the bottom under Layout, you have the option of using the "default layout" or a URL for your own layout. 

I was wanting to customize how the data is shown.So for testing, I just used the sample code from that github site to see how a custom layout would work.

If that code is not correct can you direct me to a better sample HTML code to use for custom layouts?
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi John,
It may be the code in the custom .html that is causing this.  Another item is to run through the Google Widget setup and deployment instructions available in the initial README.md https://github.com/Rise-Vision/widget-google-spreadsheet

Thanks,

Hannah
Photo of Robert Schoneman

Robert Schoneman, Champion

  • 4,990 Points 4k badge 2x thumb
John, 

Agreeing with Hannah here. It looks like whatever is happening in "http://zingerdigital.com/rv/templates/menulist.html" is the issue. Have you tried running it through an HTML5 validator? I'm fond of: https://html5.validator.nu/
Photo of John Smith

John Smith

  • 170 Points 100 badge 2x thumb
I'm not looking to customized the widget....I just want to change the look on how the data is displayed, using css & html.

If the html code from the github site is incorrect, where can a find a correct html example???
Photo of John Smith

John Smith

  • 170 Points 100 badge 2x thumb
Robert the HTML code is directly from the github site. I did not modify it.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
John,
I, personally, do not even see the reason for some special HTML code because all that can be easily achieved with the default widget layout.
(Edited)
Photo of John Smith

John Smith

  • 170 Points 100 badge 2x thumb
I'd prefer to be able to have more control with an HTML template. I just need to see a working example HTML Code for a layout.
Photo of Stuart Lees

Stuart Lees, Employee

  • 586 Points 500 badge 2x thumb
Hi John, 

Unfortunately there is an outstanding issue in the Google Spreadsheet Widget when a data refresh occurs for a custom non-table HTML layout - https://github.com/Rise-Vision/widget-google-spreadsheet/issues/130 

We will be addressing the problem in the near future. In the meantime, I recommend using a <table> in your custom layout. 

Thanks
Photo of John Smith

John Smith

  • 170 Points 100 badge 2x thumb
well this is the code I used and it didn't work after the refresh....

-----------------------------------------------------------------------------
<!DOCTYPE html><html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Google Spreadsheet Widget - List Example</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      font-family: sans-serif;
    }

    body {
      margin: 0;
    }

    a:active, a:hover {
      outline: 0;
    }

    b, strong {
      font-weight: bold;
    }

    body {
      background: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    ul {
      list-style: none;
    }
    h3 {
      margin-bottom: 10px;
    }
    h4 {
      margin-bottom: 0;
      line-height: 1;
    }

    #scrollContainer {
      height: 100%;
      overflow: hidden;
    }

    .menus {
      margin-bottom: 20px;
      padding-bottom: 5px;
      border-bottom: 1px solid #EAEAEA;
    }
    .menus ul li {
      margin-bottom: 5px;
    }
    .menus ul ul {
      display: inline;
    }
    .menus ul ul li {
      display: inline;
      margin: 0 5px 0 0 ;
    }
    .A {
      font-family: Trebuchet MS, Helvetica, sans-serif;
      color: #22324B;
      font-size: 14px;
    }
    .changeUpIncrease, .changeDownDecrease, .valuePositivePositive, .valueNegativeNegative {
      color: rgb(0, 255, 0);
    }
    .changeUpDecrease, .changeDownIncrease, .valuePositiveNegative, .valueNegativePositive {
      color: rgb(255,0,0);
    }
  </style>
  </head>
<body>

  <table>
    <tr class="repeat item menus"><td>
    <!-- Shows data in Column A using the custom styling specified in the above CSS. -->
      <h3 class="A"></h3>
      <ul>
        <li>
          <table><tr><td>
            <!-- Shows data in Column B using the Heading Font style. -->
            <h4 class="B heading_font-style"></h4>
            <!-- Shows data in Column C using the Data Font style. -->
            <span class="C data_font-style"></span>
            <ul>
              <li>
                <!-- Shows data in Column D using the Data Font style. -->
                <span class="D data_font-style"></span>
              </li>
            </ul>
          </td></tr></table>
        </li>
      </ul>
    </td></tr>
  </table>


 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <!-- Necessary source code for auto-scroll plugin -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenLite.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/plugins/CSSPlugin.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/utils/Draggable.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/plugins/ScrollToPlugin.min.js"></script>

 <!-- Club GreenSock Members Only Plugin, subject to its own license: http://greensock.com/club/ -->
 <script src="//s3.amazonaws.com/rise-common/scripts/greensock/ThrowPropsPlugin.min.js"></script>

 <!-- Source code for google apis -->
 <script src="https://www.google.com/jsapi"></script>;

 <!-- Source code for gadgets api -->
 <script src="//rvashow2.appspot.com/gadgets/gadgets.min.js"></script>

 <!-- Source code for google spreadsheet widget -->
 <script src="//s3.amazonaws.com/widget-google-spreadsheet-test/0.1.0/dist/js/widget.min.js"></script>

</body>
</html>
------------------------------------------------------------------------

Any other ideas stuart?????
Photo of Stuart Lees

Stuart Lees, Employee

  • 586 Points 500 badge 2x thumb
Hi John,

Your layout doesn't look like correct format. You have a nested <table> within a <table> and the necessary table styles aren't being applied.

Have a look at this file as an example of a custom layout using a table - https://github.com/Rise-Vision/widget-google-spreadsheet/blob/master/examples/images.md

Following those layout/style guidelines should help resolve your issues.

Thanks
Photo of John Smith

John Smith

  • 170 Points 100 badge 2x thumb
OK, using that did fix the duplicating problem. But, it's still changes style and headings.

maybe there might be an issue using these css styles... "heading_font-style" and "data_font-style"

check it out
http://preview.risevision.com/Viewer.html?type=presentation&id=53a352c7-d0a5-4c05-8633-14014ed5d...
(Edited)
Photo of Stuart Lees

Stuart Lees, Employee

  • 586 Points 500 badge 2x thumb
Hi John, 

I looked at your custom layout HTML. The "data_font-style" class is what will always be applied to the <td> tags of the data table row on a data refresh. This is a limitation of the Widget at this time when using custom layouts.  

Thanks