Creating Document Tours

Document tours are used in many examples in https://templates.getgrist.com/

The implementation isn’t polished as a feature that you could apply to your own documents in a UI-friendly way. However, if you’re willing to dig in a little, it’s very easy to do.

Here’s the fastest way to learn how to build one:

  1. Visit a template with a doc tour and edit the URL to add /p/GristDocTour after the document’s name. E.G. Meme Generator

    This reveals a special, hidden table named GristDocTour. It is only visible when you modify the url as described above.

    GristDocTour may have up to 7 columns.

    • Title - the pop-up header; this is a text column
    • Body - the pop-up body; this is a text column
    • Placement - a text column that places the pop-up in relation to a cell with words like right, top, bottom. https://popper.js.org/ has an interactive tool that shows how this works.
    • Location - a text, formula column with the formula SELF_HYPERLINK()+$Location_Cell SELF_HYPERLINK adds the URL through to the end of the document’s title.
    • Location Cell - another text column. This is where you copy and past a cell’s anchor link from /p onwards. E.G. /p/3#a1.s3.r3.c3
    • (Optional) Link URL - this adds a link after the body text
    • (Optional) Link Text - this adds a text label to the Link URL
    • (Optional) Link Icon - add a small icon before the link. Available icons listed here: https://github.com/dsagal/grist/blob/master/core/app/client/ui2018/IconList.ts
  2. Create a table named GristDocTour in your document with the columns described above.

    To find anchor links, right-click on any cell to open a context-menu and select "Copy anchor link’ or use the shortcut Ctrl+Shift+A.

    image

3 Likes