Table Connect

Table Connect widget

Our Table Connect widget displays data tables on your site with ease. As part of our Connect series of widgets, your table content is managed conveniently using Google Sheets, or through the use of a .CSV file – which can easily be exported from Excel or other spreadsheet apps. Tables using Google Sheets are dynamic, meaning they can be updated instantly by yourself or a client, without even opening the site builder.

Demo: https://demo.wocode.com/table-connect

Update Log:


  • v1.1: Fixes issue causing the widget to fail to pull data from Google Sheets (08/18/2021)

Setup

SETTING A UNIQUE ID


  • The Unique ID field allows for multiple widgets to be used on the same page. If you are using just one widget, you can leave this field unchanged.
  • If you plan to use more than one Table Connect widget on the same page, this step is very important. Before adding a second widget to the page, change the Unique ID of the first widget to something other than the default “table-connect-1” ID. If two widgets are on the same page with the same ID, they will conflict, causing table data to be corrupted. Simply make sure that any instance of Table Connect utilizes a separate Unique ID.
  • If you accidentally use two widgets with the same ID, not to worry. Just perform a hard refresh of the page. This is usually Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows).

USING GOOGLE SHEETS

  • Open the Google Sheets Content Template link in the widget option panel. This link opens our pre-populated Google Sheets content template.
  • If you are not already signed into your Google account, do that before proceeding.
  • The content spreadsheet cannot be directly edited. Make a copy of each: File > Make a copy.
  • Name your copy.
  • Publish the copy: File > Publish to the web. Make sure to publish the document as a .CSV files.
  • For more detailed instructions, visit the section at the bottom of this page, named Editing the web-based Google Spreadsheet templates.
  • You may edit your table data now, or return to do this later.
  • To edit the table, update the table data as desired. You may rename all of the column names.
  • You may rename all of the column names.
  • To use links or images, use pure HTML. Place the HTML directly in the desired cell. If you’re not familiar with creating links or images using HTML, use an online generator such as:http://scriptgenerator.net/html-text-and-image-link-generator/Link Example: <a href=”https://www.wocode.com”>Without Code</a>Image Example: <img src=”https://regalideas.com/wp-content/uploads/2016/08/tkk-test-icon-circle.png” alt=”Site Logo”></a>
  • Finally, copy the Google spreadsheet key. The spreadsheet key can be found in the “Anyone with the link” sharable URL that is located in the share popup. Copy the long string of numbers and letters in the center of the sharable URL and paste that into the table connect widget.
  • Return to Architect and open the widget option panel. Paste the spreadsheet key into the Google Spreadsheets Key field in the widget options panel.
  • Your spreadsheets are now linked to the widget, and you should see your own table data in the table preview in the Architect editor, or the preview mode.

USING AN EXTERNAL CSV FILE

In addition to using Google Sheets, you may use a .CSV file which can be exported from Excel or other spreadsheet editors. The instructions below are general settings that should work with any spreadsheet editor. For help with exporting a .CSV from your editor, see the help section of your editor.

  • Open your spreadsheet in your spreadsheet editor app.
  • Use the “Save As” command to save your document as a .CSV file. Alternatively, some editors may require use of the “Export” command to create a .CSV file.
  • Save or export your spreadsheet and locate it on your computer.
  • This file will need to be hosted on the web in order to be used. Upload the file to a web hosting service such as Dropbox.
  • Copy the address of your hosted .CSV file.
  • Return to the Architect site builder and open the Table Connect widget options.
  • Enable the Enable CSV Link File Option setting. Enabling this will reveal the CSV File URL field.
  • Enter your hosted .CSV file address in this field.

Notes:

  • Saving or exporting your spreadsheet as a .CSV file from a spreadsheet editor may create minor differences in formatting or display of data. Sometimes adjustments are needed to reconfigure formatting of exported .CSV files. If you intend to reconfigure your spreadsheet, be sure to save a separate version of your spreadsheet.
  • Check the permissions of your file hosting service. Sharing permissions should be as open and unrestricted as possible for public spreadsheets used in Table Connect.
  • When using Dropbox for file storage, a minor modification is needed for the URL to be connected properly with Table Connect. Your sharing link will end in “…dl=0” by default. Change the “0” to a “1”. So the end of your sharing link should be “…dl=1”. This allows Table Connect access to the file.

WIDGET SETTINGS

Let’s take a look at the widget options within the Content tab of the widget option panel.

  • Highlight Column: This setting allows you to select a column of your table that uses bold text and highlighted table cells. To set a column, use the columns number, counting from left to right. To highlight the first column, enter “1” in the field, and so on. To highlight no columns, enter “0”.
  • Enable Sorting: This option allows the site visitor to sort table data by clicking on a column header.
  • Enable Pagination: This option shows pagination at the bottom of the table. Useful for large tables.
  • Rows Per Page: Sets the number of rows shown per page by default.
  • Previous & Next Page Text: This setting allows alternate text to be used for the “Previous” and “Next” buttons.
  • Enable Search Box: This option allows the search box to be visible. This search is restricted to the information within the table.
  • Search Text: This setting allows you to use custom text in the search function.
  • Enable “Showing Page” Info: This enables the page info on the bottom left side of the table.
  • “Showing Page” Text: This setting allows you to use custom text in the “Showing Page” info text.
  • “Show __ Entries” Text: This setting allows you to use custom text in the “Show __ Entries” text.

DESIGN SECTION

The Design settings can be accessed by clicking the Design tab at the top of the widget options. The design settings available in this widget are extensive. All text fonts, colors and styles can be styled. Each setting is self-explanatory and will not be covered individually in this documentation.

MOBILE AND “OVERFLOW” MODES

Table Connect uses a special mobile mode for displaying large amounts of table data on smaller screens such as mobile phones. When the table size exceeds the screen size, a small green circle “+” icon appears next to each row. Clicking this icon allows the row to expand, showing additional information. For example, if you have 5 columns in your table, but only 3 show on a mobile device screen, clicking the icon will show information from the additional two columns. Click the red close icon again to collapse the row.

This same icon can appear even on desktop displays, depending on the number of columns in a table. Similar to spreadsheets in Excel, some columns in large spreadsheets may not fit in your browser window. In this case, the same green “+” icons will appear, even on a desktop display. We call this “Overflow” mode.

Editing the web-based Google Spreadsheet templates

  • You will need a Google account and access to the free Sheets web app in order to edit the template (no Google account is required for viewing the template).
  • Follow the link in the bottom of the widget panel to open the templates.
  • The template is view-only and cannot be edited as-is. Make a copy of the template: File > Make A Copy.
  • Name the new copy.
  • The new copy can now be edited.
  • When ready, you will need to publish the spreadsheet in order to use it with Sidebar Menu. Go to File > Publish to the web…
  • Click the “Web Page” dropdown and select comma-separated values (.csv).
  • Click “Publish”.
  • Close that window and click “Share” on the top right of the screen.
  • Under “Get Link”, click “Change”.
  • Change the link from “Restricted” to “Anyone with the link”.
  • Click “Copy Link”.
  • Then copy the long string of numbers and letters in the center of the sharable URL and paste that into the widgets option panel.
  • Paste this Google Spreadsheet Key into the Widget option panel in Architect.

TIPS FOR EDITING CSV FILES

  • Once you’ve published your Google Spreadsheet, ANY change made to the spreadsheet will be updated on your website. This is handy and quick, though you will want to be careful to make sure that your changes are exactly what you want.
  • The data within the CSV must be entered carefully:
    • Spaces are not supported in most entries
    • Be careful if you’re cutting and pasting (be sure not to include extra characters or spaces)
    • Do not create empty rows
  • Check your progress often while editing CSV files. Small errors such as spaces or typos can make it so that your sidebar menu does not appear. If you’re working with a local file, save and load the file into the widget, then publish to check for functionality. If you’re working in Google Sheets, simply preview your sidebar and refresh the browser to see ongoing updates. If you do have an issue, use the “undo” function in your spreadsheet editor to back up to a point where the widget was working.